版本信息：Hexo-4.2、NexT-7.7.2（注意：文中提到的“主題的配置文件_config.yml”昏滴，在\hexo\source_data\next.yml里修改）
1. 獲取 NexT
1.1. 下載最新 release 版本
通常情況下請選擇 stable 版本。推薦不熟悉的用戶按此方式進行是趴。
<!-- more -->
這種方式將僅提供最新的 release 版本（其中不附帶 .git 目錄）。因此澄惊，你無法通過 git 更新這一方式安裝的主題唆途。
更新：推薦使用獨立的配置文件（數據文件）而不在主題源代碼進行更改，便于后續(xù)的更新（下載最新版本掸驱，替換掉舊版本）肛搬。
2. 站點配置
2.1. 設置 hexo 的 next 主題
我們在站點的配置文件_config.yml中找到 theme 后修改：theme: next? # 配置成剛下載的next主題
2.2. 配置 hexo 網站相關信息
# Site
title: ? ? ? ?? # 網站標題
subtitle: ? ? ? # 網站副標題
description: ?? # 描述，介紹網站的
keywords: ? ? ? # 網站的關鍵字
author: ? ? ? ? # 博主姓名
language: zh-CN # 語言：zh-CN 是簡體中文
timezone: UTC ? # 時區(qū)
2.3. 設置 hexo 永久鏈接
地址：hexo-abbrlink安裝插件：npm install hexo-abbrlink --save然后我們可以在站點配置文件_config.yml 中修改為：
url: https://bore.vip/
root: /
permalink: archives/:abbrlink.html
abbrlink:
? alg: crc32? # 算法：crc16(default) and crc32
? rep: hex ?? # 進制：dec(default) and hex
permalink_defaults:
2.4. nofollow 標簽的使用
減少出站鏈接能夠有效防止權重分散毕贼，hexo 有很方便的自動為出站鏈接添加 nofollow 標簽的插件温赔。首先安裝 hexo-filter-nofollow 插件：npm install hexo-filter-nofollow --save然后我們在站點的配置文件_config.yml 中添加配置，將 nofollow 設置為 true：
# 外部鏈接優(yōu)化
nofollow:
? enable: true
? field: site
? exclude:
?? - 'exclude1.com'
?? - 'exclude2.com'
其中 exclude（例外的鏈接帅刀，比如友鏈）將不會被加上 nofollow 屬性让腹。
2.5. 站點地圖 sitemap 生成
npm install hexo-generator-sitemap --save然后我們需要在 Hexo 站點配置文件中加入 sitemap 插件：
# 通用站點地圖
sitemap:
? path: sitemap.xml
2.6. 修改網站的圖標 Favicon
把圖標放在 /themes/next/source/images 里，并且修改 主題配置文件（next.yml）：
favicon:
? small: /images/favicon-16x16-next.png
? medium: /images/favicon-32x32-next.png
? apple_touch_icon: /images/favicon-32x32-next.png
? safari_pinned_tab: /images/favicon-32x32-next.png
? #android_manifest: /images/manifest.json
? #ms_browserconfig: /images/browserconfig.xml
3. 主題配置
3.1 準備工作扣溺，配置文件分離
Next主題在7.3之后分離了配置文件與主題骇窍，詳情請見小丁的個人博客
新建文件夾hexo/source/_data
將./themes/next/_config.yml復制到hexo/source/_data路徑下并重命名為next.yml
將next.yml中的override設置為true即可作為主題的配置文件使用
override: true
在hexo/source/_data中新建body-end.swig和styles.styl文件
然后在next.yml的custom_file_path中刪除前面的#來啟用bodyEnd和style
custom_file_path中的其他選項根據需要創(chuàng)建相關文件并啟用
3.2. 指定next-Gemini模板
主題配置文件（next.yml），關鍵字：Schemes,修改
#scheme: Muse
#scheme: Mist
#scheme: Pisces? #打開前面的注釋
scheme: Gemini
Muse - 默認 Scheme锥余，這是 NexT 最初的版本腹纳，黑白主調，大量留白
Mist - Muse 的緊湊版本驱犹，整潔有序的單欄外觀
Pisces - 雙欄 Scheme嘲恍，小家碧玉似的清新
Gemini - 左側網站信息及目錄，塊+片段結構布局
3.3. 配置 hexo 中的 about雄驹、tag佃牛、categories、sitemap 菜單
默認的主題配置文件_config.yml（next.yml） 中医舆，菜單只開啟了首頁和歸檔俘侠，我們根據需要，可以添加 about蔬将、tag爷速、categories、sitemap 等菜單霞怀，所以把它們也取消注釋惫东。
# 菜單設置為 菜單名: /菜單目錄 || 菜單圖標名字
menu:
? home: / || home
? about: /about/ || user
? tags: /tags/ || tags
? categories: /categories/ || th
? archives: /archives/ || archive
? #schedule: /schedule/ || calendar
? sitemap: /sitemap.xml || sitemap
? commonweal: /404/ || heartbeat
?
menu_settings:
? icons: true ? # 顯示圖標
? badges: true? # 顯示統(tǒng)計信息
注：hexo 所有圖標均來自 fontawesome，其中 || 后面是你想要設置的圖標的名字毙石。菜單項的中文文本翻譯見菜單中文翻譯
3.4. 手動生成 hexo 菜單對應文件
3.4.1. 新建 about 頁面
我們可以在博客根目錄下輸入以下命令新建頁面：hexo new page about然后你會發(fā)現多了一個 hexo/source/about 文件夾廉沮，里面有一個 index.md 文件，你可以根據自己的需要在這個 Markdown 文件中寫一些內容（同文章一樣徐矩，用 Markdown 語法）废封。
3.4.2. 新建一個 tags 頁面
同樣的，我們可以新建 tags 頁面：hexo new page tags在 tags 頁面文件 hexo/source/tags/index.md 的頭部修改為：
---
title: 標簽
date: 2020-04-26 00:13:30 ? # 時間隨意
type: "tags" ? ? ? ? ? ? ?? # 類型一定要為tags
comments: false ? ? ? ? ? ? # 提示這個頁面不需要加載評論
---
3.4.3 新建一個 categories 頁面
同樣的丧蘸，我們可以新建 categories 頁面：hexo new page categories在 categories 頁面文件 hexo/source/categories/index.md 的頭部修改為：
---
title: 文章分類
date: 2020-04-26 00:15:00
type: "categories"
comments: false
---
3.4.4. 新建一個 404 頁面
這里我們將 404 替換成騰訊的公益頁面漂洋。首先我們在 hexo/source 目錄下創(chuàng)建自己的 404.html：
<!DOCTYPE html>
<html lang="en">
?? <head>
? ? ?? <meta charset="UTF-8">
? ? ?? <title>404</title>
?? </head>
?? <body>
? ? ?? <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script>
?? </body>
</html>
注意：Hexo 博客的基本內容是一些 Markdown 文件，放在 source/_post 文件夾下力喷，每個文件對應一篇文章刽漂。除此之外，放在 source 文件夾下的所有開頭不是下劃線的文件弟孟，在 hexo generate 的時候贝咙，都會被拷貝到 public 文件夾下。但是拂募，Hexo 默認會渲染所有的 HTML 和 Markdown 文件庭猩。
因此我們可以簡單地在文件開頭加上 layout: false 一行來避免渲染：
layout: false
<!DOCTYPE html>
<html lang="en">
?? <head>
? ? ?? <meta charset="UTF-8">
? ? ?? <title>404</title>
?? </head>
?? <body>
? ? ?? <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script>
?? </body>
</html>
這樣我們就完成了 404 頁面的創(chuàng)建窟她。注意：本地測試不出來，發(fā)布出來就### 配置 hexo 本地搜索可以了蔼水。
3.5. 配置 hexo 本地搜索
3.5.1. 本地搜索的原理
對于動態(tài)網站來說震糖，可以通過 php 實現。但是趴腋，Hexo 博客是靜態(tài)網站吊说，用不了 php。NexT 主題已經實現這個功能优炬，它用了 Hexo 的拓展包 hexo-generator-searchdb颁井，預先生成了一個文本庫 search.xml，然后傳到了網站里面蠢护。在本地搜索的時候雅宾，NexT 直接用 javascript 調用了這個文件，從而實現了靜態(tài)網站的本地搜索葵硕。
3.5.2. 設置過程
安裝插件:npm install hexo-generator-searchdb --save然后我們修改站點配置_config.yml 文件秀又，添加如下內容：
# 本地搜索
search:
? path: search.xml
? field: post
? format: html
? limit: 100
path：索引文件的路徑，相對于站點根目錄field：搜索范圍贬芥，默認是 post吐辙，還可以選擇 page、all蘸劈，設置成 all 表示搜索所有頁面limit：限制搜索的條目數然后修改主題配置文件_config.yml（next.yml）：
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
? enable: true
? # If auto, trigger search by changing input.
? # If manual, trigger search by pressing enter key or search button.
? trigger: auto
? # Show top n results per article, show all results by setting to -1
? top_n_per_article: 1
? # Unescape html strings to the readable one.
? unescape: false
? # Preload the search data when the page loads.
? preload: false
3.6. valine 評論
3.6.1. 獲取 APP id 和 APP key
注意右上角選擇國際版昏苏。
你可以點擊 LeanCloud ，注冊登錄威沫，進入控制臺后點擊創(chuàng)建應用贤惯。
進入剛剛創(chuàng)建的應用，選擇設置 》應用Keys棒掠，就能看到你的 APP ID 和 APP Key
3.6.2. 修改主題配置文件
注意guest_info這一欄孵构，刪除link，評論框就沒有網址選項烟很。
# Valine
# You can get your appid and appkey from https://leancloud.cn
# For more information: https://valine.js.org, https://github.com/xCss/Valine
# 配置項詳情請查閱官方文檔颈墅。
valine:
? enable: true # 開啟評論功能
? appid:? # 填入剛剛獲取的APP ID
? appkey: # 填入剛剛獲取的APP key
? notify: false # 郵件通知默認關閉
? verify: false # 驗證碼默認關閉
? placeholder: 在這里寫下你的評論吧！ # 評論框默認文字
? avatar: mm # 頭像風格
? guest_info: nick,mail #,link # Custom comment header
? pageSize: 10 # Pagination size
? language: # Language, available values: en, zh-cn
? visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
? comment_count: false # If false, comment count will only be displayed in post page, not in home page
? recordIP: false # 是否記錄IP
? serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
? #post_meta_order: 0
3.6.3. valine評論標題改中文中文? ? ? ?
打開themes -> next -> languages -> zh-CN.yml
# 在post標簽下添加如下代碼
comments:
?? valine: 評論數 # 這里的中文隨便自己定義
3.7. 設置 hexo 中的 rss 訂閱
? 沒人用雾袱，不推薦
3.8. 配置 hexo 主題next.yml的 footer 信息
底部 footer 可以開關顯示 hexo 信息恤筛、theme 信息、建站時間等個性化配置：?
footer:
? since: 2020 ? ? ?? # 建站開始時間
? icon:
?? name: user ? ? ? # 設置 建站初始時間和至今時間中間的圖標芹橡，默認是一個'小人像'毒坛，更改user為heart可以變成一個心
?? animated: true
?? color: "#808080" # 更改圖標的顏色，紅色為'#ff0000'
? powered:
?? enable: true ? ? # 開啟hexo驅動
?? version: true ?? # 開啟hexo版本號
? theme:
?? enable: true ? ? # 開啟主題驅動
?? version: true ?? # 開啟主題版本號
? custom_text: Hosted by <a target="_blank" rel="external nofollow" ><b>Coding Pages</b></a> # 這里的底部標識是為了添加coding page服務時的版權聲明 打開注釋就可以看到底部有一個 hosted by coding pages
3.9. 頭像信息設置 next.yml
avatar:
? url: /images/avatar.jpg? # 設置頭像資源的位置
? rounded: true? ? ? ? ? ? # 開啟圓形頭像
? opacity: 1? ? ? ? ? ? ? # 不透明的比例：0就是完全透明
? rotated: false? ? ? ? ? # 不開啟旋轉
3.10. 社交信息和友鏈配置
這里和菜單設置格式一樣，社交名字: 社交url || 社交圖標煎殷，圖標信息來自 fontawesome：
social:
? GitHub: https://github.com/yourname || github
? E-Mail: mailto:yourname@gmail.com || envelope
? Google: https://plus.google.com/yourname || google
social_icons:
? enable: true? ? ? # 顯示社交圖標
? icons_only: false # 只顯示圖標屯伞，不顯示文字
友鏈配置：
# Blog rolls
links_icon: link? ? ? ? ? # 友鏈的圖標 參考上文
links_title: Links? ? ? ? # 友鏈的title? 比如你可以更改為 友情鏈接
links_layout: block? ? ? # 友鏈擺放的樣式：按塊（一行一個）
#links_layout: inline? ? # 友鏈擺放的樣式：按線擺放（一行很多個），注意豪直，同時只能一種樣式
links:
? Title: http://example.com/? # 友鏈的地址
官方提供的友鏈放在側邊欄下面劣摇，視覺上比較臃腫。這里我新建了一個友鏈頁面：友情鏈接顶伞，設置教程見：Hexo-NexT 新增友鏈饵撑。
3.11. 首頁文章不展示全文顯示摘要
官方公告：auto_excerpt 可以自動截斷文章內容作為摘要剑梳。此功能不是一個 Hexo 主題應當負責的唆貌，這為主題的維護者帶來了太大壓力。自 7.6.0 版本開始垢乙，此功能被移除锨咙，請自行安裝第三方插件，或閱讀 Hexo 有關文檔追逮。當然酪刀，我們仍然建議通過 `` 來精確控制 Read More 的位置。
因此钮孵，這個功能在新版的 NexT 已經被廢棄了骂倘，大家可以直接在文章中添加 <!-- more --> 來精確控制摘要內容。
3.12. 首頁文章屬性next.yml
post_meta:
? item_text: false ?? # 設為true 可以一行顯示巴席，文章的所有屬性
? created_at: true ?? # 顯示創(chuàng)建時間
? updated_at:
?? enabled: true ? ? # 顯示修改的時間
?? another_day: true # 設true時历涝，如果創(chuàng)建時間和修改時間一樣則顯示一個時間
? categories: true ?? # 顯示分類信息
3.13. 頁面閱讀統(tǒng)計 不蒜子統(tǒng)計
busuanzi_count:
? enable: false ? ? ? ? ? ?? # 設true 開啟
? total_visitors: true ? ? ? # 總閱讀人數（uv數）
? total_visitors_icon: user? # 閱讀總人數的圖標
? total_views: true ? ? ? ?? # 總閱讀次數（pv數）
? total_views_icon: eye ? ?? # 閱讀總次數的圖標
? post_views: true ? ? ? ? ? # 開啟內容閱讀次數
? post_views_icon: eye ? ? ? # 內容頁閱讀數的圖標
3.14. 字數統(tǒng)計、閱讀時長
首先安裝插件：npm install hexo-symbols-count-time --save主題配置文件_config.yml（next.yml） 修改如下：
symbols_count_time:
? separated_meta: true? # false會顯示一行
? item_text_post: true? # 顯示屬性名稱,設為false后只顯示圖標和統(tǒng)計數字,不顯示屬性的文字
? item_text_total: true # 底部footer是否顯示字數統(tǒng)計屬性文字
? awl: 4 ? ? ? ? ? ? ?? # 計算字數的一個設置,沒設置過
? wpm: 275 ? ? ? ? ? ?? # 一分鐘閱讀的字數
站點配置文件_config.yml 新增如下：
symbols_count_time:
#文章內是否顯示
? symbols: true
? time: true
# 網頁底部是否顯示
? total_symbols: true
? total_time: true
3.15. 內容頁里的代碼塊新增復制按鈕
codeblock:
? copy_button:
?? enable: false ? ?? # 增加復制按鈕的開關
?? show_result: true # 點擊復制完后是否顯示 復制成功 結果提示
3.16. Mac風格代碼塊樣式
hexo\source_data\next.yml里修改：
codeblock:
? # Code Highlight theme
? # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
? # See: https://github.com/chriskempson/tomorrow-theme
? highlight_theme: normal
? # Add copy button on codeblock
? copy_button:
?? enable: true
?? # Show text copy result.
?? show_result: true
?? # Available values: default | flat | mac
?? style: mac
3.17. 配置微信漾唉，支付寶打賞
# Reward
reward_comment:? ? ? ? ? ? ? ? ? # 打賞描述
wechatpay: /images/wechatpay.png? # 微信支付的二維碼圖片地址
alipay: /images/alipay.png? ? ? ? # 支付寶的地址
#bitcoin: /images/bitcoin.png? ? # 比特幣地址
3.18. 相關文章推薦
安裝推薦文章的插件：npm install hexo-related-popular-posts --save主題配置信息（next.yml）如下:
related_posts:
? enable: true
? title: 相關文章推薦? ? ? # 屬性的命名
? display_in_home: false # false代表首頁不顯示
? params:
? ? maxCount: 5? ? ? ? ? # 最多5條
? ? #PPMixingRate: 0.0? # 相關度
? ? #isDate: true? ? ? ? # 是否顯示日期
? ? #isImage: false? ? ? # 是否顯示配圖
? ? isExcerpt: false? ? # 是否顯示摘要
3.19. 文章原創(chuàng)申明
creative_commons:
? license: by-nc-sa
? sidebar: false
? post: true? ? ? # 默認顯示版權信息
? language:
3.20. 修改文章底部標簽的樣式
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
# 標簽代替#
tag_icon: true
3.21. 顯示當前瀏覽進度next.yml
back2top:
? enable: false # 默認關閉
? # Back to top in sidebar.
? sidebar: true
? # Scroll percent label in b2t button.
? scrollpercent: true
3.22. 修改 back2top 標簽
插件新版本對next7.8支持不好荧库，圖標無法顯示 先卸載新版：npm uninstall hexo-cake-moon-menu --save安裝version 2.1.2：npm i hexo-cake-moon-menu@2.1.2然后在站點配置文件`_config.yml 中添加以下代碼：
moon_menu:
? back2top:
? ? enable: true
? ? icon: fa fa-chevron-up
? ? func: back2top
? ? order: -1
? back2bottom:
? ? enable: true
? ? icon: fa fa-chevron-down
? ? func: back2bottom
? ? order: -2
3.23. 菜單欄顯示分類 / 標簽中的文章數目
scheme選擇Gemini
menu_settings:
? badges: true # 顯示菜單分類的數目
4. 進階配置
4.1 修改文章默認模板
修改hexo\scaffolds\post.md
title: {{ title }}
date: {{ date }}
categories:
tags:
abbrlink:
top:
4.2 新增文章時自動打開Markdown編輯器
首先在 hexo/scripts 下新建一個 newpost.js 文件，如果沒有 scripts 文件可以手動創(chuàng)建一個赵刑。
在這個文件寫入如下代碼：
var spawn = require('child_process').exec;
hexo.on('new', function(data){
? spawn('start? "markdown編輯器絕對路徑.exe" ' + data.path);
});
注意里面要修改的是 Markdown 編輯器的絕對路徑分衫，我使用的是 Typora ，所以我的絕對路徑是 D:\Program Files\Typora\Typora.exe 般此，大家可以對應進行修改蚪战。
4.3 Pjax插件
Pjax是基于Ajax的插件，能實現網頁局部無刷新載入铐懊，聽起來很香屎勘，然而存在一些小問題：
使用Mediumzoom時，從歸檔進入博文不會加載圖片居扒，需要刷新網頁才能加載
Echarts圖表全部需要刷新才能顯示概漱，否則只有一片空白
安裝Pjax，地址： next-theme /pjax 喜喂，運行以下代碼安裝：
git clone https://github.com/next-theme/pjax source/lib/pjax
然后在next.yml中搜索pjax并設置為pjax: true
如果部署是報錯:
ERROR Process failed: lib/pjax/README.md
YAMLException: end of the stream or a document separator is expected at line 9, column 102:
? ? ... languages` and other directories:
解決方法：安裝完pjax插件后瓤摧，部署時報錯
在 Hexo 的 _config.yml 中找到名為 skip_render 的選項竿裂，然后設置為這樣:
skip_render:
? - lib/**/*
4.4 加載進度條
顯示當前網頁的加載進度,安裝：git clone https://github.com/theme-next/theme-next-pace source/lib/pace在next.yml中搜索Progress bar in the top during page loading并設置為
pace:
? enable: true
4.5. 背景圖片
將背景圖片放置在./hexo/themes/next/source/images中并命名為background.jpg然后在./hexo/source/_data/styles.styl中添加
body {
? ? background:url(/images/background.jpg);//圖片路徑
? ? background-repeat: no-repeat;//是否重復平鋪
? ? background-attachment: fixed;//是否隨著網頁上下滾動而滾動，fixed為固定
? ? background-position: 50% 50%;//圖片位置
? ? background-size: cover;//圖片展示大小
? ? -webkit-background-size: cover;
? ? -o-background-size: cover;
? ? -moz-background-size: cover;
? ? -ms-background-size: cover;
? ? opacity: 0.9;
? ? footer > div > div {
? ? ? ? color:#000000;//底部文字顏色
? ? }
}
4.6 首頁文章陰影邊框
找到三種方法照弥，在next7.7.2中都不起效腻异。
4.6.1 scheme選擇Gemini
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
4.6.2 在styles.styl里添加代碼
方法一只有首頁第一篇文章有陰影效果，其他兩種方法都沒有效果这揣。（不折騰了）
.content-wrap {
?? background: initial;
}
.post-block {
? box-shadow: 0 2px 6px 0 rgb(0,0,0,0.6), 0 0 6px 0 rgb(0,0,0,0.6)
? background: #FFF
}
// 主頁文章添加陰影效果
.post_block {
? opacity: 0;
? 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);
? }
// 主頁文章添加陰影效果
.post {
? margin-top: 0px;
? 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);
}
4.7. 自定義單行代碼顏色
在./hexo/source/_data/styles.styl中添加
code {
? ? color: #ff511A;
? ? //background: #fbf7f8;
? ? margin: 2px;
}
4.8. 菜單中文翻譯
我們原來是通過配置主題下的 languages 目錄中的 zh-CN.yml 文件來對菜單等進行中文翻譯的悔常，現在我們可以通過在 hexo/source/_data/ 下新建數據文件 languages.yml，配置如下：
zh-CN:
? menu:
?? home: 首頁
?? top: 熱榜
?? archives: 歸檔
?? categories: 分類
?? tags: 標簽
?? about: 關于
?? links: 友情鏈接
?? search: 搜索
?? schedule: 日程表
?? sitemap: 站點地圖
?? commonweal: 公益 404
?? movies: 觀影
?? books: 閱讀
?? gallery: 畫廊
?
? reward:
?? donate: <i class="fa fa-qrcode fa-2x" style="line-height:35px;"></i>
?? wechatpay: 微信支付
?? alipay: 支付寶
?? bitcoin: 比特幣
4.9. 文章末尾添加本文結束分割線
新建 source/_data/post-body-end.swig 文件给赞，添加內容：
<div>
?? {% if not is_index %}
? ? ?? <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
?? {% endif %}
</div>
在next.yml中机打，去掉注釋postBodyEnd: source/_data/post-body-end.swig
4.10. 圓角設置、中文字體設置
4.10.1. 圓角設置
在自定義樣式文件 hexo\source\_data\variables.styl 中添加：
// 圓角設置
$border-radius-inner ? ? = 20px 20px 20px 20px;
$border-radius ? ? ? ? ? = 20px;
然后在 NexT 的配置文件 next.yml 中取消 variables.styl 的注釋：variable: source/_data/variables.styl在這里會有一個bug片迅，左下角始終會有個白塊残邀。解決方法:你只需要在 source\_data\styles.styl 文件中添加一行代碼即可：:root{--body-bg-color: hsla(0,0%,100%,0)}或者添加下列代碼：
.sidebar {
box-shadow: none
background: none
}
4.10.2. 中文字體設置
首先修改主題配置文件 next.yml：
font:
? enable: true
?
? # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
? host: https://fonts.loli.net
?
? # Font options:
? # `external: true` will load this font family from `host` above.
? # `family: Times New Roman`. Without any quotes.
? # `size: x.x`. Use `em` as unit. Default: 1 (16px)
?
? # Global font settings used for all elements inside <body>.
? global:
?? external: true
?? family: Lato
?? size:
?
? # Font settings for site title (.site-title).
? title:
?? external: true
?? family:
?? size:
?
? # Font settings for headlines (<h1> to <h6>).
? headings:
?? external: true
?? family: Noto Serif SC
?? size:
修改配置文件 \hexo\source_data\variables.styl，增加如下代碼：
// 中文字體
$font-family-monospace ?? = consolas, Menlo, monospace, $font-family-base;
$font-family-monospace ?? = get_font_family('codes'), consolas, Menlo, monospace, $font-family-base if get_font_family('codes');
4.11. 鼠標點擊特效柑蛇、打字特效芥挣、友鏈等
4.11.1. 打字特效、鼠標點擊特效
之前版本：Hexo-NexT 添加打字特效耻台、鼠標點擊特效中空免，以下代碼是放在 hexo/next/_layout/_custom/custom.swig 文件中的，現在這部分代碼需要放到 hexo/source/_data/body-end.swig 文件中：
{# 鼠標點擊特效 #}
{% if theme.cursor_effect == "fireworks" %}
? <script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
? <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
? <script src="http://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
? <script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
? <script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
? <script async src="/js/cursor/text.js"></script>
{% endif %}
?
{# 打字特效 #}
{% if theme.typing_effect %}
? <script src="/js/activate-power-mode.min.js"></script>
? <script>
?? POWERMODE.colorful = {{ theme.typing_effect.colorful }};
?? POWERMODE.shake = {{ theme.typing_effect.shake }};
?? document.body.addEventListener('input', POWERMODE);
? </script>
{% endif %}
然后在 NexT 的配置文件 next.yml 中取消 body-end.swig 的注釋：bodyEnd: source/_data/body-end.swig然后我們在 next.yml 中增加如下配置項：
# 鼠標點擊特效
# mouse click effect: fireworks | explosion | love | text
cursor_effect: fireworks
?
# 打字特效
# typing effect
typing_effect:
? colorful: true? # 禮花特效
? shake: false ?? # 震動特效
注意：上面所有特效的 JS 代碼文件都放在站點的 source 目錄下（即 hexo/source/js/）而不是主題目錄下盆耽，如果沒有 js 目錄蹋砚，則新建一個。
4.11.2 友鏈添加
詳見：Hexo-NexT 新增友鏈從第一種友鏈方式改用第二種友鏈方式征字，因為第二種瀑布流友鏈樣式是不用修改 NexT 主題源文件的都弹。
411.3. 代碼塊折疊
參考：代碼塊折疊
4.12. 近期文章、粒子時鐘特效
4.12.1. 近期文章
現在我們把上面的代碼放到 hexo/source/_data/sidebar.swig 文件中匙姜，并且做以下更改：
{% if theme.recent_posts %}
?? <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout? }}">
? ?? <div class="links-of-blogroll-title">
? ? ?? <!-- modify icon to fire by szw -->
? ? ?? <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
? ? ?? {{ theme.recent_posts_title }}
? ?? </div>
? ?? <ul class="links-of-blogroll-list">
- ? ? ?? {% set posts = site.posts.sort('-date') %}
+ ? ? ?? {% set posts = site.posts.sort('-date').toArray() %}
? ? ?? {% for post in posts.slice('0', '5') %}
? ? ? ?? <li>
? ? ? ? ?? <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
? ? ? ?? </li>
? ? ?? {% endfor %}
? ?? </ul>
?? </div>
{% endif %}
這是因為 NexT 已經更換 Nunjucks 作為模板引擎畅厢。
然后在 NexT 的配置文件 next.yml 中取消 sidebar.swig 的注釋：sidebar: source/_data/sidebar.swig最后，為了配置方便氮昧，在主題的next.yml 中添加了幾個變量框杜，如下：
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
4.12.2. 粒子時鐘特效
現在我們只需要把粒子時鐘的 js 代碼直接放入到 hexo/source/_data/sidebar.swig 文件即可。詳情見：Hexo-NexT 增加 canvas 粒子時鐘
4.13. 置頂文章標志
首先我們需要安裝 hexo-generator-index-pin-top 這個插件袖肥，
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
然后將以下代碼放入 hexo/source/_data/post-meta.swig 文件
{% if post.top %}
?? <span class="post-meta-divider">|</span>
?? <i class="fa fa-thumb-tack"></i>
?? <font color=7D26CD>置頂</font>
?? <span class="post-meta-divider">|</span>
{% endif %}
然后在 NexT 的配置文件 next.yml 中取消 post-meta.swig 的注釋：post-meta: source/_data/post-meta.swig使用方法：在需要置頂的文章的 Front-matter 中加上 top: true 或者 top: 任意數字咪辱，比如：
---
title: TMDb電影數據分析
declare: true
toc: true
tags:
? - Python
? - 數據分析
categories:
? - 數據分析
? - 實戰(zhàn)
abbrlink: 7e380af2
date: 2018-11-23 13:20:03
top: 100
---
注意：top 中數字越大，文章越靠前椎组。
4.14. 靜態(tài)資源壓縮插件
安裝插件：npm install hexo-neat --save然后我們需要在站點配置文件中添加以下代碼：
# 博文壓縮
neat_enable: true
# 壓縮html
neat_html:
? enable: true
? exclude:
# 壓縮css ?
neat_css:
? enable: true
? exclude:
?? - '**/*.min.css'
# 壓縮js
neat_js:
? enable: false
? mangle: true
? output:
? compress:
? exclude:
?? - '**/*.min.js'
?? - '**/jquery.fancybox.pack.js'
?? - '**/index.js'
?? - '**/fireworks.js'
4.15. 首頁改歸檔頁
把 layout/archive.swig 改為 layout/index.swig 就行了油狂。不過注意此時首頁的 meta 信息是 archive （歸檔）……要做個清爽合格的首頁，可以把原 index.swig 的 meta 信息拷貝到新 index.swig 下。
// new index.swig (archive.swig)
?
- {% block title %}{{ __('title.archive') }} | {{ title }}{% endblock %}
?
+ {% block title %}{{ title }}{%- if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{%- endif %}{% endblock %}
4.16. 修改首頁专筷、歸檔頁顯示文章數量
站點配置文件_config.yml里修改：
index_generator:
? path: ''
? per_page: 10
? order_by: -date
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
4.17. 關閉文章目錄自動數字編號
關閉文章目錄自動數字編號后弱贼，可以自定義目錄數字編號。
在hexo\source_data\next.yml里修改：
toc:
? enable: true
? # Automatically add list number to toc.
? number: false
? # If true, all words will placed on next lines if header width longer then sidebar width.
? wrap: false
? # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
? expand_all: false
? # Maximum heading depth of generated toc.
? max_depth: 6
4.18 自動部署腳本
在根目錄新建deploy.sh磷蛹，輸入以下內容：
#!/bin/bash
echo -e "\033[0;32mDeploying updates to gitee...\033[0m"
hexo clean
hexo g -d
有時候可能需要多次運行腳本才能提交成功吮旅，這時不妨手動輸入命令。
5. V8.0 更新內容
5.1 重要更新
圖標庫升級為 Font-Awesome 5 (theme-next/hexo-theme-next#1438)
模板格式從 swig 更改為 njk
菜單設置變更 (a527bfd)
-override: false
?
menu:
-? home: / || fa fa-home
+? #home: / || fa fa-home
? #about: /about/ || fa fa-user
? #tags: /tags/ || fa fa-tags
? #categories: /categories/ || fa fa-th
-? archives: /archives/ || fa fa-archive
+? #archives: /archives/ || fa fa-archive
? #schedule: /schedule/ || fa fa-calendar
? #sitemap: /sitemap.xml || fa fa-sitemap
? #commonweal: /404/ || fa fa-heartbeat
Valine 選項更新 (6e6fc74)
valine:
-? appid: # Your leancloud application appid
-? appkey: # Your leancloud application appkey
+? appId: # Your leancloud application appid
+? appKey: # Your leancloud application appkey
? ...
-? guest_info: nick,mail,link # Custom comment header
+? meta: # Custom comment header
+ ?? - nick
+ ?? - link
支持 highlight.js (9fdaba2)
允許更多的代碼高亮格式 (03e50d0)
codeblock:
? ...
-? # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
-? # See: https://github.com/chriskempson/tomorrow-theme
-? highlight_theme: normal
+? # See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
+? theme:
+ ?? light: default
+ ?? dark: dark
5.2 配置
5.2.1. 代碼高亮
codeblock:
? theme:
?? light: agate
?? dark: dark
? # Add copy button on codeblock
? copy_button:
?? enable: true
?? # Show text copy result.
?? show_result: true
?? # Available values: default | flat | mac
?? style: mac
你可以在這里預覽代碼高亮的效果：highlightjs 選擇你喜歡的 style 即可味咳。
5..2. 更換模板
custom_file_path:
? #head: source/_data/head.njk
? #header: source/_data/header.njk
? #sidebar: source/_data/sidebar.njk
? postMeta: source/_data/post-meta.njk
? postBodyEnd: source/_data/post-body-end.njk
? footer: source/_data/footer.njk
? bodyEnd: source/_data/body-end.njk
? variable: source/_data/variables.styl
? #mixin: source/_data/mixins.styl
? style: source/_data/styles.styl
同時將原 _data 目錄下的 swig 文件后綴改為 njk 即可
6. 參考鏈接
