hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你本身的定製化博客

時間 2019-12-05

標籤 hexo 高階教程主題優化加入網易音樂動態背景自定義樣式打造屬於本身定製博客简体版

原文原文鏈接

前言

本篇文章是在已經搭建好gitpage+hexo的博客的前提下（不懂怎麼搭建的能夠參考個人另外一篇博文：瞭解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo開發本身的博客，這兩篇博文都比較詳細的教你們最基礎的怎麼將博客搭建起來。本篇博文是使用next主題的進擊版本，主要是有如下內容javascript

域名綁定，將github博客和你的獨有域名綁定css
添加更多的menu內容html
添加頭像java
定義網站個性logonode
自定義樣式，重寫默認樣式，個性化定製你的博客git
炫酷動態背景製做github
添加網易雲音樂web
添加網易雲跟帖npm
添加leancloud閱讀次數統計功能json
添加wordcount頁面字數統計
添加fork me on github功能

要想最快的知道這些功能的效果，請移步個人我的博客：http://cherryblog.site/ ，順便求個fork，大爺們看過能夠評論一下，試一下新加上的網易雲跟帖效果怎麼樣ヽ(●´ε｀●)ノ
首先要說一下我使用的版本，這個是很重要的，個人博客最早建立於2016年的9月份，距離如今已經有大半年了，因此好多版本都已經進行了更新，特別是next主題集成了更多的插件，簡直不要太爽＼（＠￣∇￣＠）／

hexo v3.2.2
next v5.1.0
node v4.5.0

在改爲本身想要的效果以後，對總體的hexo的next主題我有了一個大概的瞭解，其實next主題的最新版（5.1）已經集成了大部分咱們須要的插件，只須要在主題配置文件中將默認的false改成true便可，可是咱們也仍然須要知道都有哪些新的功能，最有效的方法是直接去查看官網的api：next官網

授之於魚不如授之於漁

但願咱們都可以理解其源碼，製做出屬於本身專屬的個性化博客(•̀ᴗ•́)

咱們須要改的文件其實也就那麼幾個，大部分是不須要更改，next都已經幫咱們配置好了~
默認目錄結構：

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json

deploy：執行hexo deploy命令部署到GitHub上的內容目錄
public：執行hexo generate命令，輸出的靜態網頁內容目錄
scaffolds：layout模板文件目錄，其中的md文件能夠添加編輯
scripts：擴展腳本目錄，這裏能夠自定義一些javascript腳本
source：文章源碼目錄，該目錄下的markdown和html文件均會被hexo處理。該頁面對應repo的根目錄，404文件、favicon.ico文件，CNAME文件等都應該放這裏，該目錄下可新建頁面目錄。
- drafts：草稿文章
- posts：發佈文章
themes：主題文件目錄
_config.yml：全局配置文件，大多數的設置都在這裏
package.json：應用程序數據，指明hexo的版本等信息，相似於通常軟件中的關於按鈕

咱們最早修改的應該是在hexo根目錄下的配置文件_config.yml文件，這裏是配置整個站點的配置信息，在文章的最後貼出個人配置文件，有興趣的朋友能夠參考一下~
其次就是咱們的主題配置文件
在對應的主題下的_config.yml 由於我使用的是next主題，因此目錄的路徑爲C:\Hexo\themes\next\_config.yml 這裏配置的是使用主題的配置文件，這個配置文件的東西就有點多了，咱們大部分的修改也是在這個文件下完成的。好比說使用集成的第三方插件，默認爲false，咱們須要將其改成true而且配置相應的app_key就可使用該插件了~有木有很方便(^ ◕ᴥ◕ ^)
而後咱們須要修改樣式的話是須要設置css和甚至是修改模板，
頁面展示的所有邏輯都在每一個主題中控制，源代碼在hexothemes你使用的主題中，以next主題爲例：

├── .github            #git信息
├── languages          #多語言
|   ├── default.yml    #默認語言
|   └── zh-Hans.yml      #簡體中文
|   └── zh-tw.yml      #繁體中文
├── layout             #佈局，根目錄下的*.ejs文件是對主頁，分頁，存檔等的控制
|   ├── _custom        #能夠本身修改的模板，覆蓋原有模板
|   |   ├── _header.swig    #頭部樣式
|   |   ├── _sidebar.swig   #側邊欄樣式
|   ├── _macro        #能夠本身修改的模板，覆蓋原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打賞模板
|   |   ├── sidebar.swig   #側邊欄模板
|   ├── _partial       #局部的佈局
|   |   ├── head       #頭部模板
|   |   ├── search     #搜索模板
|   |   ├── share      #分享模板
|   ├── _script        #局部的佈局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主頁面模板
|   ├── index.swig     #主頁面模板
|   ├── page           #頁面模板
|   └── tag.swig       #tag模板
├── scripts            #script源碼
|   ├── tags           #tags的script源碼
|   ├── marge.js       #頁面模板
├── source             #源碼
|   ├── css            #css源碼
|   |   ├── _common    #*.styl基礎css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字體
|   ├── images         #圖片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代碼
├── _config.yml        #主題配置文件
└── README.md          #用GitHub的都知道

綁定域名

綁定域名的思路以下：

在萬網購買本身喜歡的域名（.com的會貴一點，.site和.xyz的相對便宜一些，有的只須要幾塊錢一年就能夠）
解析DNS
在hexo中添加CNAME文件

購買域名

以前沒有買域名的時候我想使用網易雲跟帖，發如今註冊網易雲跟帖的時候使用原來的域名提示「url已被使用」，這是由於網易雲跟帖不承認二級域名，因此要本身買域名。
我選擇的是萬網，阿里下面的。我選擇了一個.site的域名，原價8元，使用阿里雲app支付還優惠5元，等於3元到手一個域名（一年）~
按照官網的步驟一步一來就能夠了~

解析DNS

購買完域名以後咱們須要解析DNS地址，在管理控制檯中的左側有域名選項，而後找到你的域名，點擊後面的「解析」

點擊添加解析，記錄類型選A或CNAME，

A記錄的記錄值就是ip地址，github(官方文檔)提供了兩個IP地址，192.30.252.153和192.30.252.154，這兩個IP地址爲github的服務器地址，兩個都要填上，
解析記錄設置兩個www和@，線路就默認就好了，CNAME記錄值填你的github博客網址。如個人是sunshine940326.github.io。

在hexo中添加CNAME文件

接下來在你的hexo文件夾下source文件夾下新建一個CANME文件,裏面加上你剛剛購買的域名好比個人cherryblog.site

若是直接填寫cherryblog.site的話直接訪問www.cherryblog.site 和 cherryblog.site 均可以訪問到咱們的網站，可是若是填寫www.cherryblog.site 的話只能經過www.cherryblog.site 訪問，不能經過cherryblog.site 訪問

而後你就能夠hexo clean,hexo g，hexo d 發佈你的博客看看效果啦~

添加菜單頁

添加菜單頁的思路（添加菜單頁就是添加一個頁面，有兩種方式）：第一種是使用git命令hexo new page "photo" 就直接建立了 C:\Hexo\source\photo\index.md文件，而後編輯index.md 文件就能夠了~

第二種：手動建立上面的文件= =

在主題的配置文件添加menu索引路徑（根路徑是hexosource,因此你若是想要更改頁面的內容就去hexosource下找到對應的文件夾，默認內容是在其index.md文件下)
在hexo的source文件下添加對應的文件夾
在主題的配置文件添加menu_icon字段設置對應的icon
修改language文件下zh-hans語言包
在發表文章的時候添加對應的menu字段就能夠看到

剛開始的時候不理解怎麼添加分類頁和添加文章的區別，公司有一個項目用到了wordpress，而後發現二者有類似的地方，不一樣的就是wordpress是有可視化的操做後臺，而hexo是須要git bash本身建立
首先咱們要分清什麼是頁面，什麼是文章，
在hexo中menu下的內容都是新的頁面咱們能夠經過hexo new page "pagename" 建立，hexo默認的頁面只有home,archives,tags 三個，以後咱們寫的博文就是文章，經過hexo new "name" 建立的name.md 文件在根目錄的source\_posts 下，在每個文章的頭部，咱們能夠配置其tags或者categories內容，至關於文章是頁面的下一級

在配置文件中添加menu索引路徑

咱們能夠在主題配置的_config文件下找到相應的字段，字段前加# 表示被註釋掉，咱們也能夠本身添加menu的內容，好比我又新增了兩個menulife 和photo

這裏添加的字段實際上是加上文件索引的路徑，這裏hexo設置的根路徑是hexo/source 接下來咱們在這個根路徑下創建相應的文件夾就能夠實現點擊mune跳轉到相應的頁面上了

,
沒有明白什麼意思的同窗看下圖

在source文件添加menu文件夾

咱們須要在這個路徑下本身創建對應的頁面，好比說我新建了menulife 和photos，而後再source文件夾下面新建兩個名字爲life 和photo 的文件夾，裏面添加一個index.md markdown文件，內容是相似這樣的

---
title: photo
date: 2017-04-04 22:14:07
type: "photo"
comments: false
---
啦啦啦~

這是一個markdown文件，你能夠本身編寫，可是我還不知道怎麼把添加html文件= =，回來研究一下

給menu添加icon

若是隻是上面的步驟，那麼你可能會建立出一個新的頁面，可是顯示的效果會是這樣：

怎麼icon沒有換？？？其實hexo中換icon是一個很簡單的事情，由於hexo集成了FontAwsome 因此咱們只須要在主題的配置文件中加入相應的icon名字便可

查找`FontAwsome` icon

這時候你想要換一個本身喜歡的icon怎麼辦，這就須要本身動手，豐衣足食了，你須要本身到FontAwsome官網，而後鼠標往下拉，在圖標集中選擇本身喜歡的icon，而後記住名字，保存在上面的menu_icon字段中就能夠啦~
tips ：在字段中只須要填寫icon-name後面跟的name便可，不須要加上前面的"icon-"

在language添加zh-hans翻譯字段

上面的步驟完成以後你會發現，在你的博客首頁顯示的仍然是英文名，而咱們想要有一箇中文的名字，而且想要個性化定製咱們的頁面，咱們能夠在主題的language文件下的zh-hans（中文）語言包下增長相應的字段（作過翻譯的童鞋應該都知道什麼意思~）還能夠修改其餘的字段，這樣就能夠定製咱們的博客了呢~

在發表文章的時候添加對應的menu字段

在咱們寫文章的時候只要在頭部信息添加相應的字段就在tags頁面和categories中顯示相應的分類，例如:

---
title: Git使用中的報錯狀況
date: 2017-03-11 23:54:11
tags: [git,實戰經驗] 
categories: git
---

tags、categories都是支持數組的形式的，能夠添加多個tags、categories。這樣咱們在tags、categories頁面就能夠看見相應的分類了

添加頭像

我使用的主題頭像是位於側邊欄，顯示的效果以下，
要添加一個這個的頭像要怎麼操做呢，其實思路就是將你要上傳的頭像放在你的文件夾中，而後再配置文件中引用正確的路徑便可，固然也能夠上傳絕對路徑。在你的主題配置文件找到avatar字段，而後將你得圖片路徑寫在後面，我是新建了一個uploads文件夾，將圖片放在下面

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: /uploads/avatar.png

設置網站logo

跟設置頭像實際上是一個思路，都是在配置文件中引入正確的地址就能夠了，不過網站的logo是對圖片有要求的，咱們須要在Favicon在線製做工具中製做32*32的.ico圖片，而後放在source/images下面。而後在主題配置文件下添加主題配置文件中添加：favicon: images/favicon.ico

自定義樣式

不得不說next仍是很人性化的，你能夠個性化定製你的網站，你全部的改動（css）須要放在主題文件的source/css/_costum/costum.styl文件中，會覆蓋原來的css，因此只要你不想要你修改的樣式，只須要刪除這個文件夾就能夠了，不再用擔憂還原不回去了~

炫酷動態背景

以前作過一個相似的canvas-nest的效果。新版本的next已經支持canvas-nest了，可是效果不怎麼樣，就不用了，可是也介紹一下，畢竟簡單，只有兩步就能夠了。
添加修改代碼next\layout\_layout.swig在</body>以前加上

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打開next\_config.yml，添加如下代碼就能夠了：

# Canvas-nest
canvas_nest: true

這種雖然簡單，可是我認爲效果不夠好，因而我決定添加原生的js來仿知乎的登陸界面作背景，這就須要修改模板來實現了。只要咱們知道了next文件的結構，咱們想改什麼只須要找到對應的位置就好（在前言中有next的目錄結構）~

因此咱們須要在layout下面的_layout.swig 添加一個canvas

<div class="bg_content">
    <canvas id="canvas"></canvas>
</div>

而後使用原生js寫一個仿知乎頁面

<script>
class Circle {
    //建立對象
    //以一個圓爲對象
    //設置隨機的 x，y座標，r半徑，_mx，_my移動的距離
    //this.r是建立圓的半徑，參數越大半徑越大
    //this._mx,this._my是移動的距離，參數越大移動
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.r = Math.random() * 10 ;
        this._mx = Math.random() ;
        this._my = Math.random() ;

    }

    //canvas 畫圓和畫直線
    //畫圓就是正常的用canvas畫一個圓
    //畫直線是兩個圓連線，爲了不直線過多，給圓圈距離設置了一個值，距離很遠的圓圈，就不作連線處理
    drawCircle(ctx) {
        ctx.beginPath();
        //arc() 方法使用一箇中心點和半徑，爲一個畫布的當前子路徑添加一條弧。
        ctx.arc(this.x, this.y, this.r, 0, 360)
        ctx.closePath();
        ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
        ctx.fill();
    }

    drawLine(ctx, _circle) {
        let dx = this.x - _circle.x;
        let dy = this.y - _circle.y;
        let d = Math.sqrt(dx * dx + dy * dy)
        if (d < 150) {
            ctx.beginPath();
            //開始一條路徑，移動到位置 this.x,this.y。建立到達位置 _circle.x,_circle.y 的一條線：
            ctx.moveTo(this.x, this.y);   //起始點
            ctx.lineTo(_circle.x, _circle.y);   //終點
            ctx.closePath();
            ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
            ctx.stroke();
        }
    }

    // 圓圈移動
    // 圓圈移動的距離必須在屏幕範圍內
    move(w, h) {
        this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
        this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
        this.x += this._mx / 2;
        this.y += this._my / 2;
    }
}
//鼠標點畫圓閃爍變更
class currentCirle extends Circle {
    constructor(x, y) {
        super(x, y)
    }

    drawCircle(ctx) {
        ctx.beginPath();
        //註釋內容爲鼠標焦點的地方圓圈半徑變化
        //this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
        this.r = 8;
        ctx.arc(this.x, this.y, this.r, 0, 360);
        ctx.closePath();
        //ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
        ctx.fillStyle = 'rgba(255, 77, 54, 0.3)'
        ctx.fill();

    }
}
//更新頁面用requestAnimationFrame替代setTimeout
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width = canvas.offsetWidth;
let h = canvas.height = canvas.offsetHeight;
let circles = [];
let current_circle = new currentCirle(0, 0)

let draw = function () {
    ctx.clearRect(0, 0, w, h);
    for (let i = 0; i < circles.length; i++) {
        circles[i].move(w, h);
        circles[i].drawCircle(ctx);
        for (j = i + 1; j < circles.length; j++) {
            circles[i].drawLine(ctx, circles[j])
        }
    }
    if (current_circle.x) {
        current_circle.drawCircle(ctx);
        for (var k = 1; k < circles.length; k++) {
            current_circle.drawLine(ctx, circles[k])
        }
    }
    requestAnimationFrame(draw)
}

let init = function (num) {
    for (var i = 0; i < num; i++) {
        circles.push(new Circle(Math.random() * w, Math.random() * h));
    }
    draw();
}
window.addEventListener('load', init(60));
window.onmousemove = function (e) {
    e = e || window.event;
    current_circle.x = e.clientX;
    current_circle.y = e.clientY;
}
window.onmouseout = function () {
    current_circle.x = null;
    current_circle.y = null;

};
</script>

添加網易雲音樂

在知道了頁面的結構以後，你就能夠將你的播放器添加在頁面的任意位置，開始我是放在了首頁，而後發現一上來就自動播放太吵了，因而就放在了側邊欄，想要聽得朋友能夠手動點擊播放，
咱們能夠直接在網易雲音樂中搜索咱們想要插入的音樂，而後點擊生成外鏈播放器

而後能夠根據你得設置生成相應的html代碼，將得到的html代碼插入到你想要插入的位置便可

我放在了側邊欄，因此對應的修改layout\_macro\sidebar.swig 文件

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

而後就能夠在側邊欄看見個人播放器了~

網易雲跟帖

以前用的是多說，可是多說在2017年6月1日就關閉評論服務了= =，很憂傷，因而轉到了網易雲跟帖。因爲最新版（5.1）版本的next已經集成了網易雲跟帖，因此只須要在主題的設置文件中配置你的productKey就能夠了。獲取productKey也很簡單，在官網網易雲跟帖中註冊，而後在獲取代碼>通用代碼中拿到productKey，以後在你的主題配置文件中的gentie_productKey字段後添加便可~

添加Fork me on GitHub

去網址https://github.com/blog/273-g... 挑選本身喜歡的樣式，並複製代碼，添加到themesnextlayout_layout.swig的body標籤以內便可
記得把裏面的url換成本身的!

hexo-wordcount實現統計功能

wordcount能夠實現字數統計，閱讀時常還有總字數的統計功能
只須要npm install hexo-wordcount --save 就能夠安裝wordcount插件，
主要功能
字數統計:WordCount
閱讀時長預計:Min2Read
總字數統計: TotalCount
安裝完插件以後在主題的配置文件中開啓該功能就能夠~

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

leancloud閱讀次數統計

next也集成了leancloud，在leancloud官網
中註冊帳號等一步一步的操做就不說了哈~，咱們主要是爲了拿到app_key和app_id,而後在主題配置文件作一下配置

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: yourapp_id
  app_key: yourapp_key

而後再leancloud的控制檯中的存儲添加一個counter的class就能夠檢測到咱們的瀏覽量了，同時在你文章的副標題也能夠看到有閱讀次數的顯示

我的網站地址：http://cherryblog.site/，順便求個fork

附錄1：站點配置文件

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site   站點信息
title: Cherry's Blog    #站點名字
subtitle: To Be a Batter Me  #副標題
description: 作更好的本身   #站點描述，在側邊欄顯示
author: Cherry   #博主名字
email: 991939332@qq.com #聯繫郵箱
language: zh-Hans   #使用的語言包，語言包在主題文件的language文件夾下，能夠更改網站顯示出的文案
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true  #新建一個頁面後自動生成一個同名文件夾（默認爲false）
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/sunshine940326/sunshine940326.github.io.git
  #repository: ssh://git@github.com/sunshine940326/sunshine940326.github.io