hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你本身的定製化博客
前言
本篇文章是在已經搭建好gitpage+hexo的博客的前提下（不懂怎麼搭建的能夠參考個人另外一篇博文：瞭解githubPages+hexo搭建博客的原理 或者利用Gitpage+hexo開發本身的博客，這兩篇博文都比較詳細的教你們最基礎的怎麼將博客搭建起來。本篇博文是使用next主題的進擊版本，主要是有如下內容javascript
- 域名綁定，將github博客和你的獨有域名綁定
- 添加更多的menu內容
- 添加頭像
- 定義網站個性logo
- 自定義樣式，重寫默認樣式，個性化定製你的博客
- 炫酷動態背景製做
- 添加網易雲音樂
- 添加網易雲跟帖
- 添加leancloud閱讀次數統計功能
- 添加wordcount頁面字數統計
- 添加fork me on github功能
要想最快的知道這些功能的效果，請移步個人我的博客：www.cherryblog.site/ ，順便求個fork，大爺們看過能夠評論一下，試一下新加上的網易雲跟帖效果怎麼樣ヽ(●´ε｀●)ノ
首先要說一下我使用的版本，這個是很重要的，個人博客最早建立於2016年的9月份，距離如今已經有大半年了，因此好多版本都已經進行了更新，特別是next主題集成了更多的插件，簡直不要太爽＼（＠￣∇￣＠）／css
hexo v3.2.2
next v5.1.0
node v4.5.0html
在改爲本身想要的效果以後，對總體的hexo的next主題我有了一個大概的瞭解，其實next主題的最新版（5.1）已經集成了大部分咱們須要的插件，只須要在主題配置文件中將默認的false改成true便可，可是咱們也仍然須要知道都有哪些新的功能，最有效的方法是直接去查看官網的api：next官網java
授之於魚不如授之於漁
但願咱們都可以理解其源碼，製做出屬於本身專屬的個性化博客(•̀ᴗ•́)node
咱們須要改的文件其實也就那麼幾個，大部分是不須要更改，next都已經幫咱們配置好了~
默認目錄結構：git
.
├── .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和甚至是修改模板，
頁面展示的所有邏輯都在每一個主題中控制，源代碼在hexo\themes\你使用的主題\中，以next主題爲例：es6
├── .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的都知道複製代碼
綁定域名
綁定域名的思路以下：github
- 在萬網購買本身喜歡的域名（.com的會貴一點，.site和.xyz的相對便宜一些，有的只須要幾塊錢一年就能夠）
- 解析DNS
- 在hexo中添加CNAME文件
購買域名
以前沒有買域名的時候我想使用網易雲跟帖，發如今註冊網易雲跟帖的時候使用原來的域名提示「url已被使用」，這是由於網易雲跟帖不承認二級域名，因此要本身買域名。
我選擇的是萬網，阿里下面的。我選擇了一個.site的域名，原價8元，使用阿里雲app支付還優惠5元，等於3元到手一個域名（一年）~
按照官網的步驟一步一來就能夠了~web
解析DNS
購買完域名以後咱們須要解析DNS地址，在管理控制檯中的左側有域名選項，而後找到你的域名，點擊後面的「解析」
express
點擊添加解析，記錄類型選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索引路徑（根路徑是hexo\source,因此你若是想要更改頁面的內容就去hexo\source下找到對應的文件夾，默認內容是在其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文件= =，回來研究一下( 2017.5.8更新，直接使用html文件只需在文件最頂部加上layout:false)
給menu添加icon
若是隻是上面的步驟，那麼你可能會建立出一個新的頁面，可是顯示的效果會是這樣：
怎麼icon沒有換？？？其實hexo中換icon是一個很簡單的事情，由於hexo集成了FontAwsome 因此咱們只須要在主題的配置文件中加入相應的icon名字便可
查找FontAwsome icon
這時候你想要換一個本身喜歡的icon怎麼辦，這就須要本身動手，豐衣足食了，你須要本身到FontAwsome官網，而後鼠標往下拉，在圖標集中選擇本身喜歡的icon，而後記住名字，保存在上面的menu_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頁面就能夠看見相應的分類了
添加頭像
我使用的主題頭像是位於側邊欄，顯示的效果以下，
# 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，因此只要你不想要你修改的樣式，只須要刪除這個文件夾就能夠了，不再用擔憂還原不回去了~
炫酷動態背景
2017.5.8更新，具體過程往下看仿知乎動態背景
以前作過一個相似的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>複製代碼
仿知乎動態背景
2017.5.8更新，不少朋友都私信我說這個動態背景沒有效果，發現上面的js代碼是es6寫的，兼容性很差，而且中間也漏了一步添加css樣式的，致使好多顯示的不徹底，特此更新
完整步驟以下
1：首先在主題文件的layout中的_layout.swigC:\Hexo\themes\next\layout\_layout.swig中加入
<div class="bg_content">
<canvas id="canvas"></canvas>
</div>
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Circle = function () {
function Circle(x, y) {
_classCallCheck(this, Circle);
this.x = x;
this.y = y;
this.r = Math.random() * 10;
this._mx = Math.random();
this._my = Math.random();
}
_createClass(Circle, [{
key: 'drawCircle',
value: function 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();
}
}, {
key: 'drawLine',
value: function drawLine(ctx, _circle) {
var dx = this.x - _circle.x;
var dy = this.y - _circle.y;
var d = Math.sqrt(dx * dx + dy * dy);
if (d < 150) {
ctx.beginPath();
ctx.moveTo(this.x, this.y); //起始點
ctx.lineTo(_circle.x, _circle.y); //終點
ctx.closePath();
ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
ctx.stroke();
}
}
}, {
key: 'move',
value: function 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;
}
}]);
return Circle;
}();
var currentCirle = function (_Circle) {
_inherits(currentCirle, _Circle);
function currentCirle(x, y) {
_classCallCheck(this, currentCirle);
return _possibleConstructorReturn(this, (currentCirle.__proto__ || Object.getPrototypeOf(currentCirle)).call(this, x, y));
}
_createClass(currentCirle, [{
key: 'drawCircle',
value: function 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.6)';
ctx.fill();
}
}]);
return currentCirle;
}(Circle);
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = canvas.offsetWidth;
var h = canvas.height = canvas.offsetHeight;
var circles = [];
var current_circle = new currentCirle(0, 0);
var draw = function draw() {
ctx.clearRect(0, 0, w, h);
for (var 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);
};
var init = function init(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;
};複製代碼
2：在主題文件的C:\Hexo\themes\next\source\css\_custom\custom.styl文件中加上css代碼
/*設置背景*/
.bg_content{
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}
#canvas{
width: 100%;
height:100%;
}
/*將頭部背景變爲透明*/
.header{
background: transparent ;
}複製代碼
添加網易雲音樂
在知道了頁面的結構以後，你就能夠將你的播放器添加在頁面的任意位置，開始我是放在了首頁，而後發現一上來就自動播放太吵了，因而就放在了側邊欄，想要聽得朋友能夠手動點擊播放，
咱們能夠直接在網易雲音樂中搜索咱們想要插入的音樂，而後點擊生成外鏈播放器
而後能夠根據你得設置生成相應的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
去網址github.com/blog/273-gi… 挑選本身喜歡的樣式，並複製代碼，添加到themes\next\layout_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就能夠檢測到咱們的瀏覽量了，同時在你文章的副標題也能夠看到有閱讀次數的顯示
我的網站地址：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複製代碼
- 1. hexo+next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景
- 2. hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你本身的定製化博客...
- 3. hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你本身的定製化博客
- 4. hexo的next主題個性化教程 打造炫酷網站
- 5. hexo的next主題個性化教程:打造炫酷網站
- 6. hexo的next主題個性化教程：打造炫酷網站
- 7. 【Hexo搭建個人博客】（九）Hexo+Next添加網易雲音樂
- 8. Hexo | NexT打造一個炫酷博客
- 9. Hexo+NexT-打造一個炫酷博客
- 10. 給hexo博客next主題添加背景音樂
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • Web 語義化 - 網站建設指南
- • Git可視化極簡易教程 — Git GUI使用方法
- • RxJava操作符（十）自定義操作符
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. hexo+next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景
- 2. hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你本身的定製化博客...
- 3. hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你本身的定製化博客
- 4. hexo的next主題個性化教程 打造炫酷網站
- 5. hexo的next主題個性化教程:打造炫酷網站
- 6. hexo的next主題個性化教程：打造炫酷網站
- 7. 【Hexo搭建個人博客】（九）Hexo+Next添加網易雲音樂
- 8. Hexo | NexT打造一個炫酷博客
- 9. Hexo+NexT-打造一個炫酷博客
- 10. 給hexo博客next主題添加背景音樂