目錄：
1、Hexo 啟用next主題模板
2、更改Next主題為中文
3、增加標(biāo)簽頁(yè)和分類(lèi)頁(yè)
4、使用標(biāo)簽頁(yè)和分類(lèi)頁(yè)
5、next主題樣式的更改
6、更換頭像-可旋轉(zhuǎn)
7、更改博客標(biāo)題和作者名稱(chēng)
8、啟用側(cè)邊欄社交鏈接
9、啟用側(cè)邊欄友情鏈接
10、新增一片文章
11、開(kāi)啟訂閱公眾號(hào)
12、開(kāi)啟打賞功能
13、首頁(yè)文章設(shè)置閱讀全文
14、添加動(dòng)態(tài)背景
15、給博客添加fork Github
16、修改文章內(nèi)部鏈接樣式
17、修改文章底部帶#的標(biāo)簽
18、增加評(píng)論功能
18.1添加-來(lái)必力評(píng)論：-待完善
18.2添加-Valine評(píng)論：-已成功
18.3添加-Gitment評(píng)論：-待完善
19、增加搜索功能
20、增加不蒜子統(tǒng)計(jì)功能
21、增加內(nèi)容分享服務(wù)-未成功
22、增加加載效果
23、增加點(diǎn)擊爆炸效果
24、底部布局-隱藏底部的強(qiáng)力驅(qū)動(dòng)
25、實(shí)現(xiàn)字?jǐn)?shù)統(tǒng)計(jì)和閱讀時(shí)長(zhǎng)的功能
26、文章的置頂功能
27、修改字體大小
28、博客文章中插入圖片
28.1 插入本地圖片
28.2 插入網(wǎng)絡(luò)圖片
29、添加博客自定義圖標(biāo)
30、文章結(jié)束語(yǔ)
31、側(cè)邊欄設(shè)置
32、文章陰影設(shè)置
33、增強(qiáng)文章底部版權(quán)信息
34、添加頁(yè)面寵物
35、設(shè)置代碼塊樣式
36、代碼塊增加復(fù)制按鈕功能
37、設(shè)置博客摘要-全文顯示
38、文章內(nèi)鏈接樣式
39、加入網(wǎng)易云音樂(lè)播放器
40、設(shè)置RSS訂閱
41、設(shè)置文章頭信息post.md
42、設(shè)置菜單信息page.md
43、主頁(yè)、歸檔、標(biāo)簽及分類(lèi)分別控制
44、文章標(biāo)簽顯示和文章字?jǐn)?shù)顯示設(shè)置-未測(cè)
45、分頁(yè)顯示問(wèn)題-未測(cè)
46、修改Pisces主題寬度-未測(cè)
47、設(shè)置主題透明度-未測(cè)
48、配置全局，標(biāo)題、文章、代碼塊等字體
49 、顯示最近博客
50、添加主題動(dòng)態(tài)背景圖片
51、hexo博客部署到遠(yuǎn)端的Github
next主題為例：
├── .github #git信息
├── languages #多語(yǔ)言
| ├── default.yml #默認(rèn)語(yǔ)言
| └── zh-Hans.yml #簡(jiǎn)體中文
| └── zh-tw.yml #繁體中文
├── layout #布局，根目錄下的*.ejs文件是對(duì)主頁(yè)，分頁(yè)，存檔等的控制
| ├── _custom #可以自己修改的模板，覆蓋原有模板
| | ├── _header.swig #頭部樣式
| | ├── _sidebar.swig #側(cè)邊欄樣式
| ├── _macro #可以自己修改的模板，覆蓋原有模板
| | ├── post.swig #文章模板
| | ├── reward.swig #打賞模板
| | ├── sidebar.swig #側(cè)邊欄模板
| ├── _partial #局部的布局
| | ├── head #頭部模板
| | ├── search #搜索模板
| | ├── share #分享模板
| ├── _script #局部的布局
| ├── _third-party #第三方模板
| ├── _layout.swig #主頁(yè)面模板
| ├── index.swig #主頁(yè)面模板
| ├── page #頁(yè)面模板
| └── tag.swig #tag模板
├── scripts #script源碼
| ├── tags #tags的script源碼
| ├── marge.js #頁(yè)面模板
├── source #源碼
| ├── css #css源碼
| | ├── _common #*.styl基礎(chǔ)css
| | ├── _custom #*.styl局部css
| | └── _mixins #mixins的css
| ├── fonts #字體
| ├── images #圖片
| ├── uploads #添加的文件
| └── js #javascript源代碼
├── _config.yml #主題配置文件
└── README.md #用GitHub的都知道
我們需要改的文件其實(shí)也就那么幾個(gè)，大部分是不需要更改，next都已經(jīng)幫我們配置好了~
hexo博客默認(rèn)目錄結(jié)構(gòu)：
.
├── .deploy # 執(zhí)行hexo deploy命令部署到GitHub上的內(nèi)容目錄
├── public# 執(zhí)行hexo generate命令，輸出的靜態(tài)網(wǎng)頁(yè)內(nèi)容目錄
├── scaffolds # layout模板文件目錄，其中的md文件可以添加編輯（新寫(xiě)了一片文章）
├── scripts # 擴(kuò)展腳本目錄，這里可以自定義一些javascript腳本
├── source # 文章源碼目錄，該目錄下的markdown和html文件均會(huì)被hexo處理
| ├── _drafts # 草稿文章
| └── _posts # 發(fā)布文章
├── themes # 主題文件目錄
├── _config.yml # 全局配置文件，大多數(shù)的設(shè)置都在這里
└── package.json # 應(yīng)用程序數(shù)據(jù)，指明hexo的版本等信息，類(lèi)似于一般軟件中的關(guān)于按鈕
1、Hexo 啟用next主題模板
官網(wǎng)主題 地址：https://hexo.io/themes/
next主題：
測(cè)試使用next主題，也是大多數(shù)人比較喜歡的主題之一。
next主題官網(wǎng)參考：next主題官網(wǎng)
next主題github地址: next5 舊版本。
next主題github地址：next7 建議用這個(gè)新的版本.
下載next主題：
命令：
#cmd 進(jìn)入博客根目錄
#下載next主題 版本5 ,不推薦(已經(jīng)不維護(hù))
git clone https://github.com/iissnan/hexo-theme-next.git themes/next5
#下載next主題 最新版本7,推薦
git clone https://github.com/theme-next/hexo-theme-next themes/next7
_config.yml 配置文件有兩個(gè)：
注意:站點(diǎn)配置文件是博客根目錄下的_config.yml，主題配置文件是下載的主題下的_config.yml.
站點(diǎn)配置文件: D:\blog\zhengjiaao\_config.yml
主題配置文件: D:\blog\zhengjiaao\themes\next\_config.yml
站點(diǎn)配置文件: 修改主題
#將默認(rèn)主題landscape,修改為next主題
#theme: landscape
theme: next7
啟動(dòng)博客：
#cmd 進(jìn)入博客根目錄
#清除博客緩存
hexo clean
#生成靜態(tài)文件
hexo g
#啟動(dòng)博客 默認(rèn)端口4000 ,也可指定端口啟動(dòng): hexo s -p -5555
hexo s
#瀏覽器訪問(wèn)：http://localhost:4000/
#可看到next主題頁(yè)面
2、更改Next主題為中文
站點(diǎn)配置文件
language: zh-CN # 主題語(yǔ)言-簡(jiǎn)單中文
3、增加標(biāo)簽頁(yè)和分類(lèi)頁(yè)
主題配置文件
#找到menu，打開(kāi)標(biāo)簽頁(yè)和分類(lèi)頁(yè)
menu:
home: /|| home
#about: /about/ || user
tags: /tags/|| tags #標(biāo)簽頁(yè) + 圖標(biāo)tags
categories: /categories/|| th #分類(lèi)頁(yè) + 圖標(biāo)th
#archives: /archives/|| archive
#schedule: /schedule/|| calendar #日歷
#sitemap: /sitemap.xml|| sitemap #站點(diǎn)地圖，供搜索引擎爬取
#commonweal: /404/|| heartbeat # 騰訊公益404
resources: /resources/|| download #資源 + 圖標(biāo)download
# Enable/Disable menu icons.
menu_icons:
enable: true #是否啟用menu圖標(biāo)
創(chuàng)建標(biāo)簽頁(yè)和分類(lèi)頁(yè)
#打開(kāi)cmd，進(jìn)入博客根目錄
#創(chuàng)建標(biāo)簽頁(yè)
hexo n page tags
#創(chuàng)建分類(lèi)頁(yè)
hexo n page categories
修改標(biāo)簽頁(yè) D:\blog\zhengjiaao\source\tags\index.md
#修改前
---
title: tags
date: 2019-12-26 09:58:14
---
#修改后,一定要添加type: "tags"
---
title: 標(biāo)簽
date: 2019-12-26 09:58:14
type: "tags"
---
修改分類(lèi)頁(yè) D:\blog\zhengjiaao\source\categories\index.md
#修改前
---
title: categories
date: 2019-12-26 10:05:28
---
#修改后,一定要添加type: "categories"
---
title: 分類(lèi)
date: 2019-12-26 09:58:14
type: "categories"
---
以上是已經(jīng)存在的默認(rèn)菜單，只需要這樣配置接好了。
現(xiàn)在要添加一個(gè)新的resources資源
主題配置文件
#找到menu，新增 resources 資源
menu:
home: /|| home
tags: /tags/|| tags #標(biāo)簽頁(yè)
categories: /categories/|| th #分類(lèi)頁(yè)
resources: /resources/|| download #資源
創(chuàng)建資源頁(yè)
#打開(kāi)cmd，進(jìn)入博客根目錄
#創(chuàng)建標(biāo)簽頁(yè)
hexo n page resources
修改資源頁(yè) D:\blog\zhengjiaao\source\resources\index.md
#修改前
---
title: resources
date: 2019-12-26 10:10:56
---
#修改后,一定要添加type: "tags"
---
title: 資源
date: 2019-12-26 09:58:14
type: "resources"
---
修改 D:\blog\zhengjiaao\themes\next\languages\zh-Hans.yml
#新增 resources 翻譯成中文 資源
menu:
resources: 資源
4、使用標(biāo)簽頁(yè)和分類(lèi)頁(yè)
打開(kāi)文章 D:\blog\zhengjiaao\source_posts\hello-world.md
在md文章頭部添加：
---
title: Hello World
date: 2017-03-11 23:54:11
tags: [Hello,測(cè)試]
categories: 測(cè)試
---
5、next主題樣式的更改
主題配置文件
# ---------------------------------------------------------------
# 主題的樣式設(shè)置
# ---------------------------------------------------------------
# 只能選擇一套。
# Schemes
# scheme: Muse
#scheme: Mist
# scheme: Pisces
scheme: Gemini
6、更換頭像-可旋轉(zhuǎn)
在/themes/next/source/下新建文件夾uploads，將頭像圖片放在/themes/next/source/uploads/下。
主題配置文件
#將作者頭像圖片放置在blog/themes/next/source/images目錄下，修改名稱(chēng)為avatar.gif
# 用戶(hù)頭像-成功,也可以 http:圖片鏈接形式
avatar: /uploads/avatar.gif
頭像圓形并鼠標(biāo)放上旋轉(zhuǎn)
找到 D:\blog\zhengjiaao\themes\next\source\css_common\components\sidebar\sidebar-author.styl 文件
方式一：簡(jiǎn)單配置-頭像圓形旋轉(zhuǎn)
.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: 50%;
transition: 2s all;
}
/*旋轉(zhuǎn)*/
.site-author-image:hover{
transform: rotate(360deg);
}
方式二：復(fù)雜點(diǎn)配置-頭像圓形旋轉(zhuǎn)
.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;
/* 設(shè)置循環(huán)動(dòng)畫(huà) [animation: (play)動(dòng)畫(huà)名稱(chēng) (2s)動(dòng)畫(huà)播放時(shí)長(zhǎng)單位秒或微秒 (ase-out)動(dòng)畫(huà)播放的速度曲線為以低速結(jié)束
(1s)等待1秒然后開(kāi)始動(dòng)畫(huà) (1)動(dòng)畫(huà)播放次數(shù)(infinite為循環(huán)播放) ]*/
/* 鼠標(biāo)經(jīng)過(guò)頭像旋轉(zhuǎn)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 {
/* 鼠標(biāo)經(jīng)過(guò)停止頭像旋轉(zhuǎn)
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠標(biāo)經(jīng)過(guò)頭像旋轉(zhuǎn)360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 軸旋轉(zhuǎn)動(dòng)畫(huà) */
@-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);
}
}
7、更改博客標(biāo)題和作者名稱(chēng)
站點(diǎn)配置文件
# Site
title: Zheng # 博客的標(biāo)題(名稱(chēng))
subtitle: '' # 根據(jù)主題的不同，有的會(huì)顯示有的不會(huì)顯示
description: '站點(diǎn)描述，可以是你喜歡的一句簽名' # 站點(diǎn)描述，可以是你喜歡的一句簽名
keywords:
author: 宇宙小神特別萌 # 作者名稱(chēng)
language: zh-Hans # 主題語(yǔ)言-簡(jiǎn)單中文
timezone: Asia/Shanghai #中國(guó)的時(shí)區(qū)，不要亂改城市(可選)
8、啟用側(cè)邊欄社交鏈接
主題配置文件
#側(cè)邊欄添加-社交賬號(hào)： 格式為 鏈接名:鏈接地址 || 鏈接圖標(biāo) ，鏈接圖標(biāo)必須是http://fontawesome.dashgame.com/網(wǎng)站中存在的圖標(biāo)名
social:
GitHub: https://github.com/zhengjiaao || github
簡(jiǎn)書(shū): http://m.itdecent.cn/u/70d69269bd09 || book
social_icons:
enable: true #是否顯示social社交圖標(biāo)
icons_only: false #是否僅顯示社交圖標(biāo)
transition: false
9、啟用側(cè)邊欄友情鏈接
主題配置文件
# 側(cè)邊欄添加-友情鏈接
# Blog rolls 推薦閱讀
links_icon: link
links_title: Links
#links_layout: block #友情鏈接居中排列
links_layout: inline #友情鏈接并行排列
links:
Web前端導(dǎo)航: http://www.alloyteam.com/nav/
創(chuàng)造獅導(dǎo)航: http://www.chuangzaoshi.com/code
前端書(shū)籍資料: http://www.36zhen.com/t?id=3448
掘金醬: http://e.xitu.io/
V2EX: https://www.v2ex.com/
印記中文: https://www.v2ex.com/
# Title: http://example.com/
10、新增一片文章
命令
#打開(kāi)cmd，進(jìn)入博客根目錄
#新建一片文章 名稱(chēng)為 第一篇文章
hexo n 第一篇文章
命令演示：
#新建一片文章 名稱(chēng)為 第一篇文章
D:\blog\zhengjiaao>hexo n 第一篇文章
INFO Created: D:\blog\zhengjiaao\source\_posts\第一篇文章.md
打開(kāi) D:\blog\zhengjiaao\source_posts\第一篇文章.md
---
title: 第一篇文章
date: 2019-12-26 11:01:58
tags:
- 分享
- 導(dǎo)航
categories: 后臺(tái)
---
# 從這里才可以寫(xiě)文章內(nèi)容
## 第一篇文章哦
11、開(kāi)啟訂閱公眾號(hào)
在/themes/next/source/下新建文件夾uploads，將微信公眾號(hào)二維碼wechat-qcode.jpg圖片放在/themes/next/source/uploads/下。
主題配置文件
# 微信公眾號(hào)訂閱
wechat_subscriber:
enabled: true #是否啟用
#公眾號(hào) 二維碼，可以是 http://二維碼圖片鏈接
qcode: /uploads/wechat-qcode.jpg
description: 掃一掃上面的二維碼可以關(guān)注我哦 #公眾號(hào)描述,會(huì)放二維碼上方
12、開(kāi)啟打賞功能
在/themes/next/source/下新建文件夾uploads，將收款的二維碼wechatpay.jpg和 alipay.png圖片放在/themes/next/source/uploads/下。
主題配置文件：
# 微信支付寶打賞功能 微信收款 碼\支付寶收款碼
# Reward
reward_comment: 堅(jiān)持原創(chuàng)技術(shù)分享，您的支持將鼓勵(lì)我繼續(xù)創(chuàng)作！
wechatpay: /uploads/wechatpay.jpg
alipay: /uploads/alipay.png
#bitcoin: /images/bitcoin.png
13、首頁(yè)文章設(shè)置閱讀全文
方式一：主題配置文件
# 顯示 閱讀全文
auto_excerpt:
enable: true # fales/true 自動(dòng)截取一定程度的摘要
length: 150 # 截取多少字顯示
方式二：md文章中配置-比較靈活
在需要截取的地方，添加：
<!-- more -->
當(dāng)然兩種可以同時(shí)使用，有 more，就以more顯示。
14、添加動(dòng)態(tài)背景
主題配置文件
# 共有四種動(dòng)態(tài)背景：canvas_nest、three_waves、canvas_lines、canvas_sphere
# Canvas-nest
# canvas_nest: false
# 使用網(wǎng)絡(luò)背景特效 Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: true # false/true
onmobile: true # display on mobile or not
color: '0,0,0' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 150 # the number of lines
# 3D背景特效
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false # false/true
# canvas_lines
canvas_lines: false # false/true
# canvas_sphere
canvas_sphere: false # false/true
另外需要在blog中下載相應(yīng)資源包，具體見(jiàn)上面的鏈接，下面我給出canvas_nest的下載方式：
git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
15、給博客添加fork Github
找到自己喜歡的樣式：http://tholman.com/github-corners/
打開(kāi)： D:\blog\zhengjiaao\themes\next\layout\_layout.swig
<div class="headband"></div>
<!--找到大概23行代碼，在上方這個(gè)代碼下的位置添加下面代碼-->
<!--修改 a標(biāo)簽 github換成自己的地址：-->
<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
16、修改文章內(nèi)部鏈接樣式
打開(kāi) themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css樣式：
// 文章內(nèi)鏈接文本樣式
.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;
}
}
17、修改文章底部帶#的標(biāo)簽
打開(kāi) D:\blog\zhengjiaao\themes\next\layout_macro\post.swig
搜索：tag.name
<!--修改前-->
<a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
<!--修改后：將 # 替換成 google圖標(biāo)-->
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
圖標(biāo)必須是FontAwesome網(wǎng)站中存在的圖標(biāo)名。
18、增加評(píng)論功能
18.1添加-來(lái)必力評(píng)論：-待完善
來(lái)必力官網(wǎng)注冊(cè)：https://livere.com/ 暫時(shí)無(wú)法注冊(cè)，好像掛了。
主題配置文件
18.2添加-Valine評(píng)論：-已成功
Valine官網(wǎng)：https://valine.js.org/
leancloud參考：https://blog.csdn.net/weixin_39345384/article/details/80787998
注冊(cè)：leancloud
1.創(chuàng)建一個(gè)應(yīng)用 新應(yīng)用名稱(chēng) "hexo-next",選擇 "開(kāi)發(fā)版" 創(chuàng)建，在應(yīng)用上點(diǎn)擊存儲(chǔ)。
數(shù)據(jù)欄中，_開(kāi)頭的都是系統(tǒng)預(yù)定義好的表，為了區(qū)分，新建一張表來(lái)保存數(shù)據(jù)。為了保證對(duì)NexT主題的修改兼容，新建Class名字必須為Counter。為了避免權(quán)限問(wèn)題導(dǎo)致 次數(shù)統(tǒng)計(jì)顯示不正常，選擇無(wú)限制，創(chuàng)建Class。
2.獲取App ID和App Key
Class創(chuàng)建完成后，選擇界面最左側(cè)的設(shè)置 → 應(yīng)用Key，復(fù)制App ID和App Key
3.打開(kāi)博客根目錄/themes/next/下的_config.yml，查找leancloud，填寫(xiě)復(fù)制來(lái)的App ID和App Key，重新生成、部署博客即可正常統(tǒng)計(jì)文章閱讀量。
主題配置文件
# 添加-leancloud存儲(chǔ)庫(kù)-只能統(tǒng)計(jì)文章閱讀量，沒(méi)有評(píng)論功能
leancloud_visitors:
enable: true # false/true 是否啟用
app_id: OuyHeA0XGL8hK4vgbqqweERx-gzGzoHsz
app_key: L58VglKmWULcGK2W2qwekWzM
leancloud附贈(zèng)說(shuō)明：
記錄文章訪問(wèn)量的唯一標(biāo)識(shí)符是文章的發(fā)布日期和文章的標(biāo)題，因此請(qǐng)確保這兩個(gè)數(shù)值組合的唯一性，如果更改了這兩個(gè)數(shù)值，會(huì)造成文章閱讀數(shù)值的清零重計(jì)。
初始的文章統(tǒng)計(jì)量顯示為0。在配置好閱讀量統(tǒng)計(jì)服務(wù)之后，第一次打開(kāi)博文時(shí)，會(huì)自動(dòng)向服務(wù)器發(fā)送數(shù)據(jù)，該數(shù)據(jù)會(huì)被記錄在對(duì)應(yīng)的應(yīng)用的Counter表中。
修改Counter表中的time字段的數(shù)值，可以修改文章的訪問(wèn)量。雙擊具體的數(shù)值，修改之后回車(chē)即可保存。
-
因?yàn)锳ppID以及AppKey是暴露在外的，為了確保只用于我們自己的博客，建議設(shè)置Web安全域名，填入自己的博客域名
- 找到設(shè)置-->安全中心-->Web 安全域名 填寫(xiě)自己的博客域名：如 https://zhengjiaao.github.io/ 保存，這樣就只有自己的博客域名能存儲(chǔ)使用
Valine評(píng)論功能：
主題配置文件
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
# Valine 評(píng)論功能
valine:
enable: true # false/true 是否啟用valine評(píng)論功能
appid: OuyHeA0XGL8hK4vgbqqweERx-gzGzoHsz # your leancloud application appid #LeanClound獲得的appid
appkey: L58VglKmWULcGK2W2qwekWzM # your leancloud application appkey #LeanClound獲得的appkey
notify: true # false/true mail notifier , https://github.com/xCss/Valine/wiki # 郵件提醒
verify: false # false/true Verification code
placeholder: Just go go # comment box placeholder 歡迎暢所欲言
avatar: monsterid # gravatar style # mm 默認(rèn)頭像設(shè)置、wavatar、monsterid、robohash
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
指定文章（頁(yè)面）評(píng)論功能是否開(kāi)啟
在 Hexo 博客中，評(píng)論的功能是在所有頁(yè)面都默認(rèn)開(kāi)啟的，但是有的時(shí)候我們?cè)陧?yè)面上不需要顯示評(píng)論功能，例如分類(lèi)，標(biāo)記頁(yè)面我們并不需要評(píng)論功能。
我們可以在 Front-matter 中通過(guò)comments屬性設(shè)置true或false控制該頁(yè)面或者是文章的評(píng)論功能是否打開(kāi)，如我設(shè)置標(biāo)簽頁(yè)面的評(píng)論功能關(guān)閉：
title: 標(biāo)簽
date: 2019-07-18 15:16:50
type: "tags"
comments: false
設(shè)置評(píng)論頭像：https://valine.js.org/avatar.html
# Valine 評(píng)論功能
valine:
avatar: monsterid # gravatar style # mm 默認(rèn)頭像設(shè)置、wavatar、monsterid、robohash
18.3添加-Gitment評(píng)論：-待完善
需要github登錄才能評(píng)論，有局限性，適合評(píng)論少的、不推薦。
主題配置文件
19、增加搜索功能
#打開(kāi)cmd，進(jìn)入博客根目錄
#安裝本地搜索插件
npm install hexo-generator-searchdb --save
安裝之后，會(huì)在站點(diǎn)目錄的 public 文件夾下創(chuàng)建一個(gè) search.xml 文件
站點(diǎn)配置文件
# Search 添加搜索功能
search:
path: ./public/search.xml #索引文件的路徑，相對(duì)于站點(diǎn)根目錄
field: post #搜索范圍，默認(rèn)是 post，還可以選擇 page、all，設(shè)置成 all 表示搜索所有頁(yè)面
format: html #
limit: 10000 # 限制搜索的條目數(shù)
主題配置文件
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
# 添加搜索功能
local_search:
enable: true # false/true 是否啟動(dòng)
# 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 #字段表示在每篇文章中顯示的搜索結(jié)果數(shù)量，設(shè)成 -1 會(huì)顯示每篇文章的所有搜索結(jié)果數(shù)量。
20、增加不蒜子統(tǒng)計(jì)功能
主題配置文件
# 統(tǒng)計(jì)訪客量以及文章閱讀量
# NexT主題集成了不蒜子統(tǒng)計(jì)功能
busuanzi_count:
# count values only if the other configs are false
enable: true # false/true 是否開(kāi)啟不蒜子統(tǒng)計(jì)功能
# custom uv span for the whole site
# 效果：本站訪客數(shù)12345人次
site_uv: true
#本站訪客數(shù)
site_uv_header: 本站訪客數(shù) <i class="fa fa-user"></i>
site_uv_footer: 人次
# custom pv span for the whole site
# 效果：本站總訪問(wèn)量12345次（一般不開(kāi)啟這個(gè)）
site_pv: true
#本站總訪問(wèn)量
site_pv_header: 本站總訪問(wèn)量 <i class="fa fa-eye"></i>
site_pv_footer: 次
# custom pv span for one page only
## 效果：本文總閱讀量12345次
page_pv: true
#本文總閱讀量
page_pv_header: 本文總閱讀量 <i class="fa fa-file-o"></i>
page_pv_footer: 次
hexo博客解決不蒜子統(tǒng)計(jì)無(wú)法顯示問(wèn)題：
首先需要先找到NexT下引用不蒜子統(tǒng)計(jì)的方法。文件路徑為/theme/next/layout/_third-party/analytics/busuanzi-counter.swig文件：
<!--修改前-->
<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>
21、增加內(nèi)容分享服務(wù)-未成功
主題配置文件：
# 開(kāi)啟分享
jiathis: ture
##uid: Get this uid from http://www.jiathis.com/
#add_this_id:
# 開(kāi)啟百度分享
baidushare: true
# type: button
22、增加加載效果
不推薦使用，影響加載速度
主題配置文件：
# Progress bar in the top during page loading.
# 文章內(nèi)容加載效果 false/true
pace: true
# Themes list: 效果列表
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
#修改加載效果-效果不明顯，不推薦使用，影響加載速度
pace_theme: pace-theme-center-atom
23、增加點(diǎn)擊爆炸效果
不推薦使用，影響加載速度
1.創(chuàng)建爆炸js文件
在/themes/next/source/js/src下新建文件fireworks.js，并復(fù)制粘貼如下代碼
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
2.在\themes\next\layout\_layout.swig文件的<body>標(biāo)簽最后添加：
<!--頁(yè)面點(diǎn)擊爆炸效果-->
{% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="http://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
主題配置文件： 新增
# Fireworks 頁(yè)面點(diǎn)擊爆炸效果
fireworks: true
24、底部布局-隱藏底部的強(qiáng)力驅(qū)動(dòng)
主題配置文件：
#底部顯示建站時(shí)間和圖標(biāo)修改
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2019 # 建站年份
# Icon between year and copyright info.
icon: user #作者圖標(biāo)（默認(rèn)是author人像)
# If not defined, will be used `author` from Hexo main config.
# 別填bool型，最后顯示的東西是copyright || author，即左邊沒(méi)有設(shè)置的話就顯示作者
copyright: 宇宙小神特別萌 # (可不寫(xiě))
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: false # true/false 是否顯示Hexo信息-隱藏底部的強(qiáng)力驅(qū)動(dòng)
#主題信息
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false # true/false 是否顯示主題信息
# Version info of NexT after scheme info (vX.X.X).
version: false # true/false 是否顯示主題版本
25、實(shí)現(xiàn)字?jǐn)?shù)統(tǒng)計(jì)和閱讀時(shí)長(zhǎng)的功能
方式一:post_wordcount (不推薦)
#打開(kāi)cmd，進(jìn)入博客根目錄
# 安裝統(tǒng)計(jì)插件
npm install hexo-wordcount --save
主題配置文件： 開(kāi)啟統(tǒng)計(jì)功能
# 實(shí)現(xiàn)字?jǐn)?shù)統(tǒng)計(jì)和閱讀時(shí)長(zhǎng)的功能
post_wordcount:
item_text: true
wordcount: true # false/true
min2read: true # false/true
totalcount: false
separated_meta: true
方式二:symbols_count_time (推薦)
#打開(kāi)cmd，進(jìn)入博客根目錄
# 安裝統(tǒng)計(jì)插件
npm install hexo-symbols-count-time
#下載
git clone https://github.com/theme-next/hexo-symbols-count-time.git /node_modules/hexo-symbols-count-time
#進(jìn)入目錄
cd node_modules/hexo-symbols-count-time
#Test 測(cè)試
npm install mocha chai --save-dev
npm test
#Tests with coverage 覆蓋率測(cè)試
npm install -g nyc
nyc --print both node_modules/.bin/_mocha -- test/index.js
主題配置文件： 開(kāi)啟統(tǒng)計(jì)功能
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
# 實(shí)現(xiàn)字?jǐn)?shù)統(tǒng)計(jì)和閱讀時(shí)長(zhǎng)的功能 （參考 https://github.com/theme-next/hexo-symbols-count-time）
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false # false/true # 總字?jǐn)?shù)
awl: 4
wpm: 275
方式三：不蒜子統(tǒng)計(jì)功能
主題配置文件
# 統(tǒng)計(jì)訪客量以及文章閱讀量
# NexT主題集成了不蒜子統(tǒng)計(jì)功能
busuanzi_count:
# count values only if the other configs are false
enable: true # false/true 是否開(kāi)啟不蒜子統(tǒng)計(jì)功能
# custom uv span for the whole site
# 效果：本站訪客數(shù)12345人次
site_uv: true
#本站訪客數(shù)
site_uv_header: 本站訪客數(shù) <i class="fa fa-user"></i>
site_uv_footer: 人次
# custom pv span for the whole site
# 效果：本站總訪問(wèn)量12345次（一般不開(kāi)啟這個(gè)）
site_pv: true
#本站總訪問(wèn)量
site_pv_header: 本站總訪問(wèn)量 <i class="fa fa-eye"></i>
site_pv_footer: 次
# custom pv span for one page only
## 效果：本文總閱讀量12345次
page_pv: true
#本文總閱讀量
page_pv_header: 本文總閱讀量 <i class="fa fa-file-o"></i>
page_pv_footer: 次
hexo博客解決不蒜子統(tǒng)計(jì)無(wú)法顯示問(wèn)題：
首先需要先找到NexT下引用不蒜子統(tǒng)計(jì)的方法。文件路徑為/theme/next/layout/_third-party/analytics/busuanzi-counter.swig文件：
<!--修改前-->
<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、文章的置頂功能
#cmd 進(jìn)入博客根目錄
#卸載 hexo-generator-index
npm uninstall hexo-generator-index --save
#安裝 hexo-generator-index-pin-top
npm install hexo-generator-index-pin-top --save
在需要置頂?shù)奈恼碌?code>Front-matter中加上top: true 或者top: 任意數(shù)字，比如：
---
title: 文章置頂測(cè)試
top: 2
tags:
---
top中數(shù)字越大，文章越靠前。top: 2文章在top: 1文章的上方.
設(shè)置文章置頂圖標(biāo)：
打開(kāi)/themes/next/layout/_macro/ 目錄下的post.swig文件，在的第一個(gè)標(biāo)簽下，插入如下代碼：
搜索"post-meta"
<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 %}
</dev>
27、修改字體大小
打開(kāi) \themes\next\source\css_\variables\base.styl , 將$font-size-base改為16px
// Font size
$font-size-base = 16px
28、博客文章中插入圖片
28.1 插入本地圖片
#cmd 進(jìn)入博客根目錄
#方式一： hexo-asset-image 有時(shí)會(huì)失效
npm install hexo-asset-image --save
#方式二：比較穩(wěn)定
npm install https://github.com/CodeFalling/hexo-asset-image --save
站點(diǎn)配置文件： 修改
post_asset_folder: true # false/true 是否啟動(dòng)資源文件夾
新建一片文章：
#cmd 進(jìn)入博客根目錄
#創(chuàng)建一片新文章
hexo new post ceshi
方式一：執(zhí)行hexo new post ceshi 會(huì)創(chuàng)建一個(gè)同名的文件夾，將你博文中插入的照片放置到這個(gè)同名文件夾中即可，圖片的命名隨意，在文章中直接使用
# 添加圖片:在想添加的位置寫(xiě)入,例如:
<img src="ceshi/alipay.png" alt="測(cè)試1" style="zoom:25%;" /> #推薦
方式二：hexo/source目錄下新建一個(gè)img文件夾
使用本地路徑：在hexo/source目錄下新建一個(gè)img文件夾，將圖片放入該文件夾下，插入圖片時(shí)鏈接即為/img/圖片名稱(chēng).
在此路徑下放一張圖片 D:\blog\zhengjiaao\source\img\test.png
給ceshi.md文章插入圖片
---
title: ceshi
date: 2019-12-26 16:29:35
tags:
---
28.2 插入網(wǎng)絡(luò)圖片
河床存儲(chǔ)圖片：
但是有可能插入網(wǎng)絡(luò)圖片不顯示，或者只顯示某些網(wǎng)絡(luò)圖片.
執(zhí)行命令：
#cmd 進(jìn)入博客根目錄
npm uninstall -g hexo-renderer-marked-lazy
然后在博客文章中加入：<meta name="referrer" content="no-referrer"/>
---
title: Docker安裝常用軟件2
tags:
- Docker
categories: ''
resources: ''
copyright: false
comments: true
date: 2019-12-31 12:56:42
top:
---
<meta name="referrer" content="no-referrer"/>
29、添加博客自定義圖標(biāo)
#cmd 進(jìn)入博客根目錄
#安裝 hexo-asset-image
npm install hexo-asset-image --save
站點(diǎn)配置文件： 修改
post_asset_folder: true # false/true 是否啟動(dòng)資源文件夾
使用本地路徑：在hexo/source目錄下新建一個(gè)img文件夾，將圖片放入該文件夾下，插入圖片時(shí)鏈接即為/img/圖片名稱(chēng)。
Next支持修改圖標(biāo)，博客網(wǎng)站的圖標(biāo)可以在easyicon、bitbug、iconfont等網(wǎng)站選擇和制作，然后選擇或者創(chuàng)建相應(yīng)大小的圖標(biāo)文件，放置在blog/themes/next/sources/img目錄下，并在主題配置文件中進(jìn)行如下配置，只需要設(shè)置small和medium兩個(gè)就可以：
# 添加博客自定義圖標(biāo)
favicon:
small: /img/blog_favicon/favicon-16x16-next.png
medium: /img/blog_favicon/favicon-32x32-next.png
# apple_touch_icon: /images/apple-touch-icon-next.png
# safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
30、文章結(jié)束語(yǔ)
在路徑 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下內(nèi)容：
<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>
修改 post.swig 文件
在 \themes\next\layout\_macro\post.swig中， post-body之后， post-footer之前添加如下代碼（post-footer之前兩個(gè)DIV），在 wechat-subscriber.swig 代碼塊下方添加：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
主題配置文件：
# 文章末尾添加“本文結(jié)束”標(biāo)記
passage_end_tag:
enabled: true
31、側(cè)邊欄設(shè)置
設(shè)置主題配置文件，其中social表示社交信息，我們可以填入我們相關(guān)的鏈接，格式為鏈接名:鏈接地址 || 鏈接圖標(biāo)，其中鏈接圖標(biāo)必須是FontAwesome網(wǎng)站中存在的圖標(biāo)名。
# ***側(cè)邊欄設(shè)置***
# Posts / Categories / Tags in sidebar.
# site_state: true #默認(rèn)true 是否在側(cè)邊欄加入日志、分類(lèi)、標(biāo)簽等跳轉(zhuǎn)鏈接
#側(cè)邊欄添加-社交賬號(hào)： 格式為 鏈接名:鏈接地址 || 鏈接圖標(biāo) ，鏈接圖標(biāo)必須是http://fontawesome.dashgame.com/網(wǎng)站中存在的圖標(biāo)名
social:
GitHub: https://github.com/zhengjiaao || github
簡(jiǎn)書(shū): http://m.itdecent.cn/u/70d69269bd09 || book
social_icons:
enable: true #是否顯示社交圖標(biāo)
icons_only: false #是否僅顯示社交圖標(biāo)
transition: false
# 側(cè)邊欄添加-友情鏈接
# Blog rolls 推薦閱讀
links_icon: link
links_title: Links
# links_layout: block
links_layout: inline
links:
Web前端導(dǎo)航: http://www.alloyteam.com/nav/
創(chuàng)造獅導(dǎo)航: http://www.chuangzaoshi.com/code
前端書(shū)籍資料: http://www.36zhen.com/t?id=3448
掘金醬: http://e.xitu.io/
V2EX: https://www.v2ex.com/
印記中文: https://www.v2ex.com/
# Title: http://example.com/
#將作者頭像圖片放置在blog/themes/next/source/images目錄下，修改名稱(chēng)為avatar.gif
# 用戶(hù)頭像-成功
avatar: /images/avatar.gif
# avatar: #添加用戶(hù)頭像-失敗
# url: /images/avatar.gif
# rounded: true #鼠標(biāo)放在頭像上時(shí)是否旋轉(zhuǎn)
# opacity: 1 #頭像放縮指數(shù)
# rotated: true # false/true ,頭像是否設(shè)為圓形,否則為矩形
# Table Of Contents in the Sidebar
toc:
enable: true #是否自動(dòng)生成目錄
# Automatically add list number to toc.
number: false #false/true 目錄是否自動(dòng)產(chǎn)生編號(hào)
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false #標(biāo)題過(guò)長(zhǎng)是否換行
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
# max_depth: 6 #最大標(biāo)題深度
sidebar:
# Sidebar Position, available value: left | right (only for Pisces | Gemini).
position: left #側(cè)邊欄位置
# position: right
# Sidebar Display, available value (only for Muse | Mist):
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggle.
display: post
#display: always
#display: hide
#display: remove
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12 # 默認(rèn)12 側(cè)邊欄相對(duì)主菜單像素距離
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true # false/true 是否提供一鍵置頂
# Scroll percent label in b2t button.
scrollpercent: true # false/true 是否顯示當(dāng)前閱讀進(jìn)度
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false #手機(jī)上是否顯示側(cè)邊欄
32、文章陰影設(shè)置
打開(kāi)\themes\next\source\css\_custom\custom.styl,向里面加入：
// 主頁(yè)文章添加陰影效果
.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);
}
33、增強(qiáng)文章底部版權(quán)信息
1.在目錄 themes/next/layout/_macro/ 下添加 my-copyright.swig ，內(nèi)容如下：
{% if page.copyright %}
<div class="my_post_copyright">
<script src="http://cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS庫(kù) sweetalert 可修改路徑 -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" >
<p><span>本文標(biāo)題:</span>{{ page.title }}</a></p>
<p><span>文章作者:</span>{{ theme.author }}</a></p>
<p><span>發(fā)布時(shí)間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="點(diǎn)擊復(fù)制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="復(fù)制成功！"></i></span>
</p>
<p><span>許可協(xié)議:</span><i class="fa fa-creative-commons"></i> <a rel="license" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際</a> 轉(zhuǎn)載請(qǐng)保留原文鏈接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '復(fù)制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}
2.在目錄 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl，內(nèi)容如下:
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #333333; // title color
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #0593d3; // link color
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
3.修改 themes/next/layout/_macro/post.swig ，如下：
在 wechat-subscriber.swig 代碼塊前添加：
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
4.打開(kāi) themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代碼：
@import "my-post-copyright"
5.設(shè)置新建文章自動(dòng)開(kāi)啟 copyright ，即新建文章自動(dòng)顯示自定義的版權(quán)聲明，設(shè)置 ～/scaffolds/post.md 文件，如下：
---
title: {{ title }}
date: {{ date }}
copyright: true # 是否開(kāi)啟版權(quán)底部版權(quán)信息
---
新建一片文章
#cmd 進(jìn)入博客根目錄
hexo new post ceshi
查看文章是否看起版權(quán)信息。
34、添加頁(yè)面寵物
首先在博客目錄下執(zhí)行:
#cmd 進(jìn)入博客根目錄
#安裝 hexo-helper-live2d
npm install -save hexo-helper-live2d
站點(diǎn)配置文件： 新增
#添加頁(yè)面寵物
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
model:
use: live2d-widget-model-wanko #選擇哪種模型
display: #放置位置和大小
position: right
width: 150
height: 300
mobile:
show: false #是否在手機(jī)端顯示
上面模型的選擇可在lived2d中選擇，并下載相應(yīng)的模型：
npm install live2d-widget-model-wanko
35、設(shè)置代碼塊樣式
站點(diǎn)配置文件：
# 代碼塊的設(shè)置，Hexo自帶的代碼高亮插件
highlight:
enable: true #是否開(kāi)啟代碼高亮
line_number: true #是否增加代碼行號(hào),代碼塊的行號(hào)顯示
auto_detect: false #自動(dòng)判斷代碼語(yǔ)言
tab_replace: ''
wrap: true
hljs: false
主題配置文件：
#代碼塊主題
highlight_theme: normal # normal/night 白色/黑色
36、代碼塊增加復(fù)制按鈕功能
為了提高博客代碼塊的用戶(hù)體驗(yàn)，僅僅代碼高亮還不行，最好還能一鍵復(fù)制代碼。
下載 clipboard.js
clipboard.js
clipboard.min.js 推薦
將clipboard.js或clipboard.min.js 放到\themes\next\source\js\src下
也是在.\themes\next\source\js\src目錄下，創(chuàng)建clipboard-use.js，文件內(nèi)容如下：
/*頁(yè)面載入完成后，創(chuàng)建復(fù)制按鈕*/
!function (e, t, a) {
/* code */
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += ' <i class="fa fa-globe"></i><span>copy</span>';
copyHtml += '</button>';
$(".highlight .code pre").before(copyHtml);
new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
}
initCopyCode();
}(window, document);
在.\themes\next\source\css\_custom\custom.styl樣式文件中添加下面代碼：
//代碼塊復(fù)制按鈕
.highlight{
//方便copy代碼按鈕（btn-copy）的定位
position: relative;
}
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc,#eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
}
.btn-copy span {
margin-left: 5px;
}
.highlight:hover .btn-copy{
opacity: 1;
}
在.\themes\next\layout\_layout.swig文件中，添加引用（注：在 swig 末尾或 body 結(jié)束標(biāo)簽之前添加）：
<!-- 代碼塊復(fù)制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>
37、設(shè)置博客摘要-全文顯示
對(duì)于摘要顯示，首先我們需要開(kāi)啟摘要功能，修改主題配置文件：
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true #選取博客正文<!--more-->前的內(nèi)容
# Automatically saving scroll position on each post/page in cookies.
save_scroll: false
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true #自動(dòng)截取摘要
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false #自動(dòng)截取一定程度的摘要
length: 150
38、文章內(nèi)鏈接樣式
修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css樣式：
// 文章內(nèi)鏈接文本樣式
.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;
}
}
39、加入網(wǎng)易云音樂(lè)播放器
首先在網(wǎng)頁(yè)搜索網(wǎng)易云音樂(lè)，選擇音樂(lè)，并生成外鏈：
例如生成的連接：
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=411214279&auto=1&height=66"></iframe>
將代碼粘貼到一個(gè)合適的位置，建議放在側(cè)邊欄，在Blog/themes/next/layout/_macro/sidebar.swig文件下，選擇位置復(fù)制進(jìn)去，不同位置效果不同,建議放到最后，不然會(huì)遮擋下方內(nèi)容。
我的加入網(wǎng)易云音樂(lè)播放器配置方式：
第一步：在Blog/themes/next/layout/_macro/sidebar.swig文件添加代碼：
{% if theme.background_music %}
<div>
<iframe class="cc-license motion-element" frameborder="no" border="0" marginwidth="0" marginheight="0" width="280" height="86" src="{{ theme.background_music }}"></iframe>
</div>
{% endif %}
第二步：在 themes/next/_config.yml 配置文件中添加歌單地址配置
#添加歌單地址配置
background_music: //music.163.com/outchain/player?type=2&id=411214279&auto=1&height=66
40、設(shè)置RSS訂閱
在博客主目錄下執(zhí)行：
#cmd 進(jìn)入博客根目錄
#安裝 hexo-generator-feed
npm install --save hexo-generator-feed
在站點(diǎn)配置文件中修改：
#RSS訂閱
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
# 配置 RSS訂閱 插件
plugins: hexo-generate-feed
然后設(shè)置主題配置文件：
# Set rss to false to disable feed link.
rss: /atom.xml
41、設(shè)置文章頭信息post.md
新建文章自動(dòng)顯示自定義頭信息。
設(shè)置 找到博客根目錄下/scaffolds/post.md 文件，添加如下：
---
title: {{ title }}
date: {{ date }}
top: # 文章是否置頂
tags: # 標(biāo)簽 配置 1.單個(gè)"" 2.多個(gè) [] 按","號(hào)分割 3.多個(gè)- 按行
-
categories: "" # 分類(lèi) 配置 1.單個(gè)"" 2.多個(gè) [] 按","號(hào)分割 3.多個(gè)- 按行
resources: "" # 資源 一般是可下載資源
copyright: false # false/true 自動(dòng)顯示自定義的文章底部版權(quán)聲明
comments: true # false/true 關(guān)閉文章底部Valine評(píng)論功能
---
新建一片文章
#cmd 進(jìn)入博客根目錄
hexo new post ceshi
查看文章是否看起版權(quán)信息。
42、設(shè)置菜單信息page.md
設(shè)置 找到博客根目錄下/scaffolds/page.md 文件，添加如下：
#修改前
---
title: {{ title }}
date: {{ date }}
---
#修改后
---
title: {{ title }} # 中文博客 需要手動(dòng)改為中文簡(jiǎn)體
date: {{ date }}
comments: false # false/true 關(guān)閉文章底部Valine評(píng)論功能
type: {{ title }}
---
創(chuàng)建菜單
#cmd 進(jìn)入博客根目錄下
#創(chuàng)建資源頁(yè)
hexo n page resources
#創(chuàng)建標(biāo)簽頁(yè)
hexo n page tags
#創(chuàng)建分類(lèi)頁(yè)
hexo n page categories
打開(kāi) D:\blog\zhengjiaao\source\resources\index.md 修改
#修改前
---
title: resources
comments: false
type: resources
date: 2019-12-27 09:52:20
---
#修改后
---
title: 資源
comments: false
type: resources
date: 2019-12-27 09:52:20
---
打開(kāi) \themes\next\languages\zh-Hans.yml 新增資源翻譯中文
menu:
home: 首頁(yè)
archives: 歸檔
categories: 分類(lèi)
tags: 標(biāo)簽
about: 關(guān)于
search: 搜索
schedule: 日程表
sitemap: 站點(diǎn)地圖
commonweal: 公益404
resources: 資源 #新增資源翻譯中文
主題配置文件： 新增菜單
menu:
home: /|| home
#about: /about/ || user
tags: /tags/|| tags #標(biāo)簽頁(yè)
categories: /categories/|| th #分類(lèi)頁(yè)
#archives: /archives/|| archive
#schedule: /schedule/|| calendar #日歷
#sitemap: /sitemap.xml|| sitemap #站點(diǎn)地圖，供搜索引擎爬取
#commonweal: /404/|| heartbeat # 騰訊公益404
resources: /resources/|| download #資源
43、主頁(yè)、歸檔、標(biāo)簽及分類(lèi)分別控制
#cmd 進(jìn)入博客根目錄
#安裝
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-tag --save
npm install hexo-generator-category --save
站點(diǎn)配置文件：
#博客首頁(yè)分頁(yè)設(shè)置
index_generator:
path: '' #博客的默認(rèn)路徑
per_page: 10 #主頁(yè)中每頁(yè)顯示的貼子，0表示禁止分頁(yè)
order_by: -date #博客排序，按時(shí)間倒序排列
#歸檔頁(yè)的分頁(yè)設(shè)置
archive_generator: #歸檔頁(yè)的配置
per_page: 5 #歸檔頁(yè)每頁(yè)博客數(shù)
yearly: true #按年歸檔
monthly: true # false/true 按月歸檔，為了加快生成速度，按月歸檔可不要
#標(biāo)簽頁(yè)的分頁(yè)設(shè)置
tag_generator:
per_page: 5 #標(biāo)簽頁(yè)每頁(yè)博客數(shù)
#分類(lèi)頁(yè)的分頁(yè)設(shè)置
category_generator:
per_page: 5 #值為0表示不分頁(yè)，按需填寫(xiě)
44、文章標(biāo)簽顯示和文章字?jǐn)?shù)顯示設(shè)置-未測(cè)
#cmd 進(jìn)入項(xiàng)目根目錄
#安裝
npm install hexo-wordcount --save
主題配置文件：
# Post meta display settings
## 文章標(biāo)簽顯示設(shè)置
post_meta:
item_text: true
created_at: true # 發(fā)表時(shí)間
updated_at: false # 更新時(shí)間
categories: true # 分類(lèi)
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
# 實(shí)現(xiàn)字?jǐn)?shù)統(tǒng)計(jì)和閱讀時(shí)長(zhǎng)的功能 （下載 npm install hexo-wordcount --save）
post_wordcount:
item_text: true
wordcount: true # false/true # 顯示字?jǐn)?shù)
min2read: true # false/true # 所需時(shí)間
totalcount: false # false/true # 總字?jǐn)?shù)
separated_meta: true # 分割符
45、分頁(yè)顯示問(wèn)題-未測(cè)
打開(kāi) themes/next/layout/_partials/pagination.swig
//修改前
{% if page.prev or page.next %}
<nav class="pagination">
{{
paginator({
prev_text: '<i class="fa fa-angle-left"></i>',
next_text: '<i class="fa fa-angle-right"></i>',
mid_size: 1
})
}}
</nav>
{% endif %}
//修改后
{%- if page.prev or page.next %}
<nav class="pagination">
{{
paginator({
prev_text: '<i class="fa fa-angle-left" aria-label="'+__('accessibility.prev_page')+'"></i>',
next_text: '<i class="fa fa-angle-right" aria-label="'+__('accessibility.next_page')+'"></i>',
mid_size: 1
})
}}
</nav>
{%- endif %}
46、修改Pisces主題寬度-未測(cè)
打開(kāi)編輯themes\next\source\css\_schemes\Pisces\_layout.styl，在底部添加如下代碼
// 以下為新增代碼?。?header{ width: 90% !important; }
header.post-header {
width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }
.header {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}
.container .main-inner {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}
.content-wrap {
+tablet() {
width: 100% !important;
}
+mobile() {
width: 100% !important;
}
}
47、設(shè)置主題透明度-未測(cè)
打開(kāi) /themes/next/source/css/_schemes/Pisces/_layout.styl
# 透明度參數(shù)
opacity: 1;
48、配置全局，標(biāo)題、文章、代碼塊等字體
主題配置文件：
# 配置站點(diǎn)文字：修改全局字體，標(biāo)題字體、文章字體、logo字體、代碼塊字體
font:
enable: true # false/true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
host:
# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: xx`. Use `px` as unit.
# Global font settings used on <body> element.
global:
external: true
family: Lato
size:
# Font settings for Headlines (h1, h2, h3, h4, h5, h6).
# Fallback to `global` font settings.
headings:
external: true
family:
size:
# Font settings for posts.
# Fallback to `global` font settings.
posts:
external: true
family:
# Font settings for Logo.
# Fallback to `global` font settings.
logo:
external: true
family:
size:
# Font settings for <code> and code blocks.
codes:
external: true
family:
size:
49 顯示最近博客
參考:https://github.com/tea3/hexo-related-popular-posts
#cmd 進(jìn)入博客根目錄
#安裝
npm install hexo-related-popular-posts --save
主題配置文件：
# 顯示最近博客 :一個(gè)hexo插件，它生成到相關(guān)帖子或熱門(mén)帖子的鏈接列表
related_posts:
enable: true # false/true
title: # Custom header, leave empty to use the default one ,自定義頁(yè)眉，保留為空以使用默認(rèn)頁(yè)眉
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false
文章中使用:
---
title: Hello World
tags:
- program
- diary
- web
---
Welcome to [Hexo](https://hexo.io/)! This is a sample article. Let's add some tags as above.
...
50、添加主題動(dòng)態(tài)背景圖片
主題配置文件： 找到custom_file_path，將如圖所示的代碼取消注釋
custom_file_path:
style: source/_data/styles.styl #添加主題背景
站點(diǎn)根目錄:新建文件 source/_data/styles.styl
// 添加背景圖片
body {
background: url(https://source.unsplash.com/random/1600x900?wallpapers);//自己喜歡的圖片地址
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
// 修改主體透明度
.main-inner {
background: #fff;
opacity: 0.8;
}
// 修改菜單欄透明度
.header-inner {
opacity: 0.8;
}
51、hexo博客部署到遠(yuǎn)端的Github
cmd進(jìn)入博客根目錄
# cmd 進(jìn)入本地博客根目錄
#清除緩存
hexo clean
#先生成靜態(tài)資源
hexo g
#本地啟動(dòng)博客測(cè)試-沒(méi)有問(wèn)題就發(fā)布到github上
hexo s
#發(fā)布到github，可能-提示 ERROR Deployer not found: git，安裝hexo-deployer-git
hexo d
# 安裝hexo-deployer-git
npm install hexo-deployer-git --save
# 需要重新執(zhí)行前面的所有命令
#清除緩存
hexo clean
#先生成靜態(tài)資源
hexo g
#本地啟動(dòng)博客測(cè)試-沒(méi)有問(wèn)題就發(fā)布到github上
hexo s
#發(fā)布到github，可能-提示 ERROR Deployer not found: git，安裝hexo-deployer-git
hexo d
發(fā)布完成可以在瀏覽器中訪問(wèn) github上的博客域名:
