GitHub + Hexo搭建自己部落格(二) Next主題配置

摘要： 在 Hexo 中有兩份主要的配置檔案，其名稱都是 _config.yml。 其中，一份位於站點根目錄 下，主要包含 Hexo 本身的配置；另一份位於主題目錄 下，這份配置由主題作者提供，主要用於配置主題相關的選項。 為了描述方便，在以下說明中，將前者稱為站點...

在 Hexo 中有兩份主要的配置檔案，其名稱都是 _config.yml。 其中，一份位於站點根目錄 下，主要包含 Hexo 本身的配置；另一份位於主題目錄 下，這份配置由主題作者提供，主要用於配置主題相關的選項。

為了描述方便，在以下說明中，將前者稱為站點配置檔案 ， 後者稱為主題配置檔案 。

1、站點基本設定

在站點配置檔案 即部落格根目錄下的_config.yml 中

# Site
title: Sando部落格
subtitle: 程式碼日記
description: 寄雜誌第
keywords:
author: Sando
language: zh-Hans
timezone:

複製程式碼

2、頭像設定

2.1 設定頭像

在站點配置檔案 中新增avatar，值設定為頭像的連結地址。地址可以是網路地址，也可以是本地地址（放置在source/images/ 目錄下）

#側邊欄頭像設定
avatar: /images/user.jpg
複製程式碼

2.2 頭像旋轉動畫

開啟\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在裡面新增如下程式碼：

.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
 
/* 頭像圓形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
 
/* 設定迴圈動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線為以低速結束 
(1s)等待1秒然後開始動畫 (1)動畫播放次數(infinite為迴圈播放) ]*/
 
 
/* 滑鼠經過頭像旋轉360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
 
img:hover {
/* 滑鼠經過停止頭像旋轉 
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
 
/* 滑鼠經過頭像旋轉360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
 
/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

複製程式碼

3、主題佈局設定

在主題配置檔案 即在next主題目錄下的_config.yml檔案中將scheme設定為Pisces,可根據個人喜好設定成其他的值

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
複製程式碼

4、選單項設定

在主題配置檔案 中的menu中設定，增添一個movies 注：千萬不要在這設定中文，後面的值那是查詢檔案的地方！ 如下

menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
#archives: /archives
#search: /search
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404
movies: /movies || film
複製程式碼

這些配置都要與你主題目錄下的languages檔案中對應的yml文件裡配置相關聯。 比如你在站點根目錄中的配置檔案設定language為zh-Hans，那麼就要進入到主題目錄下的languages檔案中修改zh-Hans.yml，這樣才能顯示出選單項新增的中文內容

menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標籤
about: 關於
search: 搜尋
schedule: 日程表
sitemap: 站點地圖
commonweal: 公益404
movies: 電影
複製程式碼

5、選單項圖示設定

在主題配置檔案 中對應的欄位是menu_icons。格式為item name：icon name，其中item name與所配置的選單名字對應，icon name是Font Awesome圖示的名字。而 enable 可用於控制是否顯示圖示，你可以設定成 false 來去掉圖示。

menu_icons:
enable: true
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
movies: film
複製程式碼

新建的欄目icon，需要在Font Awesome圖示庫存在，例如新建的movies，在圖示庫中查詢選擇film圖示，在主題配置檔案 的menu_icons中，更改movies: film

6、側欄位置設定

在主題配置檔案 中修改主題目錄下sidebar的position值

sidebar:
# Sidebar Position, available value: left | right (only for Pisces | Gemini).
position: left
#position: right
複製程式碼

7、新增標籤頁面

前面通過修改next主題下的_config.yml檔案中的menu選項，可以在主頁面的選單欄新增標籤選項，但是此時點選標籤，跳轉的頁面會顯示page not found。此時我們要新建一個頁面 在git bush中輸入hexo new page tags

在新建的index.md檔案中新增type: "tags"

---
title: tags
date: 2019-02-18 17:16:00
type: "tags"
---
複製程式碼

當要為某一篇文章新增標籤，只需在blog/source/_post目錄下的具體文章的tags中新增標籤即可

8、側邊欄社交欄目

側欄社交連結的修改包含兩個部分，第一是連結，第二是連結圖示。 兩者配置均在主題配置檔案 中

（1）連結放置在 social 欄位下，一行一個連結。其鍵值格式是 顯示文字: 連結地址。

# Social links
social:
GitHub: https://github.com/your-user-name
Twitter: https://twitter.com/your-user-name
微博: http://weibo.com/your-user-name
豆瓣: http://douban.com/people/your-user-name
知乎: http://www.zhihu.com/people/your-user-name
# 等等
複製程式碼

（2）設定連結的圖示，對應的欄位是 social_icons。其鍵值格式是 匹配鍵: Font Awesome 圖示名稱， 匹配鍵 與上一步所配置的連結的 顯示文字 相同（大小寫嚴格匹配），圖示名稱 是 Font Awesome 圖示的名字（不必帶 fa- 字首）。 enable 選項用於控制是否顯示圖示，你可以設定成 false 來去掉圖示。 其中seoial_icons節點中後面的值是http://fontawesome.io/icons/ 中提供的圖示的名稱。之後其他連結如推特，微博等都可自行增減。

# Social Icons
social_icons:
enable: true
# Icon Mappings
GitHub: github
Twitter: twitter
微博: weibo
複製程式碼

9、顯示當前瀏覽進度

主題配置檔案即themes/*/_config.yml 中scrollpercent 更改為true ,b2t 改為true 返回頂部及瀏覽進度顯示在左側sidebar 之下，改為false 顯示在右下角，根據個人喜好自行設定。

sidebar:
# Sidebar Position - 側欄位置（只對Pisces | Gemini兩種風格有效）
position: left//靠左放置
#position: right//靠右放置

# Sidebar Display - 側欄顯示時機（只對Muse | Mist兩種風格有效）
#display: post//預設行為，在文章頁面（擁有目錄列表）時顯示
display: always//在所有頁面中都顯示
#display: hide//在所有頁面中都隱藏（可以手動展開）
#display: remove//完全移除

offset: 12//文章間距（只對Pisces | Gemini兩種風格有效）

b2t: false//返回頂部按鈕（只對Pisces | Gemini兩種風格有效）

scrollpercent: true//返回頂部按鈕的百分比
複製程式碼

二、個性化設定

1、新增萌萌噠二次元看板娘

英文介紹 中文介紹

1.1、安裝外掛

npm install --save hexo-helper-live2d

1.2、配置

請向根目錄的 _config.yml 檔案或主題的 _config.yml 檔案中新增配置.

live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-<你喜歡的模型名字>
display:
position: right
width: 150
height: 300
mobile:
show: true

複製程式碼

模型連線 配置詳細介紹

1.3、配置檔案

配置檔案有很多方法這裡主要講我使用的方法：詳情請參考如下：

英文介紹 中文介紹

1.3.1 在部落格根目錄下建資料夾live2d_models；

1.3.2 再在live2d_models下建資料夾<你喜歡的模型名字>；

1.3.3 再在<你喜歡的模型名字>下建json檔案：<你喜歡的模型名字>.model.json；

1.4、安裝模型

在命令列（即Git Bash）執行以下命令即可：

npm install --save live2d-widget-model-<你喜歡的模型名字> 模型安裝

1.5、檢視結果

在命令列（即Git Bash）執行以下命令， 在http://127.0.0.1:4000/ 檢視測試結果：

hexo clean && hexo g && hexo s

1.6、更改模型

若更改模型請從第二步更改model.use；刪除第三步原有檔案，重新建立，安裝模型，檢視結果

2、實現fork me on github

2.1、點選這裡 挑選自己喜歡的樣式，並複製程式碼

2.2、然後貼上剛才複製的程式碼到themes/next/layout/_layout.swig檔案中(放在<div class="headband"></div> 的下面)，並把href改為你的github地址

2.3、若位置不對，在 img 標籤中修改style="position:fixed;top:0;right:0"

3、設定網站的圖示Favicon

在EasyIcon 或者Iconfont中找一張（32*32）的ico圖示，並將圖示名稱改為favicon.ico，然後把圖示放在/themes/next/source/images裡，並且修改主題配置檔案 ：

4、首頁文章新增陰影效果

開啟\themes\next\source\css_custom\custom.styl,向裡面加入：

//文章內容新增邊框陰影
.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);
}
複製程式碼

5、網站頂部載入條

修改主題配置檔案(_config.yml)將pace: false改為pace: true就行了，你還可以換不同樣式的載入條，如下圖：

6、統計文章閱讀量

通過leanCloud統計您網站的文章閱讀量 1.註冊LeanCloud, 並建立一個你自己的應用; 2.點選圖片右上角的設定圖示進入應用介面; 3.到此，你的應用建立成功，繼續表的建立,建立表，並將表的名字命名為：Counter 4.開啟設定 -> 應用key 獲取App ID 和App Key ; 5.最後開啟主題配置檔案 :themes/*/_config.yml ;

leancloud_visitors:
enable: true
app_id: #你的app_id
app_key: #你的的app_key
複製程式碼

6.完成配置並重新編譯。到此您已經成功設定了閱讀量的統計

7、文章加密訪問

開啟themes->next->layout->_partials->head.swig檔案,在以下位置插入這樣一段程式碼：

<script>
(function(){
if('{{ page.password }}'){
if (prompt('請輸入文章密碼') !== '{{ page.password }}'){
alert('密碼錯誤！');
history.back();
}
}
})();
</script>

複製程式碼

然後在文章上寫上password: **** ,如下：

8、修改連結URL

編輯站點配置檔案 下的 _config.yml 檔案，修改其中的 permalink欄位：permalink: :category/:title/

9、文章置頂

9.1 安裝外掛

npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

9.2 在需要置頂的文章中加上top即可，數值越大文章越靠前

---
title: 'GitHub + Hexo搭建自己部落格(二) Next主題配置 '
date: 2019-02-19 15:35:40
tags: [hexo,github]
categories: blog,hexo,next
top: 10
---
複製程式碼

9.3 設定置頂標誌

開啟：/themes/*/layout/_macro/post.swig，定位到<div class="post-meta"> 標籤下，插入如下程式碼：

{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置頂</font>
<span class="post-meta-divider">|</span>
{% endif %}
複製程式碼

10、隱藏網頁底部powered By Hexo / 強力驅動

開啟themes/next/layout/_partials/footer.swig,使用<!-- --> 隱藏之間的程式碼即可，或者直接刪除。

11、實現統計功能

1.在根目錄下安裝 hexo-wordcount,執行：npm install hexo-wordcount --save 2.然後在主題配置檔案 中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: true
複製程式碼

12、網站底部字數統計

1.在根目錄下安裝 hexo-wordcount,執行：npm install hexo-wordcount --save 2.然後在/themes/next/layout/_partials/footer.swig檔案尾部加上：

<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">部落格全站共{{ totalcount(site) }}字</span>
</div>
複製程式碼

13、新增README.md 檔案

每個專案下一般都有一個README.md 檔案，但是使用 hexo 部署到倉庫後，專案下是沒有README.md 檔案的。

在 Hexo 目錄下的 source 根目錄下新增一個README.md 檔案，修改站點配置檔案 _config.yml，將 skip_render 引數的值設定為skip_render: README.md

14、修改文章底部的那個帶#號的標籤

修改模板/themes/next/layout/_macro/post.swig，搜尋 rel="tag">#，將 # 換成

15、新增RSS

1.站點根目錄下安裝外掛，npm install --save hexo-generator-feed ; 2.在站點配置檔案 _config.yml中，新增如下內容：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
複製程式碼

3.然後再主題配置檔案 中配置rss ;

rss: /atom.xml
複製程式碼

4.配置完之後執行：hexo clean && hexo g && hexo s ; 5.重新生成一次，你會在./public 資料夾中看到 atom.xml 檔案。然後啟動伺服器檢視是否有效，之後再部署到 Github 中

16、點擊出現桃心效果

1.在路徑/themes/*/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\*\layout\_layout.swig 檔案末尾</body> 之前新增

<!-- 頁面點選小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
複製程式碼

3.我選擇的是社會主義核心價值觀的特效，因為我們都是社會主義接班人！！

(function() {

var T_color = "";//字型顏色,你不設定就是隨機顏色,

var T_size = [10,20];//文字大小區間,不建議太大

var T_font_weight = "bold";//字型粗斜度-->normal,bold,900

var AnimationTime = 1500;//文字消失總毫秒

var Move_up_Distance = 388;//文字移動距離,正數代表上移，反之下移

var a_index = 0;
$("html").click(function(e){
var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善");
var $i = $("<span/>").text(a[a_index]);
a_index = (a_index + 1) % a.length;
var x = e.pageX,y = e.pageY;
var x_color ="#" + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);//-->隨機顏色
//console.log(x_color);
if(T_color.length>=4){
x_color = T_color;
}

var x_size = Math.random()*(T_size[1]-T_size[0]) + T_size[0];
x_size +="px";

$i.css({
"z-index": 99999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"font-size":x_size,
"color": x_color
});
$("html").append($i);
$i.animate({"top": y-Move_up_Distance,"opacity": 0},AnimationTime,function() {
$i.remove();
});
});
})();
複製程式碼

17、修改文章內連結文字樣式

1.修改檔案themes\*\source\css\_common\components\post\post.styl ，在末尾新增如下css樣式，：

// 文章內連結文字樣式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
複製程式碼

18、在文章末尾新增“本文結束”標記

1.在路徑\themes\*\layout\_macro 中新建passage-end-tag.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>
複製程式碼

2.開啟\themes\*\layout\_macro\post.swig 檔案，在post-body 之後，post-footer 之前新增如下程式碼（post-footer之前兩個DIV）

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

複製程式碼

3.開啟主題配置檔案 （_config.yml),在末尾新增：

# 文章末尾新增“本文結束”標記
passage_end_tag:
enabled: true
複製程式碼

4.完成以上設定之後，在每篇文章之後都會新增如此效果圖

19、自定義滑鼠樣式

開啟themes/*/source/css/_custom/custom.styl ,在裡面寫下如下程式碼：

// 滑鼠樣式
* {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
}
:active {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
}
複製程式碼

20、Canvas背景

在主題配置檔案 中，找到Canvas配置項，可以應用NNext自帶的Canvas特效

想要更改顏色和數量？修改檔案：/themes/next/source/lib/canvas-nest/canvas-nest.min.js ,修改參考

21、修改內容區域的寬度

1. 編輯主題的 source/css/_variables/custom.styl 檔案，新增變數：

// 修改成你期望的寬度
$content-desktop = 700px

// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px
複製程式碼

2. 但是此方法不適用於 Pisces Scheme，對於 Pisces Scheme，需要同時修改header 的寬度、.main-inner 的寬度以及.content-wrap 的寬度。例如，使用百分比（Pisces 的佈局定義在source/css/_schemes/Picses/_layout.styl 中）

.header{ width: 60%; }
.container .main-inner { width: 60%; }
.content-wrap { width: calc(100% - 260px); }
複製程式碼

超過一定寬度後（一行內文字太多導致換行跨度太大），閱讀體驗不好，我調整的寬度為60%，各位可以自行測試進行調整

22、打賞功能

1.準備支付寶和微信二維碼，存放在themes/*/source/images 2.在主題配置檔案 （_config.yml）中進行設定

# Reward
reward_comment: 謝謝請我吃辣條！
wechatpay: /images/wechatpay.png
alipay: /images/alipay.jpg
複製程式碼

3.修復圖片閃動bug，修改next/source/css/_common/components/post/post-reward.styl ，註釋wechat:hover 和alipay:hover

23、配置Valine評論系統

1.Valine 是一款基於Leancloud的快速、簡潔且高效的無後端評論系統； 2.獲取Leancloud的APP ID和 APP KEY, 上面第六步設定中已經介紹了獲取方法； 3.開啟主題配置檔案 :themes/*/_config.yml ;

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid:# your leancloud application appid
appkey: # your leancloud application appkey
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 在這裡說點什麼吧... # comment box placeholder
avatar: identicon # 評論表頭樣式/mm/identicon/monsterid/wavatar/retro/hide
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
複製程式碼

4.其他相關配置和郵件提醒方式可檢視Valline詳細配置官網

24、新增搜尋功能

1.在根目錄下安裝hexo-generator-searchdb 外掛，npm install hexo-generator-searchdb --save ; 2.站點配置檔案 中新增以下欄位

search:
path: search.xml
field: post
format: html
limit: 10000
複製程式碼

3.編輯主題配置檔案 啟用本地搜尋

# Local search
local_search:
enable: true
複製程式碼

25、不蒜子訪問統計

1.編輯主題配置檔案 themes/*/_config.yml 中的busuanzi_count 的配置項即可;

busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:
複製程式碼

2.找到主題呼叫不蒜子的swig檔案\themes*\layout_third-party\analytics\busuanzi-counter.swig 3.更改域名

把原有的：
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
域名改一下即可：
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
複製程式碼

26、新增404公益介面

1.在根目錄下輸入hexo new page 404 ; 2.開啟剛新建的頁面檔案，預設在 Hexo 資料夾根目錄下/source/404/index.md ； 3.將檔名index.md 改為404.html ; 4.在檔案中寫入內容，這裡使用的是騰訊公益；

---
title: 404 Not Found：該頁無法顯示
toc: false
comments: false
permalink: /404
---
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首頁" homePageUrl="https://sandop.github.io"></script>
</body>
</html>
複製程式碼

5.將返回首頁 的連結更改為自己的連結。

27、網頁程式碼壓縮

網上有很多相關的博文，常規的做法是使用gulp來進行壓縮，但是沒有成功，所以更換為hexo-neat 壓縮外掛進行。

1.站點根目錄下安裝外掛npm install hexo-neat --save ； 2.修改站點配置檔案 ，在末尾新增以下程式碼；

# hexo-neat
# 博文壓縮
neat_enable: true
# 壓縮html
neat_html:
enable: true
exclude:
# 壓縮css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 壓縮js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'

複製程式碼

3.執行hexo clean && hexo g && hexo s 檢視效果。