Hexo+Github: 個人部落格網站搭建完全教程(看這篇就夠了)

阿新 • • 發佈：2019-08-28

本篇教程首次釋出在個人部落格：sunhwee.com，想要獲得最佳閱讀體驗，歡迎前往，建議用電腦檢視教程文件。

# 閱讀須知

注意，這篇文章篇幅較長，主要針對新手，每一步很詳細，所以可能會顯得比較囉嗦，建議基礎比較好小夥伴根據右側目錄選擇自己感興趣的部分跳著看，不要文章沒看，上來先噴一下！謝謝( ⊙ o ⊙ )。
教程內容隨意複製使用，引用的話請加一個參考連結，謝謝！

# 部落格開源

倒騰了一兩週總算把個人部落格網站完善了，目前這個版本使用應該是夠了，當然還有一些優化項和功能增加後續在慢慢更新，為了回饋開源，今天準備把我自己修改完善的blog網站原始碼開源。這不是生成後的網頁檔案，是您可以直接使用的原始碼，您只需要把部落格相關資訊換成您自己的就可以部署了，對於新手或者不懂程式設計的小夥伴來說，簡直是福音，極大簡化了您構建部落格的工作量和複雜度，每個人都可以下載並修改成自己喜歡樣式！如果你有修改想法，歡迎PR！最後，我們還是給這個開源小專案取個名字吧，就叫hexo-blog-fly吧，怎麼樣？<<<<<原始碼下載>>>>>

本部落格基於Hexo框架搭建，用到hexo-theme-matery主題,並在此基礎之上做了很多修改，修復了一些bug，增加了一些新的特性和功能，部落格地址：https://shw2018.github.io，部落格演示：sunhwee.com。

簡單使用方法：

star 本專案倉庫^o^
安裝Git, 安裝nodeJS
你可以直接fork一份原始碼到你的倉庫，clone到本地
在本地部落格倉庫執行npm i命令安裝依賴包
修改配置資訊，改成自己的資訊
執行命令hexo clean（清除生成檔案），hexo g（生成網頁）， hexo s（本地預覽），hexo d（部署）

更多詳情教程，強烈推薦看我寫的：Hexo+Github部落格搭建完全教程

有什麼問題可以在文章最後評論區留言和討論，當然，歡迎文章最後打賞投幣，請博主一杯冰闊樂，笑～

最後，如果專案和教程對你有所幫助或者你看見了還算比較喜歡，歡迎給我github專案倉庫點個star，謝謝您！

前言

去年在部落格園註冊了自己的第一個部落格，當時初衷就是想拿來作為自己的線上筆記本，做做學習記錄，分享一些學到的東西，使用第三方提供的部落格服務其實也挺方便，現在市面上提供類似服務的部落格網站也很多，如CSDN，部落格園，簡書等平臺，可以直接在上面發表，使用者互動做的好，寫的文章百度也能搜尋的到。但是缺點是比較不自由，會受到平臺的各種限制和噁心的廣告，個性化不足。而自己購買域名和伺服器，搭建部落格的成本實在是太高了，不光是說這些購買成本，單單是花力氣去自己搭這麼一個網站，還要定期的維護它，對於我們大多數人來說，也是沒有這樣的精力和時間。那麼，我們能不能自己定製一個自己喜歡的個性化部落格，同時也不用付出太高的成本啦？

這就引出了第三種選擇，基於開源框架搭建部落格，然後直接在github page平臺上託管我們的部落格。這樣就可以安心的來寫作，又不需要定期維護，基於這個想法，今年8月初的時候開始搭建第一個屬於自己的獨立部落格，前後斷續弄了近一週，到現在稍微有點模樣了。我想可能有很多小夥伴應該也想過搭建一個自己的部落格，當然，網上也有一堆詳細教程。寫這篇部落格的目的大概有兩個，第一個是當做自己的搭建記錄，方便以後自己隨時檢視提示修改，第二個是稍稍總結一下具體的搭建步驟以及一些支援個性化定製的部落格原始碼修改的教程，稍稍分享一下這些修改經驗，當然，更多的一些個性化操作需要你自己以後在這個基礎上慢慢去摸索，有些寫的不太好的地方還希望看到的小夥伴多多包涵。

部落格初步的頁面效果可以看一下我的部落格：sunhwee.com，歡迎大家支援。

本部落格基於Hexo，所以首先要了解一下我們搭建部落格所要用到的框架。Hexo是高效的靜態網站生成框架，它基於Node.js，快速，簡單且功能強大，是搭建部落格的首選框架。大家可以進入hexo官網進行詳細檢視，因為Hexo的建立者是臺灣人，對中文的支援很友好，可以選擇中文進行檢視。通過Hexo，你可以直接使用Markdown語法來撰寫部落格。相信很多小夥伴寫工程都寫過README.md檔案吧，對，就是這個格式的！寫完後只需兩三條命令即可將生成的網頁上傳到github或者coding等程式碼管理託管平臺，然後別人就可以瀏覽你的部落格網頁啦。是不是很簡單？你無需關心網頁原始碼的具體生成細節，只需要用心寫好你的部落格文章內容就行了。

簡單總結：Hexo, 產品成熟，使用簡單，功能強大，有豐富的各種外掛資源；但，像釋出後臺、站內搜尋，評論系統類似訴求，雖然有對應的工具，但也需要自己折騰下，後續我們一步一步介紹。

教程大致分三個部分，

第一部分：hexo的初級搭建還有部署到github page上，以及個人域名的繫結。
第二部分：hexo的基本配置，更換主題，實現多終端工作，以及在coding page部署實現國內外分流
第三部分：hexo新增各種功能，包括搜尋的SEO，閱讀量統計，訪問量統計和評論系統等。

# 第一部分搭建

hexo的初級搭建還有部署到github page上，以及個人域名的繫結。

Hexo搭建步驟

1.安裝Git
2.安裝Node.js
3.安裝Hexo
4.GitHub建立個人倉庫
5.生成SSH新增到GitHub
6.將hexo部署到GitHub
7.設定個人域名
8.釋出文章

## 1. 安裝Git

為了把本地的網頁檔案上傳到github上面去，需要用到工具———Git[下載地址]。Git是目前世界上最先進的分散式版本控制系統，可以有效、高速的處理從很小到非常大的專案版本管理。Git非常強大，建議每個人都去了解一下。廖雪峰老師的Git教程寫的非常好，大家可以看一下。Git教程

windows：到git官網上下載.exe檔案,Download git,安裝選項還是全部預設，只不過最後一步新增路徑時選擇Use Git from the Windows Command Prompt，這樣我們就可以直接在命令提示符裡開啟git了。

順便說一下，windows在git安裝完後，就可以直接使用git bash來敲命令行了，不用自帶的cmd，cmd有點難用。

linux：對linux來說實在是太簡單了，因為最早的git就是在linux上編寫的，只需要一行程式碼

sudo apt-get install git

安裝完成後在命令提示符中輸入git --version來檢視一下版本驗證是否安裝成功。

## 2. 安裝nodejs

Hexo是基於node.js編寫的，所以需要安裝一下node.js和裡面的npm工具。

windows：下載穩定版或者最新版都可以Node.js，安裝選項全部預設，一路點選Next。
最後安裝好之後，按Win+R開啟命令提示符，輸入node -v和npm -v，如果出現版本號，那麼就安裝成功了。

linux：命令列安裝：

sudo apt-get install nodejs
sudo apt-get install npm

不過不推薦命令列安裝，有時候有問題，建議直接到官網去下載編譯好的壓縮檔案，如下所示:

然後解壓到你指定的資料夾即可，比如我解壓到我係統的/home/shw/MySoftwares目錄下了，如圖:

注意本壓縮包是.tar.xz格式的，需要兩次解壓

配置一下環境變數

sudo vim /etc/profile

複製下面兩行到剛開啟的profile檔案最底部(注意node的安裝地址/home/shw/MySoftwares/node-v12.8.0-linux-x64換成自己的)：

export NODE_HOME=/home/shw/MySoftwares/node-v12.8.0-linux-x64
export PATH=$PATH:$NODE_HOME/bin

儲存後退出，再執行下面命令將環境變數生效：

source /etc/profile

將目錄軟連結到全域性環境下（命令後面的/usr/local/bin/node是固定的）

sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/node /usr/local/bin/node
sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/npm /usr/local/bin/npm

這樣安裝好了以後使用npm安裝的包(比如：ionic serve)，使用包的命令時可能會提示找不到命令，沒關係，在使用者目錄下終端執行下面命令(固定寫法)：

echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc

這樣我們在所有使用者下，都可以使用npm，也可以使用npm安裝的包的命令。成功的將nodejs安裝並配置到全域性環境下。

安裝完後，開啟命令列終端，輸入:

node -v
npm -v

檢查一下有沒有安裝成功

新增國內映象源

如果沒有梯子的話，可以使用阿里的國內映象進行加速。

npm config set registry https://registry.npm.taobao.org

## 3. 安裝Hexo

前面git和nodejs安裝好後，就可以安裝hexo了，你可以先建立一個資料夾MyBlog，用來存放自己的部落格檔案，然後cd到這個資料夾下（或者在這個資料夾下直接右鍵git bash開啟）。

比如我的部落格檔案都存放在D:\Study\MyBlog目錄下。

在該目錄下右鍵點選Git Bash Here，開啟git的控制檯視窗，以後我們所有的操作都在git控制檯進行，就不用Windows自帶的cmd了。

定位到該目錄下，輸入npm install -g hexo-cli安裝Hexo。可能會有幾個報錯，無視它就行。

npm install -g hexo-cli

安裝完後輸入hexo -v驗證是否安裝成功。

至此hexo就安裝完了。

接下來初始化一下hexo,即初始化我們的網站，輸入hexo init初始化資料夾

hexo init MyBlog

這個MyBlog可以自己取什麼名字都行，然後，接著輸入npm install安裝必備的元件。

cd MyBlog      //進入這個MyBlog資料夾
npm install

新建完成後，指定資料夾MyBlog目錄下有：

node_modules: 依賴包
public：存放生成的頁面
scaffolds：生成文章的一些模板
source：用來存放你的文章
themes：主題**
_config.yml: 部落格的配置檔案**

這樣本地的網站配置也弄好啦，輸入hexo g生成靜態網頁，然後輸入hexo s開啟本地伺服器，

hexo g
hexo server(或者簡寫:hexo s）)

然後瀏覽器開啟http://localhost:4000/，就可以看到我們的部落格啦，效果如下：

按ctrl+c關閉本地伺服器。

## 4. 註冊Github賬號建立個人倉庫

接下來就去註冊一個github賬號，用來存放我們的網站。大多數小夥伴應該都有了吧，作為一個合格的程式猿（媛）還是要有一個的。

開啟https://github.com/，新建一個專案倉庫New repository，如下所示：

然後如下圖所示，輸入自己的專案名字，後面一定要加.github.io字尾，README初始化也要勾上。

要建立一個和你使用者名稱相同的倉庫，後面加.http://github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是http://xxxx.github.io，其中xxx就是你註冊GitHub的使用者名稱。例如我的：http://shw2018.github.io

## 5. 生成SSH新增到GitHub

生成SSH新增到GitHub，連線Github與本地。
右鍵開啟git bash，然後輸入下面命令：

git config --global user.name "yourname"
git config --global user.email "youremail"

這裡的yourname輸入你的GitHub使用者名稱，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對應它的賬戶。例如我的：

git config --global user.name "shw2018"
git config --global user.email "[email protected]"

可以用以下兩條，檢查一下你有沒有輸對

git config user.name
git config user.email

然後建立SSH,一路回車

ssh，簡單來講，就是一個祕鑰，其中，id_rsa是你這臺電腦的私人祕鑰，不能給別人看的，id_rsa.pub是公共祕鑰，可以隨便給別人看。把這個公鑰放在GitHub上，這樣當你連結GitHub自己的賬戶時，它就會根據公鑰匹配你的私鑰，當能夠相互匹配時，才能夠順利的通過git上傳你的檔案到GitHub上。

ssh-keygen -t rsa -C "youremail"

這個時候它會告訴你已經生成了.ssh的資料夾。在你的電腦中找到這個資料夾。或者git bash中輸入

cat ~/.ssh/id_rsa.pub

將輸出的內容複製到框中，點選確定儲存。

開啟github，在頭像下面點選settings，再點選SSH and GPG keys，新建一個SSH，名字隨便取一個都可以，把你的id_rsa.pub裡面的資訊複製進去。如圖：

在git bash輸入ssh -T [email protected]，如果如下圖所示，出現你的使用者名稱，那就成功了。

## 6. 將hexo部署到GitHub

這一步，我們就可以將hexo和GitHub關聯起來，也就是將hexo生成的文章部署到GitHub上，開啟部落格根目錄下的_config.yml檔案，這是部落格的配置檔案，在這裡你可以修改與部落格配置相關的各種資訊。

修改最後一行的配置：

deploy:
  type: git
  repository: https://github.com/shw2018/shw2018.github.io
  branch: master

repository修改為你自己的github專案地址即可，就是部署時，告訴工具，將生成網頁通過git方式上傳到你對應的連結倉庫中。

這個時候需要先安裝deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然後

hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的東西，也可以不加。 hexo generate顧名思義，生成靜態文章，可以用 hexo g縮寫，hexo deploy部署文章，可以用hexo d縮寫

注意deploy時可能要你輸入username和password。

得到下圖就說明部署成功了，過一會兒就可以在http://yourname.github.io 這個網站看到你的部落格了！！

## 7. 設定個人域名

現在你的個人網站的地址是yourname.github.io，如果覺得這個網址逼格不太夠，這就需要你設定個人域名了。但是需要花錢。

不過，這一步不是必要的，如果目前還不想買域名可以先跳過，繼續看後面的，以後想買域名了在還看這塊

首先你得購買一個專屬域名，xx雲都能買，看你個人喜好了。

這篇以騰訊云為例，騰訊雲官網購買：

然後實名認證後進入騰訊雲控制檯，點雲解析進去，找到你剛買的域名，點進去新增兩條解析記錄，如下圖所示：

然後開啟你的github部落格專案，點選settings，拉到下面Custom domain處，填上你自己的域名，儲存：

這時候你的專案根目錄應該會出現一個名為CNAME的檔案了。如果沒有的話，開啟你本地部落格/source目錄，我的是D:\Study\MyBlog\source，新建CNAME檔案，注意沒有後綴。然後在裡面寫上你的域名，儲存。最後執行hexo g、hexo d上傳到github。

過不了多久，再開啟你的瀏覽器，輸入你自己的專屬域名，就可以看到搭建的網站啦！

## 8. 寫文章、釋出文章

首先在部落格根目錄下右鍵開啟git bash，安裝一個擴充套件npm i hexo-deployer-git。

然後輸入hexo new post "article title"，新建一篇文章。

然後開啟D:\Study\MyBlog\source\_posts的目錄，可以發現下面多了一個資料夾和一個.md檔案，一個用來存放你的圖片等資料，另一個就是你的文章檔案啦。
你可以會直接在vscode裡面編寫markdown檔案，可以實時預覽，也可以用用其他編輯md檔案的軟體的工具編寫。
編寫完markdown檔案後，根目錄下輸入hexo g生成靜態網頁，然後輸入hexo s可以本地預覽效果，最後輸入hexo d上傳到github上。這時開啟你的github.io主頁就能看到釋出的文章啦。

到這兒基本第一部分就完成了，已經完整搭建起一個比較簡陋的個人部落格了，接下來我們就可以對我們的部落格進行個性化定製了。

# 第二部分定製

我們要定製自己的部落格的話，首先就要來了解一下Hexo部落格的一些目錄和檔案的作用，以及如何平滑更換漂亮的主題模板並加入自己的定製原始碼實現個性化定製

1. Hexo相關目錄檔案

### 1.1 部落格目錄構成介紹

從上圖可以看出，部落格的目錄結構如下：

- node_modules
- public
- scaffolds
- source
    - _data
    - _posts
    - about
    - archives
    - categories
    - friends
    - tags
- themes

node_modules是node.js各種庫的目錄，public是生成的網頁檔案目錄，scaffolds裡面就三個檔案，儲存著新文章和新頁面的初始設定，source是我們最常用到的一個目錄，裡面存放著文章、各類頁面、影象等檔案，themes存放著主題檔案，一般也用不到。

我們平時寫文章只需要關注source/_posts這個資料夾就行了。

### 1.2 hexo基本配置

在檔案根目錄下的_config.yml，就是整個hexo框架的配置檔案了。可以在裡面修改大部分的配置。詳細可參考官方的配置描述。

#### 1.2.1 網站

引數描述title網站標題subtitle網站副標題description網站描述author您的名字language網站使用的語言timezone網站時區。Hexo 預設使用您電腦的時區。時區列表。比如說：America/New_York, Japan, 和 UTC 。

其中，description主要用於SEO，告訴搜尋引擎一個關於您站點的簡單描述，通常建議在其中包含您網站的關鍵詞。author引數用於主題顯示文章的作者。

#### 1.2.2 網址

引數描述url網址root網站根目錄 permalink文章的永久連結格式permalink_defaults永久連結中各部分的預設值

在這裡，你需要把url改成你的網站域名。

permalink，也就是你生成某個文章時的那個連結格式。

比如我新建一個文章叫temp.md，那麼這個時候他自動生成的地址就是http://yoursite.com/2018/09/05/temp。

以下是官方給出的示例，關於連結的變數還有很多，需要的可以去官網上查詢永久連結。

引數結果:year/:month/:day/:title/2019/08/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo/bar/hello-world

再往下翻，中間這些都預設就好了。

theme: landscap

theme就是選擇什麼主題，也就是在themes這個資料夾下，在官網上有很多個主題，預設給你安裝的是lanscape這個主題。當你需要更換主題時，在官網上下載，把主題的檔案放在themes資料夾下，再修改這個主題引數就可以了。

#### 1.2.3 Front-matter

Front-matter 是md檔案最上方以 ---分隔的區域，用於指定個別檔案的變數，舉例來說：

title: Hexo+Github部落格搭建記錄
date: 2019-08-10 21:44:44

下是預先定義的引數，您可在模板中使用這些引數值並加以利用。

引數描述layout佈局title標題date建立日期updated更新日期comments開啟文章的評論功能tags標籤（不適用於分頁）categories分類（不適用於分頁）permalink覆蓋文章網址

其中，分類和標籤需要區別一下，分類具有順序性和層次性，也就是說Foo，Bar不等於Bar，Foo；而標籤沒有順序和層次。

---
title: Hexo+Github部落格搭建記錄
date: 2019-08-10 21:44:44
author: 洪衛
img: /medias/banner/7.jpg
coverImg: /medias/banner/7.jpg
top: true
cover: true
toc: true
password: 5f15b28ffe43f8be4f239bdd9b69af9d80dbafcb20a5f0df5d1677a120ae9110
mathjax: true
summary: 這是你自定義的文章摘要內容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程式會自動擷取文章的部分內容作為摘要
tags:
- Hexo
- Github
- 部落格
categories:
- 軟體安裝與配置
---

#### 1.2.4 layout（佈局）

1.2.4.1 post

當你每一次使用程式碼

hexo new XXX

它其實預設使用的是post這個佈局，也就是在source資料夾下的_post裡面。

Hexo有三種預設佈局：post、page和draft，它們分別對應不同的路徑，而您自定義的其他佈局和post相同，都將儲存到source/_posts資料夾。

而new這個命令其實是：

hexo new [layout] <title>

只不過這個layout預設是post罷了。

1.2.4.2 page

如果你想另起一頁，那麼可以使用

hexo new page newpage

系統會自動給你在source資料夾下建立一個newpage資料夾，以及newpage資料夾中的index.md，這樣你訪問的newpage對應的連結就是http://xxx.xxx/newpage

1.2.4.3 draft

draft是草稿的意思，也就是你如果想寫文章，又不希望被看到，那麼可以

hexo new draft newdraft

這樣會在source/_draft中新建一個newdraft.md檔案，如果你的草稿檔案寫的過程中，想要預覽一下，那麼可以使用

hexo server --draft

在本地埠中開啟服務預覽。

如果你的草稿檔案寫完了，想要發表到post中，

hexo publish draft newdraft

就會自動把newdraft.md傳送到post中。

## 2. 更換主題

我們在瞭解Hexo部落格檔案基礎之後，知道主題檔案就放在themes檔案下，那麼我們就可以去Hexo官網下載喜歡的主題，複製進去然後修改引數即可。
網上大多數主題都是github排名第一的Next主題，但是我個人不是很喜歡，我在網上看到一個主題感覺還不錯：hexo-theme-matery，地址在傳送門。這個主題看著比較漂亮，並且響應式比較友好，點起來很舒服，功能也比較很多。

當然，人各有異，這個主題風格也不一定是你喜歡，那麼你也可以跟著這教程類似的方法替換成你喜歡的就行了。

特性：

簡單漂亮，文章內容美觀易讀
Material Design 設計
響應式設計，部落格在桌面端、平板、手機等裝置上均能很好的展現
首頁輪播文章及每天動態切換 Banner 圖片
瀑布流式的部落格文章列表（文章無特色圖片時會有 24 張漂亮的圖片代替）
時間軸式的歸檔頁
詞雲的標籤頁和雷達圖的分類頁
豐富的關於我頁面（包括關於我、文章統計圖、我的專案、我的技能、相簿等）
可自定義的資料的友情連結頁面
支援文章置頂和文章打賞
支援 MathJax
TOC 目錄
可設定複製文章內容時追加版權資訊
可設定閱讀文章時做密碼驗證
Gitalk、Gitment、Valine 和 Disqus 評論模組（推薦使用 Gitalk）
集成了不蒜子統計、谷歌分析（Google Analytics）和文章字數統計等功能
支援在首頁的音樂播放和視訊播放功能

他的介紹文件寫得非常的詳細，還有中英文兩個版本。效果圖如下：

首先先按照文件教程安裝一遍主題，然後是可以正常開啟的，如果你是一般使用的話，基本沒啥問題了。不過有些地方有些地方可以根據你自己的習慣和喜好修改一下，下面記錄一下我這個部落格修改了的一些地方。

### 2.1 新建文章模板修改

首先為了新建文章方便，我們可以修改一下文章模板，建議將/scaffolds/post.md修改為如下程式碼：

---
title: {{ title }}
date: {{ date }}
author: 
img: 
coverImg: 
top: false
cover: false
toc: true
mathjax: false
password:
summary:
tags:
categories:
---

這樣新建文章後一些Front-matter引數不用你自己補充了，修改對應資訊就可以了。

### 2.2 新增404頁面

原來的主題沒有404頁面，我們加一個。首先在/source/目錄下新建一個404.md，內容如下：

title: 404
date: 2019-08-5 16:41:10
type: "404"
layout: "404"
description: "Oops～，我崩潰了！找不到你想要的頁面 :("

然後在/themes/matery/layout/目錄下新建一個404.ejs檔案，內容如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 每天切換 banner 圖.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

### 2.3“關於”頁面增加簡歷（可選）

修改/themes/matery/layout/about.ejs，找到<div class="card">標籤，然後找到它對應的</div>標籤，接在後面新增一個card，語句如下：

<div class="card">
    <div class="card-content">
        <div class="card-content article-card-content">
                <div class="title center-align" data-aos="zoom-in-up">
                    <i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('myCV') %>
                </div>
                <div id="articleContent" data-aos="fade-up">
                    <%- page.content %>
                </div>
        </div>
    </div>
</div>

這樣就會多出一張card，然後可以在/source/about/index.md下面寫上你的簡歷了，當然這裡的位置隨你自己設定，你也可以把簡歷作為第一個card。

### 2.4 數學公式渲染和程式碼高亮

2.4.1 解決mathjax與程式碼高亮的衝突

如果你按照教程安裝了程式碼高亮外掛hexo-prism-plugin，單獨使用是沒有問題的，但如果你又使用了mathjax，並且按照網上教程，安裝kramed外掛並修改了js檔案裡的正則表示式（為了解決markdown和mathjax的語法衝突），那你的程式碼就無法高亮了。解決方法很簡單，別用kramed外掛了，還用原來自帶的marked外掛，直接改它的正則表示式就行了。

2.4.2 加數學公式顯示

開啟/themes/matery/layout中的post.ejs檔案，在最下方貼上如下程式碼：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

由於markdown語法與mathjax語法存在衝突，所以還需要修改原始檔。

開啟/node_modules/marked/lib中的marked.js檔案，第539行的escape:處替換成：

escape: /^$[`*\[\]()#$+\-.!_>])/

第553行的em:處替換成：

em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

這時在文章裡寫數學公式基本沒有問題了，但是要注意：
數學公式中如果出現了連續兩個{，中間一定要加空格！

舉個例子:
行內公式：\(y = f(x)\)
程式碼：

$y = f(x)$

行間公式：
\[y = {f_{ {g_1}}}(x)\]
程式碼：

\\[y = {f_{ {g_1}}}(x)\\]

注意上面花括號之間有空格！

### 2.5 增加建站時間

修改/themes/matery/layout/_partial中的footer.ejs，在最後加上：

<script language=javascript>
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date物件距世界標準時間(UTC)1970年1月1日午夜之間的毫秒數(時間戳)
        year - 作為date物件的年份，為4位年份值
        month - 0-11之間的整數，做為date物件的月份
        day - 1-31之間的整數，做為date物件的天數
        hours - 0(午夜24點)-23之間的整數，做為date物件的小時數
        minutes - 0-59之間的整數，做為date物件的分鐘數
        seconds - 0-59之間的整數，做為date物件的秒數
        microseconds - 0-999之間的整數，做為date物件的毫秒數 */
        var t1 = Date.UTC(2017, 09, 11, 00, 00, 00); //北京時間2018-2-13 00:00:00
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        document.getElementById("sitetime").innerHTML = "本站已執行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小時 " + diffMinutes + " 分鐘 " + diffSeconds + " 秒";
    }/*因為建站時間還沒有一年，就將之註釋掉了。需要的可以取消*/
    siteTime();
</script>

然後在合適的地方（比如copyright聲明後面）加上下面的程式碼就行了：

<span id="sitetime"></span>

### 2.6 修改不蒜子初始化計數

因為不蒜子至今未開放註冊，所以沒辦法在官網修改初始化，只能自己動手了。和上一條一樣，我們在/themes/matery/layout/_partial裡的footer.ejs檔案最後加上：

<script>
    $(document).ready(function () {

        var int = setInterval(fixCount, 50);  // 50ms週期檢測函式
        var pvcountOffset = 80000;  // 初始化首次資料
        var uvcountOffset = 20000;

        function fixCount() {
            if (document.getElementById("busuanzi_container_site_pv").style.display != "none") {
                $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + pvcountOffset);
                clearInterval(int);
            }
            if ($("#busuanzi_container_site_pv").css("display") != "none") {
                $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + uvcountOffset); // 加上初始資料 
                clearInterval(int); // 停止檢測
            }
        }
    });
</script>

然後把上面幾行有段程式碼：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
    <span id="busuanzi_container_site_pv">
        <i class="fa fa-heart-o"></i>
        本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>
    </span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
    <span id="busuanzi_container_site_uv">
        人次,&nbsp;訪客數 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
    </span>
<% } %>

修改為：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
    <span id="busuanzi_container_site_pv" style='display:none'>
        <i class="fa fa-heart-o"></i>
        本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>
    </span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
    <span id="busuanzi_container_site_uv" style='display:none'>
        人次,&nbsp;訪客數 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
    </span>
<% } %>

其實就是增加了兩個style='display:none'而已。

### 2.7 新增動漫人物

其實三步就行了，不用像網上有些教程那麼複雜。

第一步：

npm install --save hexo-helper-live2d

第二步：

npm install live2d-widget-model-shizuku

這裡的動漫模型可以改，只需要下載對應模型就行了，你可以官方倉庫去看有哪些模型，下載你喜歡的就行。

第三步：
在根目錄配置檔案中新增如下程式碼：

live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    log: false
    model:
        use: live2d-widget-model-shizuku
    display:
        position: right
        width: 150
        height: 300
    mobile:
        show: false
    react:
        opacity: 0.7

然後hexo g再hexo s就能預覽出效果了，但是有個注意的地方，這個動漫人物最好不要和不蒜子同時使用，不然不蒜子會顯示不出來。至於解決辦法後續更新。

解決動漫人物和不蒜子不能同時使用的bug（2019.08.11）：

開啟themes\matery\layout\_partial中的footer.ejs，將本站總訪問量和訪客數的程式碼改為如下：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>      
    <span id="busuanzi_container_site_pv" style='display:none'></span>
        <i class="fa fa-heart-o"></i>
        本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>

<% } %>

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
    <span id="busuanzi_container_site_uv" style='display:none'></span>
        人次,&nbsp;訪客數 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
    
<% } %>

變化就在下面兩句，將原始碼對應欄位後面的＜/span＞寫在前面了。

<span id="busuanzi_container_site_pv" style='display:none'></span>
<span id="busuanzi_container_site_uv" style='display:none'></span>

發現按照上面改了過後，又出現一個新bug：文章頭部的閱讀次數不顯示了，解決辦法：（2019.08.11）：

開啟themes\matery\layout\_partial中的post-detail.ejs，找到對應程式碼欄位：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
    <div id="busuanzi_container_page_pv" class="info-break-policy">
        <i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:&nbsp;&nbsp;
        <span id="busuanzi_value_page_pv" ></span>
    </div>

<% } %>

修改為下面的就可以了：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
        <span id="busuanzi_container_site_pv" style='display:none'></span>
        <i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:&nbsp;&nbsp;
        <span id="busuanzi_value_page_pv" ></span>

<% } %>

### 2.8 新增評論外掛

由於這個主題自帶了gittalk、gitment、valine等評論外掛，所以我們只需要對應外掛引數就行了，這個部落格用的是gittalk，如下：

當然也可以用其他評論外掛，只需要配置對應項就是了，不是自帶的可以照著網上的教程自己弄一個，類似的文章有很多，可以搜尋關鍵字就行了。

### 2.9 新增網易雲音樂BGM

寫文章的時候，想插入一段BGM怎麼辦？

其實我們可以藉助一些線上音樂的外鏈播放方式，首先開啟網易雲網頁版，找到想聽的歌曲，然後點選生成外鏈：

可能你會遇到問題，比如點選生成外鏈會提示你由於版權原因，不能生成，那麼可以用下面辦法(目前還有效，不知道後面會不會失效)

(以 Chrome為例，其他瀏覽器類似) 開啟歌單頁面，在“生成外鏈播放器”上右擊，點選審查元素（檢查）ctrl+shift+i；
接著找到生成外鏈播放器這段文字直接雙擊複製前面的/outchain/2/20707408/

然後在瀏覽器位址列修改歌單鏈接，示例：http://music.163.com/#//outchain/2/20707408/
然後就轉到外鏈設定頁面了。

複製如下程式碼：

貼上到文章對應位置就行了，為了美觀，設定一下居中，具體程式碼如下：

<div align="middle">這裡貼上剛剛複製的程式碼</div>

### 2.10 部落格音樂板塊

如果我們自己寫部落格寫疲勞了，想放鬆一下聽聽歌又不想切出部落格主頁，那麼我們可以自己定製一個部落格音樂播放介面，把自己喜歡的歌曲都放進來，這裡用到是Aplayer外掛，但是歌曲來源需要我們自己定義，但是，因為各大音樂平臺，由於版權原因，很多歌曲是不支援外鏈播放的，難道我們就必須每首歌下載然後上傳雲空間，再獲取詞曲封面麼？這就比較麻煩了。其實不然，研究了半個小時，我發現可以採取下面的辦法，很方便：

首先我們找到網易雲線上平臺，任意找到一首歌點進去播放，可以在位址列拿到音樂ID號
然後通過下面網址：http://music.163.com/song/media/outer/url?id=XXXXXX.mp3， XXXXXX就是歌曲ID號，每一首歌我們只需要換掉這個ID號就行了,就相當於每一首的外鏈了
最後封面圖也可以按F12去找頁面元素的連結，填到對應的musics.jason檔案中就可以，批量填入，聽到好聽的歌曲隨時更換隨時新增，很方便。

操作如下圖：

### 2.11 增加emoji支援

為部落格新增對emoji表情的支援，使用到了 hexo-filter-github-emojis 的 Hexo 外掛來支援 emoji表情的生成，把對應的markdown emoji語法（::,例如：