說明
前兩篇文章介紹了 Hexo + github pages + travis ci 進行自動化部署，並介紹了 Hexo 的配置文件中的各個屬性，相信通過前兩篇文章的學習，你已經學會了如何搭建自己的博客，並能夠根據自己的需要進行個性化配置。
這一篇將以 Matery 這款主題為例，說明一下主題應該如何配置。包括主題配置、插件設置、注意事項等。
設置博客主題
先到這里 選擇你喜歡的主題，點擊它的標題（注意，點圖片是進去 demo 站點，點標題才是跳轉到對應到 github 倉庫），跳轉到 github 倉庫，復制其倉庫地址。
比如我使用到主題是 Matery ，其項目地址為：git@github.com:blinkfox/hexo-theme-matery.git。
打開本地目錄，來到與我們的博客項目同級的目錄（注意是同級，不是在博客項目內部），將主題項目克隆到本地。
git clone git@github.com:blinkfox/hexo-theme-matery.git
在博客項目下的 themes 文件夾里新建一個叫 matery 的文件夾，然后將主題文件復制到這個文件夾里：
mkdir breeze-blog/themes/matery
cp -r hexo-theme-matery/* breeze-blog/themes/matery
這里的 breeze-blog 是我的博客項目所在的文件夾，這里替換成你的即可。
再次打開我們的配置文件(_config.yml)，修改 theme 屬性，設置為博客主題所在的文件夾名，這里即為 matery，注意要與文件夾名稱完全一致。
然后我們重新生成一下博客靜態文件：
cd breeze-blog
hexo clean && hexo generate
hexo server
然后再打開我們的博客地址：localhost:4000，我們的主題便設置好了。
但現在大部分信息都是默認數據，所以我們需要根據需要進行自定義設置，不同主題的配置文件都不太一樣，因此設置方法也有所不同，這里僅介紹 Matery 主題的設置方法。
主題內容自定義
新建頁面
如果你點擊首頁最上面的那一欄，會發現很多頁面打開是沒有的，因為我們還沒有創建對應的頁面，所以需要先創建對應的頁面。
先新建分類 categories 頁，categories 頁是用來展示所有分類的頁面，命令如下：
hexo new page "categories"
編輯新建的頁面文件 /source/categories/index.md，寫入以下內容：
---
title: categories
date: 2020-05-04 10:40:13
type: "categories"
layout: "categories"
---
然后新建標簽 tags 頁，tags 頁是用來展示所有標簽的頁面，命令如下：
hexo new page "tags"
編輯新建的頁面文件 /source/tags/index.md，寫入以下內容：
---
title: tags
date: 2020-05-04 10:40:14
type: "tags"
layout: "tags"
---
接下來是新建 about 頁，about 頁是用來展示關於我和我的博客信息的頁面，命令如下：
hexo new page "about"
編輯新建的頁面文件 /source/about/index.md，寫入以下內容：
---
title: about
date: 2020-05-04 10:40:15
type: "about"
layout: "about"
---
然后新建留言板 contact 頁，contact 頁是用來展示留言板信息的頁面，方便其他人進行統一留言，命令如下：
hexo new page "contact"
編輯新建的頁面文件 /source/contact/index.md，寫入以下內容：
---
title: contact
date: 2020-05-04 10:40:16
type: "contact"
layout: "contact"
---
注意，留言板功能依賴於第三方評論系統，需要先激活評論系統才有效果，如果嫌麻煩不想使用，也可以不處理，后面在菜單欄里去掉這一選項即可。
最后，新建友情鏈接 friends 頁，friends 頁是用來展示友情鏈接信息的頁面，命令如下：
hexo new page "friends"
編輯新建的頁面文件 /source/friends/index.md，寫入以下內容：
---
title: friends
date: 2020-05-04 10:40:17
type: "friends"
layout: "friends"
---
同時，在你的博客 source 目錄下新建 _data 目錄，在 _data 目錄中新建 friends.json 文件，文件內容如下所示：
[{
"avatar": "https://mfrank2016.github.io/breeze-blog/medias/avatar.jpg",
"name": "清風",
"introduction": "技術博主，文章還不錯",
"url": "https://mfrank2016.github.io/breeze-blog/",
"title": "前去學習"
}, {
"avatar": "https://draveness.me/images/draven-logo.png",
"name": "真沒什么邏輯",
"introduction": "面向信仰編程",
"url": "https://draveness.me/",
"title": "前去學習"
}]
這里可以根據需要進行刪減，當然，要看效果可以先這樣設置，之后再來修改也不遲。
新建完頁面后，我們再重新生成一下博客靜態頁，然后運行一下項目，便能看到效果了。這里標簽頁和分類頁都只會展示現有博客的標簽和分類數據，所以如果還沒有文章設置標題或者分類，那么對應頁面是沒有數據的。要想看到效果，就得先寫幾篇文章。
菜單導航配置
配置基本菜單導航的名稱、路徑url和圖標icon.
1.菜單導航名稱可以是中文也可以是英文(如：Index或主頁) 2.圖標icon 可以在Font Awesome 中查找
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book
二級菜單配置方法
如果你需要二級菜單則可以在原基本菜單導航的基礎上如下操作
1.在需要添加二級菜單的一級菜單下添加children關鍵字(如:About菜單下添加children)
2.在children下創建二級菜單的 名稱name,路徑url和圖標icon.
3.注意每個二級菜單模塊前要加 -.
4.注意縮進格式
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle-o
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image
執行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中對應位置看到你用emoji語法寫的表情了。
代碼高亮
由於 Hexo 自帶的代碼高亮主題顯示不好看，所以主題中使用到了 hexo-prism-plugin 的 Hexo 插件來做代碼高亮，安裝命令如下：
npm i -S hexo-prism-plugin
然后，修改 Hexo 根目錄下 _config.yml 文件中 highlight.enable 的值為 false，並新增 prism 插件相關的配置，主要配置如下：
highlight:
enable: false
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
搜索
主題中還使用到了 hexo-generator-search 的 Hexo 插件來做內容搜索，安裝命令如下：
npm install hexo-generator-search --save
在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：
search:
path: search.xml
field: post
效果圖如下：
中文鏈接轉拼音（建議安裝）
如果你的文章名稱是中文的，那么 Hexo 默認生成的永久鏈接也會有中文，這樣不利於 SEO，且 gitment 評論對中文鏈接也不支持。我們可以用 hexo-permalink-pinyin Hexo 插件使在生成文章時生成中文拼音的永久鏈接。
安裝命令如下：
npm i hexo-permalink-pinyin --save
在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：
permalink_pinyin:
enable: true
separator: '-' # default: '-'
文章字數統計插件（建議安裝）
如果你想要在文章中顯示文章字數、閱讀時長信息，可以安裝 hexo-wordcount插件。
安裝命令如下：
npm i --save hexo-wordcount
然后只需在本主題下的 _config.yml 文件中，將各個文章字數相關的配置激活即可：
postInfo:
date: true
update: true
wordCount: true # 設置文章字數統計為 true.
totalCount: true # 設置站點文章總字數統計為 true.
min2read: true # 閱讀時長.
readCount: true # 閱讀次數.
添加emoji表情支持（可選的）
Matery 主題新增了對emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件來支持 emoji表情的生成，把對應的markdown emoji語法（::,例如：:smile:）轉變成會跳躍的emoji表情，安裝命令如下：
npm install hexo-filter-github-emojis --save
在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
添加 RSS 訂閱支持（可選的）
主題中還使用到了 hexo-generator-feed 的 Hexo 插件來做 RSS，安裝命令如下：
npm install hexo-generator-feed --save
在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
執行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夾中即可看到 atom.xml 文件，說明你已經安裝成功了。
添加 DaoVoice 在線聊天功能（可選的）
前往 DaoVoice 官網注冊並且獲取 app_id，並將 app_id 填入主題的 _config.yml 文件中。
添加 Tidio 在線聊天功能（可選的）
前往 Tidio 官網注冊並且獲取 Public Key，並將 Public Key 填入主題的 _config.yml 文件中。
修改社交鏈接
在主題的 _config.yml 文件中，默認支持 QQ、GitHub 和郵箱等的配置，你可以在主題文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交鏈接地址，增加鏈接可參考如下代碼：
<% if (theme.socialLink.github) { %>
<a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="訪問我的GitHub" data-position="top" data-delay="50">
<i class="fab fa-github"></i>
</a>
<% } %>
其中，社交圖標（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交圖標的標識，供你參考：
- Facebook:
fab fa-facebook - Twitter:
fab fa-twitter - Google-plus:
fab fa-google-plus - Linkedin:
fab fa-linkedin - Tumblr:
fab fa-tumblr - Medium:
fab fa-medium - Slack:
fab fa-slack - Sina Weibo:
fab fa-weibo - Wechat:
fab fa-weixin - QQ:
fab fa-qq - Zhihu:
fab fa-zhihu
修改打賞的二維碼圖片
在主題文件的 source/medias/reward 文件中，可以替換成你的微信和支付寶的打賞二維碼圖片。
配置音樂播放器（可選的）
要支持音樂播放，在主題的 _config.yml 配置文件中激活music配置即可：
# 是否在首頁顯示音樂
music:
enable: true
title: #非吸底模式有效
enable: true
show: 聽聽音樂
server: netease #require music platform: netease, tencent, kugou, xiami, baidu
type: playlist #require song, playlist, album, search, artist
id: 503838841 #require song id / playlist id / album id / search keyword
fixed: false # 開啟吸底模式
autoplay: false # 是否自動播放
theme: '#42b983'
loop: 'all' # 音頻循環播放, 可選值: 'all', 'one', 'none'
order: 'random' # 音頻循環順序, 可選值: 'list', 'random'
preload: 'auto' # 預加載，可選值: 'none', 'metadata', 'auto'
volume: 0.7 # 默認音量，請注意播放器會記憶用戶設置，用戶手動設置音量后默認音量即失效
listFolded: true # 列表默認折疊
server可選netease（網易雲音樂），tencent（QQ音樂），kugou（酷狗音樂），xiami（蝦米音樂），
baidu（百度音樂）。
type可選song（歌曲），playlist（歌單），album（專輯），search（搜索關鍵字），artist（歌手）
id獲取示例: 打開手機版網易雲音樂，選擇喜歡的歌單，然后點擊分享
我這里隨便選了一個歌單，分享后的文字長這樣：
分享真咸魚餅干的歌單《青年節：致逐夢人，有志者事竟成》http://music.163.com/playlist/4965675848/1548006936/?userid=120124365 (@網易雲音樂)
4965675848 這就是歌單的id，文件里默認設置的歌單其實也還不錯，歌挺多的，所以如果沒什么特殊要求，使用默認歌單也不錯。
⚠️這里需要注意一點，如果你想要替換成自己的歌單時，會發現，后續歌單的更新是不會影響到它的，這也是我搗鼓半天才發現的，音樂插件使用的是 Aplayer 播放器，在 https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js 這個文件里可以看到，數據是從這個接口獲取的：https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r，猜測服務端是直接將獲取到的榜單列表寫進里數據庫，但后續不會進行更新，所以導致無論多少次刷新，都只能獲取第一次取到的數據。
所以有兩種解決辦法，第一種是創建新歌單，然后一次性添加足夠多的歌，然后在配置文件中替換成你的歌單id，另一種是自己寫一個網易雲音樂歌單解析接口，來獲取網易雲音樂數據。我比較懶，所以選擇了第一種方案，23333，還在充實歌單中。
文章 Front-matter 介紹
Front-matter 選項詳解
Front-matter 選項中的所有內容均為非必填的。但建議至少填寫 title 和 date 的值。
| 配置選項 | 默認值 | 描述 |
|---|---|---|
| title | Markdown 的文件標題 |
文章標題，強烈建議填寫此選項 |
| date | 文件創建時的日期時間 | 發布時間，強烈建議填寫此選項，且最好保證全局唯一 |
| author | 根 _config.yml 中的 author |
文章作者 |
| img | featureImages 中的某個值 |
文章特征圖，推薦使用圖床(騰訊雲、七牛雲、又拍雲等)來做圖片的路徑.如: http://xxx.com/xxx.jpg |
| top | true |
推薦文章（文章是否置頂），如果 top 值為 true，則會作為首頁推薦文章 |
| cover | false |
v1.0.2版本新增，表示該文章是否需要加入到首頁輪播封面中 |
| coverImg | 無 | v1.0.2版本新增，表示該文章在首頁輪播封面需要顯示的圖片路徑，如果沒有，則默認使用文章的特色圖片 |
| password | 無 | 文章閱讀密碼，如果要對文章設置閱讀驗證密碼的話，就可以設置 password 的值，該值必須是用 SHA256 加密后的密碼，防止被他人識破。前提是在主題的 config.yml 中激活了 verifyPassword 選項 |
| toc | true |
是否開啟 TOC，可以針對某篇文章單獨關閉 TOC 的功能。前提是在主題的 config.yml 中激活了 toc 選項 |
| mathjax | false |
是否開啟數學公式支持 ，本文章是否開啟 mathjax，且需要在主題的 _config.yml 文件中也需要開啟才行 |
| summary | 無 | 文章摘要，自定義的文章摘要內容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內容作為摘要 |
| categories | 無 | 文章分類，本主題的分類表示宏觀上大的分類，只建議一篇文章一個分類 |
| tags | 無 | 文章標簽，一篇文章可以多個標簽 |
| keywords | 文章標題 | 文章關鍵字，SEO 時需要 |
| reprintPolicy | cc_by | 文章轉載規則， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一個 |
注意:
- 如果
img屬性不填寫的話，文章特色圖會根據文章標題的hashcode的值取余，然后選取主題中對應的特色圖片，從而達到讓所有文章都的特色圖各有特色。date的值盡量保證每篇文章是唯一的，因為本主題中Gitalk和Gitment識別id是通過date的值來作為唯一標識的。- 如果要對文章設置閱讀驗證密碼的功能，不僅要在 Front-matter 中設置采用了 SHA256 加密的 password 的值，還需要在主題的
_config.yml中激活了配置。有些在線的 SHA256 加密的地址，可供你使用：開源中國在線工具、chahuo、站長工具。- 您可以在文章md文件的 front-matter 中指定 reprintPolicy 來給單個文章配置轉載規則
以下為文章的 Front-matter 示例。
最簡示例
---
title: typora-vue-theme主題介紹
date: 2018-09-07 09:25:00
---
最全示例
---
title: typora-vue-theme主題介紹
date: 2018-09-07 09:25:00
author: 趙奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 這是你自定義的文章摘要內容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內容作為摘要
categories: Markdown
tags:
- Typora
- Markdown
---
上述大部分內容都來自主題說明文檔，只是添加了一下我覺得需要注意的地方。這里還有一些沒有說到到的屬性，這配置文件里都有詳細的介紹，確實不需要過多解釋。
最后再介紹一下我折騰比較久的插件，valine 評價插件。
Valine 評價插件
插件主頁：https://valine.js.org/ ，上面有詳細的介紹，可以查看這里，注冊后，驗證郵箱，綁定手機號，然后新建一個應用，獲取到對應的 AppId 和 AppKey，然后寫回到主題文件下到 _config.yml 文件里，但是要注意一點，不要直接使用國內版進行注冊，而要用國際版，否則無法申請二級域名。
valine:
enable: true
appId: XXX
appKey: XXX
notify: true
verify: false
visitor: true
avatar: 'retro' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
pageSize: 10
placeholder: 'Comment here' # Comment Box placeholder
background: /medias/comment_bg.png
最新版的 Valine 已經移除了郵件通知功能。如果沒有郵件通知，很可能別人評價之后，你卻毫不知情，后續回復對方也收不到。因此，需要再配置一個插件來實現， ++https://github.com/zhaojun1998/Valine-Admin++ 。在配置這個插件之前，需要確保 Valine 可以正常工作，可以自己給自己評論一下進行測試。
配置好之后，別人在你的文章下評論后你便能收到郵件通知了。
至此，Matery 主題就搭建配置完成了，接下來就只需要安心寫博客了～
