訪問博客查看 本文 最新內(nèi)容，排版更美觀ヾ(?ω?`)o 如有錯誤歡迎指出~
Hello My World 的姊妹篇。
本站基于 Hexo + GitHub 搭建，采用 Fluid 主題。
這篇文章記錄了博客的配置歷程，包括：主題配置、域名配置、功能擴展。
主題配置
本站采用的是 Fluid 主題，以下的配置在路徑 hewei2001/_config.fluid.yml 中可以實現(xiàn)。該文件的介紹參見 主題配置指南 。以下僅介紹部分較為特殊的配置，其他內(nèi)容可在指南中找到。
代碼高亮
lib: 選擇生成高亮的庫，可選項有 highlightjs 和 prismjs，對應下面兩組配置。
這里選擇 highlightjs，將 style 修改為 Night Owl 風格，將 bg_color 修改為 true 以適配暗色代碼框。
其他嘗試過的主題還有 Atom One Dark Reasonable、Vs 2015、Github Dark Dimmed，都是不錯的暗色風格。
Mac 風格代碼塊
在 GitHub 的 Issue 發(fā)現(xiàn)有人提供了自定義樣式實現(xiàn) Mac 風格代碼塊的方法，遂嘗試之。首先在路徑 hewei2001/themes/fluid/source/css 下新建文件 mac.styl，復制以下代碼：
.highlight
background: #011627
border-radius: 5px
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
padding-top: 30px
&::before
background: #fc625d
border-radius: 50%
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
content: ' '
height: 12px
left: 12px
margin-top: -20px
position: absolute
width: 12px
然后在路徑 hewei2001/_config.fluid.yml 中找到 custom_css 選項，加入 /css/mac.css 代碼，注意這里后綴名依然使用 .css，不然無法識別！
行內(nèi)代碼顏色
默認的行內(nèi)代碼顏色和正文顏色是繼承關系，且行內(nèi)代碼背景色也不明顯，因此視覺上難以區(qū)分。但是配置文件中又沒有對應選項可以修改，查閱 GitHub 的 Issue 發(fā)現(xiàn)，有人曾提供過一個解決方案。
打開路徑 hewei2001/themes/fluid/source/css/_pages/_base 下的 base.styl 文件，找到 code 配置項，修改顏色為 #E05B35。
評論功能
Valine 是國內(nèi)的一款極簡風格的評論軟件，也是 Fluid 支持的評論軟件之一。在 comment 中選擇 valine，之后找到相應的配置區(qū)域進行如下操作：
進入官網(wǎng) LeanCloud 完成注冊，然后在控制臺創(chuàng)建一個項目 Blog.Comments 后，獲取密鑰（App ID 和 App Key），在對應位置填入。其他內(nèi)容選項可以在官網(wǎng)找到說明。
訪問人數(shù)統(tǒng)計
Fluid 主題提供兩種網(wǎng)站的 PV、UV 統(tǒng)計數(shù)來源：LeanCloud 與 不蒜子。不蒜子不需要申請賬號，直接開啟即可，但有時候會響應緩慢拖慢整個頁面加載。LeanCloud 使用前需要申請賬號，由于前面使用評論功能時已經(jīng)注冊，我們這邊直接使用就行。
在控制臺創(chuàng)建一個項目 Blog.Counter 后，獲取密鑰（App ID 和 App Key）和大陸服務器地址，填入 web_analytics 配置項中 leancloud API 相關參數(shù)。
內(nèi)置 Tag 插件
Fluid 內(nèi)置了一些 Tag 插件，用于實現(xiàn) Markdown 不容易生成的樣式，以下僅列出兩種常用的使用語法，添加在 md 文件中：
- 腳注
正文[^1]
## 參考
[^1]: 參考資料1
[^2]: 參考資料2
- Tag 便簽
在 markdown 中加入如下的代碼來使用便簽：
{% note success %}
文字 或者 `Markdown` 均可
可選便簽：primary/secondary/success/danger/warning/info/light
{% endnote %}
或者使用 HTML 形式：
<p class="note note-primary">標簽</p>
Latex 數(shù)學公式
post:
math:
enable: true
specific: false
engine: mathjax 或 katex
其中 specific 建議開啟：當為 true 時，只有在文章 Front-matter 里指定 math: true 才會在文章頁啟動公式轉(zhuǎn)換，以便在頁面不包含公式時提高加載速度。
由于 Hexo 默認的 Markdown 渲染器不支持復雜公式，所以必須更換渲染器。
$ npm uninstall hexo-renderer-marked --save # 卸載原渲染器
$ npm install hexo-renderer-kramed --save # mathjax
$ npm install @upupming/hexo-renderer-markdown-it-plus --save # katex
這里選擇 MathJax，是因為對 LaTeX 語法支持全面，且右鍵點擊公式有擴展功能菜單。
但是 Hexo 中默認會將下劃線解析為斜體，使得用 MathJax 渲染公式下標有時會出錯，需要找到路徑 node_modules\kramed\lib\rules\inline.js，修改：
//第11行：取消對 \ 和 {} 的轉(zhuǎn)義 escape
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,
//第20行：
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
Tips1：在使用數(shù)學公式時，應當避免使用兩個連續(xù)的
{}，否則會被 Hexo 解釋為特殊標簽，從而報錯。Tips2：Hexo 對公式的支持不如 Typora 好，譬如多行公式需要用
\begin{aligned} ... \end{aligned}，換行符\\和定位符&。Tips3：Hexo 中變量的上下標只能用 LaTeX 實現(xiàn)而不能用 Enhanced Markdown 語法。
域名配置
部署到 Coding Pages
Coding 可以算是國內(nèi)的 GitHub，盡管并不是特別流行，但部署到上面可以使國內(nèi)訪問速度更快，還可以提交百度收錄（GitHub 禁止了百度的爬取）。
注意：由于 Coding 在前段時間改版后，原有的個人版 Pages 下架，以企業(yè)版的形式重新開放，新版的靜態(tài)網(wǎng)站服務需調(diào)用騰訊云對象存儲 COS、內(nèi)容分發(fā)網(wǎng)絡 CDN、SSL 證書產(chǎn)品等資源，其中 COS 和 CDN 采用用量計費模式。故本博客暫不采用 Coding 部署。
添加百度谷歌收錄
如果僅部署在 GitHub Pages，是無法被百度收錄的，因為 GitHub 禁止了百度爬蟲，最常見的解決辦法是雙線部署到 Coding Pages 和 GitHub Pages。
本站暫不考慮。
自定義域名
有了 GitHub Pages 服務器自帶的域名后，還可以到阿里云再購買一個自定義域名，然后將域名解析到博客的域名，具體過程如下：
- 注冊阿里云，實名認證后在購買下 hwcoder.top 域名。
- 打開域名控制臺，進入域名解析列表，進入新買的域名，添加兩條記錄：
- 主機記錄：@；記錄類型：A；記錄值為 GitHub Pages 域名的 IP。
- 主機記錄：www；記錄類型：CNAME；記錄值為 GitHub Pages 域名。
- 在路徑
hewei2001/source下新建一個CNAME文件，里面填寫我們買的域名，注意文件不需要任何后綴。 - GitHub 中打開對應倉庫，在 Setting 中找到 Pages，添加 Custom Domain 為新買的域名，旁邊的一個
Enforce HTTPS勾選后我們的網(wǎng)站就變?yōu)?https://hwcoder.top。 - 路徑
hewei2001/_config.yml的#URL部分，更改為新域名。
以上操作后就可以在自定義的域名訪問博客站點了，如果顯示的內(nèi)容與本地服務器查看內(nèi)容不同，清除瀏覽器緩存后即可解決。如果不能解決，檢查是否以上步驟有錯。
其他功能擴展
以下配置是在 Fluid 主題中不具有的功能，通過各種插件實現(xiàn)。
備份博客到 GitHub
由于 Hexo 博客是靜態(tài)托管的，所有的原始數(shù)據(jù)都保存在本地，如果哪一天電腦壞了，或者是誤刪了本地數(shù)據(jù)就很危險了。
GitHub 上可以找到一個 hexo-git-backup 插件，但似乎已經(jīng)不再更新了，僅支持 Hexo 3.x.x 版本，嘗試后放棄。
壓縮靜態(tài)資源
博客中有大量 HTML、CSS、JS 文件，這些文件為了閱讀方便會加入許多回車和空行，但在頁面解析時其實會浪費部分時間，此外如果有許多插圖，也會拖慢網(wǎng)頁加載，并占據(jù) GitHub 倉庫的存儲空間。
目前有關插件有 gulp、hexo-neat、hexo-all-minifier。推薦采用集成度比較高的 hexo-all-minifier 來實現(xiàn)，由于在安裝依賴包過程報錯，本站最終采用了 hexo-neat。
$ npm install hexo-all-minifier --save # 出現(xiàn) npm ERR! code ELIFECYCLE 錯誤
$ npm install hexo-neat --save # 換成這個后成功安裝
之后在配置文件 hewei2001/_config.yml 中增加如下內(nèi)容就行：
# hexo-neat
## Docs: https://github.com/rozbo/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'
