小序

博客搭建，可以參考博文 個人博客-GitHub-Pages
Hexo的配置文件_config.yml分兩種：站點配置文件、主題配置文件。站點配置文件參考Hexo，主題配置文件參考NexT
本文主要講解主題配置文件_config.yml（文件路徑：hexo目錄\themes\next\_config.yml）
GitHub hexo-theme-next

Site Information Settings

設(shè)置站點信息
favicon:修改網(wǎng)站圖標，圖片保存在目錄\themes\next\source\images中。
footer:站點底部
since:2018站點創(chuàng)建時間
creative_commons:文章底部添加版權(quán)信息

Menu Settings

1. 菜單項（名稱和鏈接）
2. 菜單項的顯示文本
3. 菜單項對應(yīng)的圖標。NexT使用的是Font Awesome提供的圖標，F(xiàn)ont Awesome提供了600+的圖標，可以滿足絕大多數(shù)的場景。

注意：菜單點擊可能報Cannot GET **，創(chuàng)建page就可以了，命令如下：

// name為categories、tags、about等，文件存儲路徑為：root\source
hexo new page 'name'

在source目錄下會生成菜單對應(yīng)文件夾，修改文件夾中的index.md文件，新增type屬性，如下：

---
title: 分類
date: 2018-12-16 17:03:04
type: "categories"
---

Scheme Settings

Scheme是NexT提供的一種特性，可以設(shè)置不同的外觀。同時，幾乎所有的配置都可以在Scheme之間共用。目前NexT支持以下幾種Scheme:

1. Muse-默認Scheme，NexT最初的版本，黑白色調(diào)，大量留白
2. Mist-Muse的緊湊版本，整潔有序的單欄外觀
3. Pisces-雙欄Scheme，小家碧玉似的清新
4. Gemini-左側(cè)網(wǎng)站信息及目錄，塊+片段結(jié)構(gòu)布局

Sidebar Settings設(shè)置側(cè)欄

1. sidebar:側(cè)欄的位置
2. sidebar:側(cè)欄顯示的時機
3. avatar:頭像
4. social:社交鏈接 github_banner:（網(wǎng)站右上角顯示關(guān)注GitHub圖標）
5. Blog rolls友情鏈接
6. toc:文章目錄

Post Settings

1. reward:打賞
2. wechat_subscriber:微信訂閱

Third Party Services Settings

local_search:網(wǎng)站添加搜索

needmoreshare2:內(nèi)容分享

1. 在博客根目錄執(zhí)行如下命令：

git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton

2. 主題配置文件中，搜索needmoreshare2:

評論系統(tǒng)

1. 暢言 官網(wǎng)

# changyan
changyan:
  enable: false
  appid:
  appkey:

2. Valine 官網(wǎng)

DaoVoice

修改文章內(nèi)鏈接樣式

在文件\themes\next\source\css\_common\components\post\post.styl末尾，添加如下代碼：

// 文章內(nèi)鏈接文本樣式
.post-body p a{
  color: #0593d3; //原始鏈接顏色
  border-bottom: none;
  border-bottom: 1px solid #0593d3; //底部分割線顏色
  &:hover {
    color: #fc6423; //鼠標經(jīng)過顏色
    border-bottom: none;
    border-bottom: 1px solid #fc6423; //底部分割線顏色
  }
}

修改文章底部帶#的標簽

實現(xiàn)效果圖：

[圖片上傳失敗...(image-321b05-1566118603859)]

\themes\next\layout_macro\post.swig中找到rel="tag">#，將#替換為

<i class="fa fa-tag"></i>

文章末尾添加結(jié)束標語

實現(xiàn)效果圖：

[圖片上傳失敗...(image-42414c-1566118603859)]

• \themes\next\layout_macro中新建passage-end-tag.swig文件，添加如下代碼：

<div>
  {% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結(jié)束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
  {% endif %}
</div>

• 打開\themes\next\layout_macro\post.swig文件，在post-body后，post-footer前，添加如下代碼：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

• 修改主題配置文件_config.yml，末尾添加如下內(nèi)容：

# 文章末尾添加“本文結(jié)束”標記
passage_end_tag:
  enabled: true

網(wǎng)站底部添加總訪客量、總訪問量

方法一：

打開\themes\next\layout_partials\footer.swig文件，在copyright之前添加如下代碼：

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

單個用戶連續(xù)點擊n篇文章，記錄n次訪問量。

<span id="busuanzi_container_site_pv">
  總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>

單個用戶連續(xù)點擊n篇文章，只記錄1次訪客數(shù)。

<span id="busuanzi_container_site_uv">
  總訪客數(shù)<span id="busuanzi_value_site_uv"></span>人次
</span>

方法二：
主題配置文件_config.yml，搜索
busuanzi_count:
注：本地預(yù)覽時，數(shù)字存在異常，部署云端即可恢復(fù)正常。

網(wǎng)站底部添加字數(shù)統(tǒng)計

npm install hexo-wordcount --save
打開文件\themes\next\layout_partials\footer.swig，末尾加上如下代碼：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">全站共{{ totalcount(site) }}字</span>
</div>

點擊出現(xiàn)愛心效果

1. 在目錄\themes\next\source\js\src中新建文件love.js，添加如下代碼：

!function (e, t, a) { function n() { c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() } function r() { for (var e = 0; e < d.length; e++)d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document);

2. 打開文件\themes\next\layout_layout.swig，末尾加上如下代碼：

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

添加網(wǎng)易云音樂

\themes\next\layout_macro\sidebar.swig
[圖片上傳失敗...(image-c8d50d-1566118603859)]
[圖片上傳失敗...(image-884f68-1566118603859)]

設(shè)置背景圖片

圖片來源：https://source.unsplash.com
打開文件themes\next\source\css_custom\custom.styl，添加如下代碼：

body {
    background:url(https://source.unsplash.com/1600x900/daily?nature,water);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

添加依賴

在目錄\themes\next下，開啟Git Bash，執(zhí)行命令。

設(shè)置動態(tài)背景

canvas_nest:

git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

站點頂部進度條

pace:

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

參考

https://theme-next.org/