閱讀須知博客開源前言第一部分 搭建Hexo搭建步驟1. 安裝Git2. 安裝nodejs3. 安裝Hexo4. 注冊Github賬號(hào)創(chuàng)建個(gè)人倉庫5. 生成SSH添加到GitHub" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > Hexo+Github: 個(gè)人博客網(wǎng)站搭建完全教程(看這篇就夠了)-上半部分

Hexo+Github: 個(gè)人博客網(wǎng)站搭建完全教程(看這篇就夠了)-上半部分

時(shí)間：2023-08-06 18:27:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-06 18:27:01 來源：網(wǎng)站運(yùn)營

Hexo+Github: 個(gè)人博客網(wǎng)站搭建完全教程(看這篇就夠了)-上半部分：文章目錄

本篇教程首次發(fā)布在個(gè)人博客：

想要獲得最佳閱讀體驗(yàn)，歡迎前往，建議用電腦查看教程文檔。

閱讀須知

---

> **注意，這篇文章篇幅較長，主要針對(duì)新手，每一步很詳細(xì)，所以可能會(huì)顯得比較啰嗦，所以建議基礎(chǔ)比較好小伙伴根據(jù)目錄選擇自己感興趣的部分跳著看，不要文章沒看，上來先噴一下！謝謝( ⊙ o ⊙ )。

> 教程內(nèi)容隨意復(fù)制使用，引用的話請(qǐng)加一個(gè)參考鏈接，謝謝！**




博客開源

---

倒騰了一兩周總算把個(gè)人博客網(wǎng)站完善了，目前這個(gè)版本使用應(yīng)該是夠了，當(dāng)然還有一些優(yōu)化項(xiàng)和功能增加后續(xù)在慢慢更新，為了回饋開源，今天準(zhǔn)備把我自己修改完善的`blog`網(wǎng)站源代碼開源。這不是生成后的網(wǎng)頁文件，是您可以直接使用的源碼，您只需要把博客相關(guān)信息換成您自己的就可以部署了，對(duì)于新手或者不懂編程的小伙伴來說，簡直是福音，極大簡化了您構(gòu)建博客的工作量和復(fù)雜度，每個(gè)人都可以下載并修改成自己喜歡樣式！如果你有修改想法，歡迎PR！最后，我們還是給這個(gè)開源小項(xiàng)目取個(gè)名字吧，就叫[hexo-blog-fly](shw2018/hexo-blog-fly)吧，怎么樣？<<<<<[源代碼下載](shw2018/hexo-blog-fly)>>>>>




本博客基于`Hexo`框架搭建，用到[hexo-theme-matery](shw2018/hexo-theme-matery)主題,并在此基礎(chǔ)之上做了很多修改，修復(fù)了一些bug，增加了一些新的特性和功能，博客地址：

博客演示：

簡單使用方法：

1. `star` 本項(xiàng)目倉庫^o^

2. 安裝[Git](Git - Downloads), 安裝[nodeJS](Node.js)

3. 你可以直接`fork`一份源碼到你的倉庫，`clone`到本地

4. 在本地博客倉庫運(yùn)行`npm i`命令安裝依賴包

5. 修改配置信息，改成自己的信息

6. 運(yùn)行命令`hexo clean`（清除生成文件），`hexo g`（生成網(wǎng)頁）， `hexo s`（本地預(yù)覽），`hexo d`（部署）




更多詳情教程，強(qiáng)烈推薦看我寫的：

最后，如果項(xiàng)目和教程對(duì)你有所幫助或者你看見了還算比較喜歡，歡迎給我的該github項(xiàng)目倉庫`star`，謝謝您！

# 前言

去年在博客園注冊了自己的第一個(gè)博客，當(dāng)時(shí)初衷就是想拿來作為自己的在線筆記本，做做學(xué)習(xí)記錄，分享一些學(xué)到的東西，使用第三方提供的博客服務(wù)其實(shí)也挺方便，現(xiàn)在市面上提供類似服務(wù)的博客網(wǎng)站也很多，如CSDN，博客園，簡書等平臺(tái)，可以直接在上面發(fā)表，用戶交互做的好，寫的文章百度也能搜索的到。但是缺點(diǎn)是比較不自由，會(huì)受到平臺(tái)的各種限制和惡心的廣告，個(gè)性化不足。而自己購買域名和服務(wù)器，搭建博客的成本實(shí)在是太高了，不光是說這些購買成本，單單是花力氣去自己搭這么一個(gè)網(wǎng)站，還要定期的維護(hù)它，對(duì)于我們大多數(shù)人來說，也是沒有這樣的精力和時(shí)間。那么，我們能不能自己定制一個(gè)自己喜歡的個(gè)性化博客，同時(shí)也不用付出太高的成本啦？

這就引出了第三種選擇，基于開源框架搭建博客，然后直接在`github page`平臺(tái)上托管我們的博客。這樣就可以安心的來寫作，又不需要定期維護(hù)，基于這個(gè)想法，今年8月初的時(shí)候開始搭建第一個(gè)屬于自己的獨(dú)立博客，前后斷續(xù)弄了近一周，到現(xiàn)在稍微有點(diǎn)模樣了。我想可能有很多小伙伴應(yīng)該也想過搭建一個(gè)自己的博客，當(dāng)然，網(wǎng)上也有一堆詳細(xì)教程。寫這篇博客的目的大概有兩個(gè)，第一個(gè)是當(dāng)做自己的搭建記錄，方便以后自己隨時(shí)查看提示修改，第二個(gè)是稍稍總結(jié)一下具體的搭建步驟以及一些支持個(gè)性化定制的博客源碼修改的教程，稍稍分享一下這些修改經(jīng)驗(yàn)，當(dāng)然，更多的一些個(gè)性化操作需要你自己以后在這個(gè)基礎(chǔ)上慢慢去摸索，有些寫的不太好的地方還希望看到的小伙伴多多包涵。

博客初步的頁面效果可以看一下我的博客：

歡迎大家支持。

本博客基于[Hexo](Hexo)，所以首先要了解一下我們搭建博客所要用到的框架。`Hexo`是高效的靜態(tài)網(wǎng)站生成框架，它基于`Node.js`，快速，簡單且功能強(qiáng)大，是搭建博客的首選框架。大家可以進(jìn)入[hexo](Hexo)官網(wǎng)進(jìn)行詳細(xì)查看，因?yàn)閌Hexo`的創(chuàng)建者是臺(tái)灣人，對(duì)中文的支持很友好，可以選擇中文進(jìn)行查看。通過`Hexo`，你可以直接使用`Markdown`語法來撰寫博客。相信很多小伙伴寫工程都寫過`README.md`文件吧，對(duì)，就是這個(gè)格式的！寫完后只需兩三條命令即可將生成的網(wǎng)頁上傳到`github`或者`coding`等代碼管理托管平臺(tái)，然后別人就可以瀏覽你的博客網(wǎng)頁啦。是不是很簡單？你無需關(guān)心網(wǎng)頁源代碼的具體生成細(xì)節(jié)，只需要用心寫好你的博客文章內(nèi)容就行了。

> 簡單總結(jié)：`Hexo`, 產(chǎn)品成熟，使用簡單，功能強(qiáng)大，有豐富的各種插件資源；但，像發(fā)布后臺(tái)、站內(nèi)搜索，評(píng)論系統(tǒng)類似訴求，雖然有對(duì)應(yīng)的工具，但也需要自己折騰下，后續(xù)我們一步一步介紹。

教程大致分三個(gè)部分，

* 第一部分：`hexo`的初級(jí)搭建還有部署到`github page`上，以及個(gè)人域名的綁定。

* 第二部分：`hexo`的基本配置，更換主題，實(shí)現(xiàn)多終端工作，以及在`coding page`部署實(shí)現(xiàn)國內(nèi)外分流

* 第三部分：`hexo`添加各種功能，包括搜索的`SEO`，閱讀量統(tǒng)計(jì)，訪問量統(tǒng)計(jì)和評(píng)論系統(tǒng)等。

第一部分 搭建

`hexo`的初級(jí)搭建還有部署到`github page`上，以及個(gè)人域名的綁定。

## Hexo搭建步驟

- 1.安裝`Git`

- 2.安裝`Node.js`

- 3.安裝`Hexo`

- 4.`GitHub`創(chuàng)建個(gè)人倉庫

- 5.生成`SSH`添加到`GitHub`

- 6.將`hexo`部署到`GitHub`

- 7.設(shè)置個(gè)人域名

- 8.發(fā)布文章

1. 安裝Git

為了把本地的網(wǎng)頁文件上傳到`github`上面去，需要用到工具———Git[[下載地址]](Git - Downloads)。`Git`是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)，可以有效、高速的處理從很小到非常大的項(xiàng)目版本管理。`Git`非常強(qiáng)大，建議每個(gè)人都去了解一下。廖雪峰老師的`Git`教程寫的非常好，大家可以看一下。[Git教程](Git教程)

**windows：**到`git`官網(wǎng)上下載`.exe`文件,[Download git](Git - Downloading Package),安裝選項(xiàng)還是全部默認(rèn)，只不過最后一步添加路徑時(shí)選擇`Use Git from the Windows Command Prompt`，這樣我們就可以直接在命令提示符里打開`git`了。

> 順便說一下，`windows`在`git`安裝完后，就可以直接使用`git bash`來敲命令行了，不用自帶的`cmd`，`cmd`有點(diǎn)難用。

**linux：**對(duì)`linux`來說實(shí)在是太簡單了，因?yàn)樽钤绲腵git`就是在`linux`上編寫的，只需要一行代碼

```bash

sudo apt-get install git

```

安裝完成后在命令提示符中輸入`git --version`來查看一下版本驗(yàn)證是否安裝成功。

2. 安裝nodejs

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

**windows：**下載穩(wěn)定版或者最新版都可以[Node.js](下載 | Node.js 中文網(wǎng))，安裝選項(xiàng)全部默認(rèn)，一路點(diǎn)擊`Next`。

最后安裝好之后，按`Win+R`打開命令提示符，輸入`node -v`和`npm -v`，如果出現(xiàn)版本號(hào)，那么就安裝成功了。

**linux：**命令行安裝：

```bash

sudo apt-get install nodejs

sudo apt-get install npm

```

不過不推薦命令行安裝，有時(shí)候有問題，建議直接到官網(wǎng)去下載編譯好的壓縮文件，如下所示:

<p align="center">

<img src="https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/1.png" >

</p>

然后解壓到你指定的文件夾即可，比如我解壓到我系統(tǒng)的`/home/shw/MySoftwares`目錄下了，如圖:

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3NodzIwMTgvY2RuL21hc3Rlci9ibG9nX2ZpbGVzL2ltZy9IZXhvLUJsb2ctVHV0b3JpYWwvMi5wbmc?x-oss-process=image/format,png)

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

配置一下環(huán)境變量

```bash

sudo vim /etc/profile

```

復(fù)制下面兩行到剛打開的`profile`文件最底部(注意`node`的安裝地址`/home/shw/MySoftwares/node-v12.8.0-linux-x64`換成自己的)：

```bash

export NODE_HOME=/home/shw/MySoftwares/node-v12.8.0-linux-x64

export PATH=$PATH:$NODE_HOME/bin

```

保存后退出，再執(zhí)行下面命令將環(huán)境變量生效：

```bash

source /etc/profile

```

將目錄軟鏈接到全局環(huán)境下（命令后面的`/usr/local/bin/node`是固定的）

```bash

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`)，使用包的命令時(shí)可能會(huì)提示找不到命令，沒關(guān)系，在用戶目錄下終端執(zhí)行下面命令(固定寫法)：

```bash

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

```

這樣我們在所有用戶下，都可以使用`npm`，也可以使用`npm`安裝的包的命令。成功的將`nodejs`安裝并配置到全局環(huán)境下。

安裝完后，打開命令行終端，輸入:

```bash

node -v

npm -v

```

檢查一下有沒有安裝成功

**添加國內(nèi)鏡像源**

如果沒有梯子的話，可以使用阿里的國內(nèi)鏡像進(jìn)行加速。

```bash

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

```

3. 安裝Hexo

前面`git`和`nodejs`安裝好后，就可以安裝`hexo`了，你可以先創(chuàng)建一個(gè)文件夾`MyBlog`，用來存放自己的博客文件，然后`cd`到這個(gè)文件夾下（或者在這個(gè)文件夾下直接右鍵`git bash`打開）。

比如我的博客文件都存放在`D:/Study/MyBlog`目錄下。

在該目錄下右鍵點(diǎn)擊`Git Bash Here`，打開`git`的控制臺(tái)窗口，以后我們所有的操作都在`git`控制臺(tái)進(jìn)行，就不用`Windows`自帶的`cmd`了。

定位到該目錄下，輸入`npm install -g hexo-cli`安裝`Hexo`?？赡軙?huì)有幾個(gè)報(bào)錯(cuò)，無視它就行。

```bash

npm install -g hexo-cli

```

安裝完后輸入`hexo -v`驗(yàn)證是否安裝成功。

至此`hexo`就安裝完了。

接下來初始化一下`hexo`,即初始化我們的網(wǎng)站，輸入`hexo init`初始化文件夾

```bash

hexo init MyBlog

```

這個(gè)`MyBlog`可以自己取什么名字都行，然后，接著輸入`npm install`安裝必備的組件。

```bash

cd MyBlog //進(jìn)入這個(gè)MyBlog文件夾

npm install

```

新建完成后，指定文件夾`MyBlog`目錄下有：

- `node_modules:` 依賴包

- `public：`存放生成的頁面

- `scaffolds：`生成文章的一些模板

- `source：`用來存放你的文章

- `themes：`主題**

- `_config.yml:` 博客的配置文件**




這樣本地的網(wǎng)站配置也弄好啦，輸入`hexo g`生成靜態(tài)網(wǎng)頁，然后輸入`hexo s`打開本地服務(wù)器，

```bash

hexo g

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

```

然后瀏覽器打開[http://localhost:4000/](http://localhost:4000/)，就可以看到我們的博客啦，效果如下：

[外鏈圖片轉(zhuǎn)存失敗(img-5agFYiiE-1566969757046)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/3.png)]

按`ctrl+c`關(guān)閉本地服務(wù)器。

4. 注冊Github賬號(hào)創(chuàng)建個(gè)人倉庫

接下來就去注冊一個(gè)`github`賬號(hào)，用來存放我們的網(wǎng)站。大多數(shù)小伙伴應(yīng)該都有了吧，作為一個(gè)合格的程序猿（媛）還是要有一個(gè)的。

打開[Build software better, together](Build software better, together)，新建一個(gè)項(xiàng)目倉庫`New repository`，如下所示：

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3NodzIwMTgvY2RuL21hc3Rlci9ibG9nX2ZpbGVzL2ltZy9IZXhvLUJsb2ctVHV0b3JpYWwvNC5wbmc?x-oss-process=image/format,png)

然后如下圖所示，輸入自己的項(xiàng)目名字，后面一定要加`.http://github.io`后綴，`README`初始化也要勾上。

[外鏈圖片轉(zhuǎn)存失敗(img-gt2XfSf4-1566969757046)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/5.png)]

> 要?jiǎng)?chuàng)建一個(gè)和你用戶名相同的倉庫，后面加.GitHub Pages，只有這樣，將來要部署到`GitHub page`的時(shí)候，才會(huì)被識(shí)別，也就是http://xxxx.github.io，其中xxx就是你注冊`GitHub`的用戶名。例如我的：

5. 生成SSH添加到GitHub

生成`SSH`添加到`GitHub`，連接`Github`與本地。

右鍵打開`git bash`，然后輸入下面命令：

```bash

git config --global user.name "yourname"

git config --global At-Cost Domain Pricing - Domain Cost Club "youremail"

```

這里的`yourname`輸入你的`GitHub`用戶名，`youremail`輸入你`GitHub`的郵箱。這樣`GitHub`才能知道你是不是對(duì)應(yīng)它的賬戶。例如我的：

```bash

git config --global user.name "shw2018"

git config --global At-Cost Domain Pricing - Domain Cost Club "hwsun@std.uestc.edu.cn"

```

可以用以下兩條，檢查一下你有沒有輸對(duì)

```bash

git config user.name

git config At-Cost Domain Pricing - Domain Cost Club

```

然后創(chuàng)建`SSH`,一路回車

> `ssh`，簡單來講，就是一個(gè)秘鑰，其中，`id_rsa`是你這臺(tái)電腦的私人秘鑰，不能給別人看的，`id_rsa.pub`是公共秘鑰，可以隨便給別人看。把這個(gè)公鑰放在`GitHub`上，這樣當(dāng)你鏈接`GitHub`自己的賬戶時(shí)，它就會(huì)根據(jù)公鑰匹配你的私鑰，當(dāng)能夠相互匹配時(shí)，才能夠順利的通過`git`上傳你的文件到`GitHub`上。

```bash

ssh-keygen -t rsa -C "youremail"

```

這個(gè)時(shí)候它會(huì)告訴你已經(jīng)生成了`.ssh`的文件夾。在你的電腦中找到這個(gè)文件夾?；蛘違git bash`中輸入

```bash

cat ~/.ssh/id_rsa.pub

```

將輸出的內(nèi)容復(fù)制到框中，點(diǎn)擊確定保存。

打開[github](Build software better, together)，在頭像下面點(diǎn)擊`settings`，再點(diǎn)擊`SSH and GPG keys`，新建一個(gè)`SSH`，名字隨便取一個(gè)都可以，把你的`id_rsa.pub`里面的信息復(fù)制進(jìn)去。如圖：

[外鏈圖片轉(zhuǎn)存失敗(img-4zsPuG2V-1566969757046)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/6.png)]

在`git bash`輸入`ssh -T git@github.com`，如果如下圖所示，出現(xiàn)你的用戶名，那就成功了。

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3NodzIwMTgvY2RuL21hc3Rlci9ibG9nX2ZpbGVzL2ltZy9IZXhvLUJsb2ctVHV0b3JpYWwvNy5wbmc?x-oss-process=image/format,png)

6. 將hexo部署到GitHub

這一步，我們就可以將`hexo`和`GitHub`關(guān)聯(lián)起來，也就是將`hexo`生成的文章部署到`GitHub`上，打開博客根目錄下的`_config.yml`文件，這是博客的配置文件，在這里你可以修改與博客配置相關(guān)的各種信息。

修改最后一行的配置：

```yml

deploy:

type: git

repository: shw2018/shw2018.github.io

branch: master

```

`repository`修改為你自己的`github`項(xiàng)目地址即可，就是部署時(shí)，告訴工具，將生成網(wǎng)頁通過`git`方式上傳到你對(duì)應(yīng)的鏈接倉庫中。

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

```bash

npm install hexo-deployer-git --save

```

然后

```bash

hexo clean

hexo generate

hexo deploy

```

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

> 注意`deploy`時(shí)可能要你輸入`username`和`password`。

得到下圖就說明部署成功了，過一會(huì)兒就可以在http://yourname.github.io 這個(gè)網(wǎng)站看到你的博客了?。?br>
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3NodzIwMTgvY2RuL21hc3Rlci9ibG9nX2ZpbGVzL2ltZy9IZXhvLUJsb2ctVHV0b3JpYWwvOC5wbmc?x-oss-process=image/format,png)

7. 設(shè)置個(gè)人域名

現(xiàn)在你的個(gè)人網(wǎng)站的地址是` http://yourname.github.io`，如果覺得這個(gè)網(wǎng)址逼格不太夠，這就需要你設(shè)置個(gè)人域名了。但是需要花錢。

> **不過，這一步不是必要的，如果目前還不想買域名可以先跳過，繼續(xù)看后面的，以后想買域名了在還看這塊**

首先你得購買一個(gè)專屬域名，`xx`云都能買，看你個(gè)人喜好了。

這篇以騰訊云為例，騰訊云官網(wǎng)購買：

[外鏈圖片轉(zhuǎn)存失敗(img-R4rcmadN-1566969757047)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/9.png)]

然后實(shí)名認(rèn)證后進(jìn)入騰訊云控制臺(tái)，點(diǎn)云解析進(jìn)去，找到你剛買的域名，點(diǎn)進(jìn)去添加兩條解析記錄，如下圖所示：

[外鏈圖片轉(zhuǎn)存失敗(img-hi5FgG4j-1566969757047)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/10.png)]

然后打開你的`github`博客項(xiàng)目，點(diǎn)擊`settings`，拉到下面`Custom domain`處，填上你自己的域名，保存：

[外鏈圖片轉(zhuǎn)存失敗(img-nTOWkH8d-1566969757047)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/11.png)]

這時(shí)候你的項(xiàng)目根目錄應(yīng)該會(huì)出現(xiàn)一個(gè)名為`CNAME`的文件了。如果沒有的話，打開你本地博客`/source`目錄，我的是`D:/Study/MyBlog/source`，新建`CNAME`文件，注意沒有后綴。然后在里面寫上你的域名，保存。最后運(yùn)行`hexo g`、`hexo d`上傳到`github`。

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

8. 寫文章、發(fā)布文章

首先在博客根目錄下右鍵打開`git bash`，安裝一個(gè)擴(kuò)展`npm i hexo-deployer-git`。

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

然后打開`D:/Study/MyBlog/source/_posts`的目錄，可以發(fā)現(xiàn)下面多了一個(gè)文件夾和一個(gè)`.md`文件，一個(gè)用來存放你的圖片等數(shù)據(jù)，另一個(gè)就是你的文章文件啦。

你可以會(huì)直接在`vscode`里面編寫`markdown`文件，可以實(shí)時(shí)預(yù)覽，也可以用用其他編輯`md`文件的軟件的工具編寫。

編寫完markdown文件后，根目錄下輸入`hexo g`生成靜態(tài)網(wǎng)頁，然后輸入`hexo s`可以本地預(yù)覽效果，最后輸入`hexo d`上傳到`github`上。這時(shí)打開你的`http://github.io`主頁就能看到發(fā)布的文章啦。

到這兒基本第一部分就完成了，已經(jīng)完整搭建起一個(gè)比較簡陋的個(gè)人博客了，接下來我們就可以對(duì)我們的博客進(jìn)行個(gè)性化定制了。

第二部分 定制

我們要定制自己的博客的話，首先就要來了解一下`Hexo`博客的一些目錄和文件的作用，以及如何平滑更換漂亮的主題模板并加入自己的定制源代碼實(shí)現(xiàn)個(gè)性化定制

1. Hexo相關(guān)目錄文件

1.1 博客目錄構(gòu)成介紹

從上圖可以看出，博客的目錄結(jié)構(gòu)如下：

```json

- node_modules

- public

- scaffolds

- source

- _data

- _posts

- about

- archives

- categories

- friends

- tags

- themes

```

`node_modules`是`node.js`各種庫的目錄，`public`是生成的網(wǎng)頁文件目錄，`scaffolds`里面就三個(gè)文件，存儲(chǔ)著新文章和新頁面的初始設(shè)置，`source`是我們最常用到的一個(gè)目錄，里面存放著文章、各類頁面、圖像等文件，`themes`存放著主題文件，一般也用不到。

我們平時(shí)寫文章只需要關(guān)注`source/_posts`這個(gè)文件夾就行了。

1.2 hexo基本配置

在文件根目錄下的`_config.yml`，就是整個(gè)`hexo`框架的配置文件了。可以在里面修改大部分的配置。詳細(xì)可參考官方的[配置描述](配置)。

1.2.1 網(wǎng)站

參數(shù)描述`title`網(wǎng)站標(biāo)題`subtitle`網(wǎng)站副標(biāo)題`description`網(wǎng)站描述`author`您的名字`language`網(wǎng)站使用的語言`timezone`網(wǎng)站時(shí)區(qū)。`Hexo` 默認(rèn)使用您電腦的時(shí)區(qū)。時(shí)區(qū)列表。比如說：`America/New_York, Japan`, 和 `UTC` 。

其中，`description`主要用于`SEO`，告訴搜索引擎一個(gè)關(guān)于您站點(diǎn)的簡單描述，通常建議在其中包含您網(wǎng)站的關(guān)鍵詞。`author`參數(shù)用于主題顯示文章的作者。

1.2.2 網(wǎng)址

參數(shù)描述`url`網(wǎng)址`root`網(wǎng)站根目錄 `permalink`文章的[永久鏈接](永久鏈接（Permalinks）)格式`permalink_defaults`永久鏈接中各部分的默認(rèn)值

在這里，你需要把`url`改成你的**網(wǎng)站域名**。

`permalink`，也就是你生成某個(gè)文章時(shí)的那個(gè)鏈接格式。

比如我新建一個(gè)文章叫`temp.md`，那么這個(gè)時(shí)候他自動(dòng)生成的地址就是`http://yoursite.com/2018/09/05/temp`。

以下是官方給出的示例，關(guān)于鏈接的變量還有很多，需要的可以去官網(wǎng)上查找 [永久鏈接](永久鏈接（Permalinks）) 。

> 參數(shù)結(jié)果: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

再往下翻，中間這些都默認(rèn)就好了。

```yml

theme: landscap

```

`theme`就是選擇什么主題，也就是在`themes`這個(gè)文件夾下，在官網(wǎng)上有很多個(gè)主題，默認(rèn)給你安裝的是`lanscape`這個(gè)主題。當(dāng)你需要更換主題時(shí)，在官網(wǎng)上下載，把主題的文件放在`themes`文件夾下，再修改這個(gè)主題參數(shù)就可以了。

1.2.3 Front-matter

`Front-matter` 是`md`文件最上方以 `--- `分隔的區(qū)域，用于指定個(gè)別文件的變量，舉例來說：

```

title: Hexo+Github博客搭建記錄

date: 2019-08-10 21:44:44

```

下是預(yù)先定義的參數(shù)，您可在模板中使用這些參數(shù)值并加以利用。

參數(shù)描述`layout`布局`title`標(biāo)題`date`建立日期`updated`更新日期`comments`開啟文章的評(píng)論功能`tags`標(biāo)簽（不適用于分頁）`categories`分類（不適用于分頁）`permalink`覆蓋文章網(wǎng)址

其中，分類和標(biāo)簽需要區(qū)別一下，分類具有順序性和層次性，也就是說` Foo`，` Bar `不等于` Bar`，`Foo`；而標(biāo)簽沒有順序和層次。

```yml

---

title: Hexo+Github博客搭建記錄

date: 2019-08-10 21:44:44

author: 洪衛(wèi)

img: /medias/banner/7.jpg

coverImg: /medias/banner/7.jpg

top: true

cover: true

toc: true

password: 5f15b28ffe43f8be4f239bdd9b69af9d80dbafcb20a5f0df5d1677a120ae9110

mathjax: true

summary: 這是你自定義的文章摘要內(nèi)容，如果這個(gè)屬性有值，文章卡片摘要就顯示這段文字，否則程序會(huì)自動(dòng)截取文章的部分內(nèi)容作為摘要

tags:

- Hexo

- Github

- 博客

categories:

- 軟件安裝與配置

---

```

1.2.4 layout（布局）

**1.2.4.1 post**

當(dāng)你每一次使用代碼

```bash

hexo new XXX

```

它其實(shí)默認(rèn)使用的是`post`這個(gè)布局，也就是在`source`文件夾下的`_post`里面。

`Hexo`有三種默認(rèn)布局：`post`、`page`和`draft`，它們分別對(duì)應(yīng)不同的路徑，而您自定義的其他布局和`post`相同，都將儲(chǔ)存到`source/_posts`文件夾。

而new這個(gè)命令其實(shí)是：

```bash

hexo new [layout] <title>

```

只不過這個(gè)`layout`默認(rèn)是`post`罷了。

**1.2.4.2 page**

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

```bash

hexo new page newpage

```

系統(tǒng)會(huì)自動(dòng)給你在`source`文件夾下創(chuàng)建一個(gè)`newpage`文件夾，以及`newpage`文件夾中的`index.md`，這樣你訪問的`newpage`對(duì)應(yīng)的鏈接就是http://xxx.xxx/newpage

**1.2.4.3 draft**

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

```bash

hexo new draft newdraft

```

這樣會(huì)在`source/_draft`中新建一個(gè)`newdraft.md`文件，如果你的草稿文件寫的過程中，想要預(yù)覽一下，那么可以使用

```bash

hexo server --draft

```

在本地端口中開啟服務(wù)預(yù)覽。

如果你的草稿文件寫完了，想要發(fā)表到`post`中，

```bash

hexo publish draft newdraft

```

就會(huì)自動(dòng)把`newdraft.md`發(fā)送到`post`中。

2. 更換主題

我們在了解`Hexo`博客文件基礎(chǔ)之后，知道主題文件就放在`themes`文件下，那么我們就可以去Hexo官網(wǎng)下載喜歡的主題，復(fù)制進(jìn)去然后修改參數(shù)即可。

網(wǎng)上大多數(shù)主題都是github排名第一的`Next`主題，但是我個(gè)人不是很喜歡，我在網(wǎng)上看到一個(gè)主題感覺還不錯(cuò)：[hexo-theme-matery](blinkfox/hexo-theme-matery)，地址在[傳送門](blinkfox/hexo-theme-matery)。這個(gè)主題看著比較漂亮，并且響應(yīng)式比較友好，點(diǎn)起來很舒服，功能也比較很多。

> 當(dāng)然，人各有異，這個(gè)主題風(fēng)格也不一定是你喜歡，那么你也可以跟著這教程類似的方法替換成你喜歡的就行了。

>特性：

- 簡單漂亮，文章內(nèi)容美觀易讀

- [Material Design](https://material.io/) 設(shè)計(jì)

- 響應(yīng)式設(shè)計(jì)，博客在桌面端、平板、手機(jī)等設(shè)備上均能很好的展現(xiàn)

- 首頁輪播文章及每天動(dòng)態(tài)切換 `Banner` 圖片

- 瀑布流式的博客文章列表（文章無特色圖片時(shí)會(huì)有 `24` 張漂亮的圖片代替）

- 時(shí)間軸式的歸檔頁

- **詞云**的標(biāo)簽頁和**雷達(dá)圖**的分類頁

- 豐富的關(guān)于我頁面（包括關(guān)于我、文章統(tǒng)計(jì)圖、我的項(xiàng)目、我的技能、相冊等）

- 可自定義的數(shù)據(jù)的友情鏈接頁面

- 支持文章置頂和文章打賞

- 支持 `MathJax`

- `TOC` 目錄

- 可設(shè)置復(fù)制文章內(nèi)容時(shí)追加版權(quán)信息

- 可設(shè)置閱讀文章時(shí)做密碼驗(yàn)證

- [Gitalk](Gitalk Demo | Aotu.io「凹凸實(shí)驗(yàn)室」)、[Gitment](Gitment Demo Page)、[Valine](介紹 | Valine) 和 [Disqus](https://disqus.com/) 評(píng)論模塊（推薦使用 `Gitalk`）

- 集成了[不蒜子統(tǒng)計(jì)](不蒜子 - 極簡網(wǎng)頁計(jì)數(shù)器)、谷歌分析（`Google Analytics`）和文章字?jǐn)?shù)統(tǒng)計(jì)等功能

- 支持在首頁的音樂播放和視頻播放功能

他的介紹文檔寫得非常的詳細(xì)，還有中英文兩個(gè)版本。效果圖如下：

[外鏈圖片轉(zhuǎn)存失敗(img-r9qoTdRP-1566969757048)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/12.png)]

首先先按照文檔教程安裝一遍主題，然后是可以正常打開的，如果你是一般使用的話，基本沒啥問題了。不過有些地方有些地方可以根據(jù)你自己的習(xí)慣和喜好修改一下， 下面記錄一下我這個(gè)博客修改了的一些地方。

2.1 新建文章模板修改

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

```json

---

title: {{ title }}

date: {{ date }}

author:

img:

coverImg:

top: false

cover: false

toc: true

mathjax: false

password:

summary:

tags:

categories:

---

```

這樣新建文章后 一些`Front-matter`參數(shù)不用你自己補(bǔ)充了，修改對(duì)應(yīng)信息就可以了。

2.2 添加404頁面

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

```json

title: 404

date: 2019-08-5 16:41:10

type: "404"

layout: "404"

description: "Oops～，我崩潰了！找不到你想要的頁面 :("

```

然后在`/themes/matery/layout/`目錄下新建一個(gè)`404.ejs`文件，內(nèi)容如下：

```html

<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“關(guān)于”頁面增加簡歷（可選）

修改`/themes/matery/layout/about.ejs`，找到`<div class="card">`標(biāo)簽，然后找到它對(duì)應(yīng)的`</div>`標(biāo)簽，接在后面新增一個(gè)`card`，語句如下：

```html

<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>

```

這樣就會(huì)多出一張`card`，然后可以在`/source/about/index.md`下面寫上你的簡歷了，當(dāng)然這里的位置隨你自己設(shè)置，你也可以把簡歷作為第一個(gè)`card`。

2.4 數(shù)學(xué)公式渲染和代碼高亮

**2.4.1 解決mathjax與代碼高亮的沖突**

如果你按照教程安裝了代碼高亮插件`hexo-prism-plugin`，單獨(dú)使用是沒有問題的，但如果你又使用了`mathjax`，并且按照網(wǎng)上教程，安裝`kramed`插件并修改了`js`文件里的正則表達(dá)式（為了解決`markdown`和`mathjax`的語法沖突），那你的代碼就無法高亮了。解決方法很簡單，別用`kramed`插件了，還用原來自帶的`marked`插件，直接改它的正則表達(dá)式就行了。

**2.4.2 加數(shù)學(xué)公式顯示**

打開`/themes/matery/layout`中的`post.ejs`文件，在最下方粘貼如下代碼：

```javascript

<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: `處替換成：

```js

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

```

第553行的`em: `處替換成：

```js

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

```

這時(shí)在文章里寫數(shù)學(xué)公式基本沒有問題了，但是要注意：

**數(shù)學(xué)公式中如果出現(xiàn)了連續(xù)兩個(gè){，中間一定要加空格！**

舉個(gè)例子:

行內(nèi)公式：$y = f(x)$

代碼：

```tex

$y = f(x)$

```

行間公式：

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

代碼：

```tex

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

```

> 注意上面花括號(hào)之間有空格！

2.5 增加建站時(shí)間

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

```js

<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對(duì)象距世界標(biāo)準(zhǔn)時(shí)間(UTC)1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)

year - 作為date對(duì)象的年份，為4位年份值

month - 0-11之間的整數(shù)，做為date對(duì)象的月份

day - 1-31之間的整數(shù)，做為date對(duì)象的天數(shù)

hours - 0(午夜24點(diǎn))-23之間的整數(shù)，做為date對(duì)象的小時(shí)數(shù)

minutes - 0-59之間的整數(shù)，做為date對(duì)象的分鐘數(shù)

seconds - 0-59之間的整數(shù)，做為date對(duì)象的秒數(shù)

microseconds - 0-999之間的整數(shù)，做為date對(duì)象的毫秒數(shù) */

var t1 = Date.UTC(2017, 09, 11, 00, 00, 00); //杭州時(shí)間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 = "本站已運(yùn)行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小時(shí) " + diffMinutes + " 分鐘 " + diffSeconds + " 秒";

}/*因?yàn)榻ㄕ緯r(shí)間還沒有一年，就將之注釋掉了。需要的可以取消*/

siteTime();

</script>

```

然后在合適的地方（比如`copyright`聲明后面）加上下面的代碼就行了：

```html

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

```

2.6 修改不蒜子初始化計(jì)數(shù)

因?yàn)椴凰庾又两裎撮_放注冊，所以沒辦法在官網(wǎng)修改初始化，只能自己動(dòng)手了。和上一條一樣，我們在`/themes/matery/layout/_partial`里的`footer.ejs`文件最后加上：

```js

<script>

$(document).ready(function () {

var int = setInterval(fixCount, 50); // 50ms周期檢測函數(shù)

var pvcountOffset = 80000; // 初始化首次數(shù)據(jù)

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); // 加上初始數(shù)據(jù)

clearInterval(int); // 停止檢測

}

}

});

</script>

```

然后把上面幾行有段代碼：

```html

<% 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;訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.

</span>

<% } %>

```

修改為：

```html

<% 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;訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.

</span>

<% } %>

```

其實(shí)就是增加了兩個(gè)`style='display:none'`而已。

2.7 添加動(dòng)漫人物

其實(shí)三步就行了，不用像網(wǎng)上有些教程那么復(fù)雜。

**第一步：**

```bash

npm install --save hexo-helper-live2d

```

**第二步：**

```bash

npm install live2d-widget-model-shizuku

```

> 這里的動(dòng)漫模型可以改，只需要下載對(duì)應(yīng)模型就行了，你可以官方倉庫去看有哪些模型，下載你喜歡的就行。

**第三步：**

在根目錄配置文件中添加如下代碼：

```yml

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`就能預(yù)覽出效果了，但是有個(gè)注意的地方，**這個(gè)動(dòng)漫人物最好不要和不蒜子同時(shí)使用**，不然不蒜子會(huì)顯示不出來。至于解決辦法后續(xù)更新。

> **解決動(dòng)漫人物和不蒜子不能同時(shí)使用的`bug`（2019.08.11）**：

打開`themes/matery/layout/_partial`中的`footer.ejs`，將本站總訪問量和訪客數(shù)的代碼改為如下：

```js

<% 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;訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.

<% } %>

```

變化就在下面兩句，將源代碼對(duì)應(yīng)字段后面的`＜/span＞`寫在前面了。

```js

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

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

```

> **發(fā)現(xiàn)按照上面改了過后，又出現(xiàn)一個(gè)新`bug`：文章頭部的閱讀次數(shù)不顯示了，解決辦法：（2019.08.11）**：

打開`themes/matery/layout/_partial`中的`post-detail.ejs`，找到對(duì)應(yīng)代碼字段：

```js

<% 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>

<% } %>

```

修改為下面的就可以了：

```js

<% 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 添加評(píng)論插件

由于這個(gè)主題自帶了`gittalk`、`gitment`、`valine`等評(píng)論插件，所以我們只需要對(duì)應(yīng)插件參數(shù)就行了，這個(gè)博客用的是`gittalk`，如下：

[外鏈圖片轉(zhuǎn)存失敗(img-J270HDhP-1566969757048)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/13.png)]

當(dāng)然也可以用其他評(píng)論插件，只需要配置對(duì)應(yīng)項(xiàng)就是了，不是自帶的可以照著網(wǎng)上的教程自己弄一個(gè)，類似的文章有很多，可以搜索關(guān)鍵字就行了

2.9 添加網(wǎng)易云音樂BGM

寫文章的時(shí)候，想插入一段`BGM`怎么辦？

其實(shí)我們可以借助一些在線音樂的外鏈播放方式，首先打開網(wǎng)易云網(wǎng)頁版，找到想聽的歌曲，然后點(diǎn)擊生成外鏈：

[外鏈圖片轉(zhuǎn)存失敗(img-W7n4YtiA-1566969757049)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/14.png)]

可能你會(huì)遇到問題，比如點(diǎn)擊生成外鏈會(huì)提示你由于版權(quán)原因，不能生成，那么可以用下面辦法(目前還有效，不知道后面會(huì)不會(huì)失效)

1. (以 `Chrome `為例，其他瀏覽器類似) 打開歌單頁面，在“生成外鏈播放器”上右擊，點(diǎn)擊審查元素（檢查）ctrl+shift+i；

2. 接著找到生成外鏈播放器這段文字直接雙擊復(fù)制前面的`/outchain/2/20707408/`

[外鏈圖片轉(zhuǎn)存失敗(img-pOPSMgVE-1566969757049)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/15.png)]

3. 然后在瀏覽器地址欄修改歌單鏈接，示例：網(wǎng)易云音樂

4. 然后就轉(zhuǎn)到外鏈設(shè)置頁面了。

復(fù)制如下代碼：

![](

粘貼到文章對(duì)應(yīng)位置就行了，為了美觀，設(shè)置一下居中，具體代碼如下：

```html

<div align="middle">這里粘貼剛剛復(fù)制的代碼</div>

```

2.10 博客音樂板塊

如果我們自己寫博客寫疲勞了，想放松一下聽聽歌又不想切出博客主頁，那么我們可以自己定制一個(gè)博客音樂播放界面，把自己喜歡的歌曲都放進(jìn)來，這里用到是Aplayer插件，但是歌曲來源需要我們自己定義，但是，因?yàn)楦鞔笠魳菲脚_(tái)，由于版權(quán)原因，很多歌曲是不支持外鏈播放的，難道我們就必須每首歌下載然后上傳云空間，再獲取詞曲封面么？這就比較麻煩了。其實(shí)不然，研究了半個(gè)小時(shí)，我發(fā)現(xiàn)可以采取下面的辦法，很方便：

* 首先我們找到網(wǎng)易云在線平臺(tái)，任意找到一首歌點(diǎn)進(jìn)去播放，可以在地址欄拿到音樂`ID`號(hào)

* 然后通過下面網(wǎng)址：網(wǎng)易云音樂 `XXXXXX`就是歌曲`ID`號(hào)，每一首歌我們只需要換掉這個(gè)`ID`號(hào)就行了,就相當(dāng)于每一首的外鏈了

* 最后封面圖也可以按`F12`去找頁面元素的鏈接，填到對(duì)應(yīng)的`musics.jason`文件中就可以，批量填入，聽到好聽的歌曲隨時(shí)更換隨時(shí)新增，很方便。

操作如下圖：

[外鏈圖片轉(zhuǎn)存失敗(img-aCBTIHOn-1566969757049)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/17.png)]

2.11 增加emoji支持

為博客新增對(duì)`emoji`表情的支持，使用到了 [hexo-filter-github-emojis](Package - hexo-filter-github-emojis) 的 Hexo 插件來支持 `emoji`表情的生成，把對(duì)應(yīng)的`markdown emoji`語法（`::`,例如：:smile: `:smile:`）轉(zhuǎn)變成會(huì)跳躍的`emoji`表情，安裝命令如下：

```bash

npm install hexo-filter-github-emojis --save

```

在 Hexo 根目錄下的 `_config.yml` 文件中，新增以下的配置項(xiàng)：

```yaml

githubEmojis:

enable: true

className: github-emoji

inject: true

styles:

customEmojis:

```

執(zhí)行 `hexo clean && hexo g` 重新生成博客文件，然后就可以在文章中對(duì)應(yīng)位置看到你用`emoji`語法寫的表情了。

如下圖：

[外鏈圖片轉(zhuǎn)存失敗(img-S104o6y4-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/18.gif)]

2.12 Valine評(píng)論模塊修改

`matery`主題已經(jīng)集成`Valine`評(píng)論模塊，在主題配置文件.yml中配置相應(yīng)的字段就行了。`enable: true`，`XXX`字段是需要自己注冊登錄`leancloud`官網(wǎng)，創(chuàng)建應(yīng)用然后獲取`appId`和`appKey`，其他參數(shù)根據(jù)自己的需求修改就是，如下：

```yml

valine:

enable: true

appId: XXXXXXXXXXXXXXXXXXXXX

appKey: XXXXXXXXXXXXXXXXXXXX

notify: true

verify: true

visitor: true

avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide

pageSize: 10

placeholder: 'just go go' # Comment Box placeholder

```

> 注意：`Valine`用在`matery`主題上有個(gè)`bug`就是第一條評(píng)論位置會(huì)錯(cuò)位

如下圖：

[外鏈圖片轉(zhuǎn)存失敗(img-naNuZ7cx-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/19.png)]

解決辦法：

`F12`開發(fā)者模式，控制臺(tái)定位`bug`位置，修改參數(shù)，調(diào)整對(duì)應(yīng)主題源文件參數(shù)，得以解決，如下圖示：

[外鏈圖片轉(zhuǎn)存失敗(img-wyK2iFbk-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/20.png)]

[外鏈圖片轉(zhuǎn)存失敗(img-MsSn7GuV-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/21.png)]

2.13 添加博客動(dòng)態(tài)標(biāo)簽

原理就是給博客增加一個(gè)事件判斷，如下圖所示：

[外鏈圖片轉(zhuǎn)存失敗(img-t3duvAUn-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/40.png)]

[外鏈圖片轉(zhuǎn)存失敗(img-Mi9CYdFA-1566969757051)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/41.png)]

打開博客主題文件夾，路徑：`themes/matery/layout/layout.ejs`，在對(duì)應(yīng)位置添加如下代碼：

```js

<script type="text/javascript">

var OriginTitile = document.title,

st;

document.addEventListener("visibilitychange", function () {

document.hidden ? (document.title = "看不見我 ~看不見我 ~", clearTimeout(st)) : (document.title =

"(??????) ?被發(fā)現(xiàn)了～", st = setTimeout(function () {

document.title = OriginTitile

}, 3e3))

})

</script>

```

然后 `hexo clean` && `hexo g` 即可。

因?yàn)樽謹(jǐn)?shù)超了，把第三部分：優(yōu)化部分，放在了下一篇，[點(diǎn)我跳轉(zhuǎn)]

**持續(xù)更新中...，如果遇到問題歡迎聯(lián)系我，在文章最后評(píng)論區(qū)【留言和討論】，當(dāng)然，歡迎點(diǎn)擊文章最后的打賞按鍵，請(qǐng)博主一杯冰闊樂，笑～**

關(guān)鍵詞：教程,部分

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉