如何搭建 Hexo + next 主題這些隨便一搜大把教程。這篇文章主要是對網站樣式進一步配置！
以下內容均有實現在我個人的博客上：我個人博客網站
1.設置網頁布局
打開主題配置文件（/HexoRoot/theme/next/_config.yml），找到scheme:字眼，設置你喜愛的網頁布局
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
2.主頁顯示頭像
找到主題配置文件（/HexoRoot/theme/next/_config.yml）的 avatar:那一行，填上頭像的相對路徑或絕對路徑。注意：如果是本地的圖片，需要放在/HexoRoot/theme/next/source/images目錄下
如：avatar: /images/cat.png
3.顯示社交連接
找到主題配置文件（/HexoRoot/theme/next/_config.yml）的social:那一行，需要顯示的社交將注釋取消就可以啦！
social:
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope
4.設置背景圖片
背景圖片放在/HexoRoot/theme/next/source/images目錄下，然后在 HexoRoot/theme/next/source/css/_custom目錄下，打開custom.styl文件，在文件的最上方加上一代碼
body { background:url(/images/backGround.jpg);}
保存后刷新網頁就可以啦~
5.博客后臺管理平臺——hexo-admin
在Hexo根目錄下執行npm install --save hexo-admin命令，然后重啟Hexo服務后，打開http://你的ip地址/admin
最重要的是設置用戶密碼，因為你不設置密碼的話，你的博客網站就有可能被別人惡意新增修改文章，所以記得設置一個不容易被別人破解的密碼。
將復制的內容添加到Hexo根目錄的配置文件_config.yml中，然后再刷新博客后臺就需要輸入密碼啦！
6.在右上角或左上角添加 Fork me on Github
在/HexoRoot/themes/next/layout/_layout.swig文件中，找到<div class="headband"></div>這一行，然后添加以下代碼，保存后刷新網頁就可以達到效果啦！
根據你個人的需要，可以設置位置和顏色，詳情請看 https://github.blog/2008-12-19-github-ribbons/
以下是我個人博客的設置，設置到右上角
<a >
<img width="149" height="149"
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
</a>
7.主頁文章添加陰影效果
打開/HexoRoot/themes/next/source/css/_custom/custom.styl，向里面加入：
// 主頁文章添加陰影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
8.底部加上訪問量
在/HexoRoot/themes/next/layout/_partials/footer.swig文件尾部加上：
<div class="powered-by">
<script async src="http://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<i class="fa fa-user-md"></i>
<span id="busuanzi_container_site_uv">
本站訪客數:<span id="busuanzi_value_site_uv"></span>
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_pv">
本站訪問量<span id="busuanzi_value_site_pv"></span>
</span>
</div>
9.網站底部字數統計
在博客根目錄下執行$ 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>
10.添加加載條
在主題目錄下，執行 git clone https://github.com/theme-next/theme-next-pace source/lib/pace，然后在主題的配置文件中找到 pace: false這一行，并將false改為true，然后根據你個人喜愛設置pace_theme:加載進度的樣式。
以下是我個人的配置
pace: true #是否開啟進度條
pace_theme: pace-theme-loading-bar #選擇進度條樣式
打開/HexoRoot/themes/next/layout/_partials/head.swig文件，添加紅框上的代碼
<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link rel="stylesheet">
11.瀏覽頁面顯示當前瀏覽進度
打開 /themes/next_config.yml，搜索關鍵字 scrollpercent，把 false 改為 true
12.增加打賞功能
# Reward
reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！
wechatpay: /images/wechat_pay.jpg
alipay: /images/ali_pay.jpg
13.修改打賞字體不閃動
修改文件/HexoRoot/theme/next/source/css/_common/components/post/post-reward.styl，然后注釋其中的函數wechat:hover和alipay:hover
/* 注釋文字閃動函數
if (hexo-config('reward_settings.animation')) {
> div:hover p {
animation: roll .1s infinite linear;
}
@keyframes roll {
from {
transform: rotateZ(30deg);
}
to {
transform: rotateZ(-30deg);
}
}
}
*/
14.搜索功能
在站點的根目錄下執行npm install hexo-generator-searchdb --save命令
打開站點配置文件 /HexoRoot/_config.yml
search:
path: search.xml
field: post
format: html
limit: 10000
打開主題配置文件 /HexoRoot/theme/next/_config.yml
# Local search
local_search:
enable: true
15.評論功能
常見使用的評論系統有：
來必力：（需要郵箱注冊，加載慢，較卡頓）
暢言：（安裝需要備案號）
Gitment：（加載慢，有Bug）
Valine: (簡約，實用，使用Leancloud作為線上數據庫）
綜上所訴，我使用 Valine 作為我個人博客網站的評論系統。
詳細的配置流程，可參考使用 Valine 添加評論功能
16.分頁顯示異常
修改的位置themes\next\layout\_partials\pagination.swig覆蓋為以下的內容：
{% if page.prev or page.next %}
<nav class="pagination">
{{
paginator({
prev_text: '<',
next_text: '>',
mid_size: 1
})
}}
</nav>
{% endif %}
如果覺得文章不錯的話，麻煩點個贊哈！對于文章有哪里不清楚或者有誤的地方，歡迎在評論區留言~
