<建站系列-三> NexT主題的個(gè)性化配置

時(shí)間：2023-04-30 03:45:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-30 03:45:01 來源：網(wǎng)站運(yùn)營(yíng)

<建站系列-三> NexT主題的個(gè)性化配置：本文章首發(fā)于筆者博客，歡迎關(guān)注~

前言：
前兩篇博文我們搭建了個(gè)人博客主頁(yè)，并掌握了常用的博客管理知識(shí)，接下來介紹NexT主題的個(gè)性化配置，服務(wù)博客主頁(yè)更豐富的功能，真正做到個(gè)性化，與眾不同。Ok， let's get started !

一、基礎(chǔ)自定義

修改主題配置文件_config.yml對(duì)應(yīng)項(xiàng)，完成基礎(chǔ)自定義。

• # Site Information Settings項(xiàng)：favicon是網(wǎng)站圖標(biāo)，可更改；license及size,sidebar定義博客知識(shí)許可證，sidebar: true可以在側(cè)邊欄顯示。
  
• # Menu Settings項(xiàng)：菜單欄設(shè)置。將菜單欄設(shè)置前的注釋# 去掉即可在側(cè)邊欄顯示，建議把about, tags, categories, archives顯示出來。上一篇博文中介紹的打標(biāo)簽分類可在tags和categories兩項(xiàng)分別找到。每個(gè)菜單項(xiàng)||右側(cè)設(shè)置的是該菜單項(xiàng)的圖標(biāo)，Hexo用的是Font Awesome Icon，每個(gè)icon對(duì)應(yīng)一個(gè)名稱，如heart對(duì)應(yīng) ，可以根據(jù)個(gè)人喜好隨意修改，蕪湖~！最后，設(shè)置icons: true即可顯示菜單項(xiàng)圖標(biāo)，還可設(shè)置badges: true顯示每個(gè)菜單項(xiàng)的統(tǒng)計(jì)數(shù)，比如tags和categories的數(shù)目。
  
• # Sidebar Settings項(xiàng)：側(cè)邊欄設(shè)置?？稍O(shè)置側(cè)邊欄的位置、寬度等，avatar的url可設(shè)置個(gè)人頭像，將頭像圖片放到source路徑下(也可以再創(chuàng)建子路徑，如source/images/)，然后設(shè)置url: me.jpg(或者url: /images/me.jpg)；# Social Links可以設(shè)置社交賬號(hào)鏈接，比如GitHub，還可以手動(dòng)添加國(guó)內(nèi)社交賬號(hào)，比如本站，同樣是用Font Awesome Icon做圖標(biāo)，所以可以自由定制。
  
• # Footer Settings項(xiàng)：腳注設(shè)置。可設(shè)置since建站時(shí)間，底部icon(也是FAI，可修改)，icon的動(dòng)畫，Powered by等信息。
  
• # Post Settings項(xiàng)：博文設(shè)置。默認(rèn)設(shè)置即可，令可設(shè)置打賞信息，Donate設(shè)置為enable: true，并在reward除加入收款二維碼即可。
  
• # Misc Theme Settings項(xiàng)：雜項(xiàng)設(shè)置。設(shè)置代碼塊主題和樣式，比如light: monokai設(shè)置成monokai主題，style: mac設(shè)置成蘋果mac樣式；設(shè)置Follow me on GitHub，開啟即可。NexT支持的主題。
  
• # Font Settings項(xiàng)：字體設(shè)置?？梢苑謩e設(shè)置全局、標(biāo)題、文章、代碼塊等字體。
  

以上是常用自定義配置，其余配置不再細(xì)說，自行仔細(xì)閱讀配置文件。

---

二、添加本地搜索

主題配置文件中# Local Search項(xiàng)開啟local_search，即enable: true。

安裝環(huán)境依賴，命令行輸入：

npm install hexo-generator-searchdb --save然后生成并在本地端口查看：

hexo ghexo s如果正常，可以在左側(cè)邊欄看到Search按鈕，點(diǎn)擊即可本地檢索。

---

三、添加相冊(cè)頁(yè)

進(jìn)一步個(gè)性化，我們可以在博客中新建一個(gè)相冊(cè)頁(yè)，用來記錄分享生活有意思的事情。只需四個(gè)步驟：

• 新建一個(gè)Page：取名photos（或其它），用來充當(dāng)相冊(cè)展示頁(yè)面，輸入命令：

heox n page photos

• 為新的Page創(chuàng)建側(cè)邊欄菜單項(xiàng)：這個(gè)菜單項(xiàng)將會(huì)是相冊(cè)進(jìn)入路徑，打開主題配置文件，在定義菜單的位置即menu: 下面添加新Page的菜單項(xiàng)：

photos: /photos/ || fa fa-camera # 注：可換其它fa圖標(biāo)

• 編輯相冊(cè)頁(yè)：第一步生成了文件source/photos/index.md，這便是相冊(cè)頁(yè)，根據(jù)個(gè)人喜好插入圖片編輯，下面舉個(gè)例子：

---title: photos---# 我的相冊(cè)## 相冊(cè)1{% gp 5-3 %} ![IMG-1.jpg](https://xxx.yyy.zzz.img1.jpg) ![IMG-2.jpg](https://xxx.yyy.zzz.img2.jpg) ![IMG-3.jpg](https://xxx.yyy.zzz.img3.jpg) ![IMG-4.jpg](https://xxx.yyy.zzz.img4.jpg) ![IMG-5.jpg](https://xxx.yyy.zzz.img5.jpg){% endgp %}上面采用圖床的方式插入圖片，這樣的好處是網(wǎng)頁(yè)和圖片數(shù)據(jù)分離，網(wǎng)頁(yè)本身加載速度會(huì)快很多，強(qiáng)烈推薦這種方式。

免費(fèi)的圖床挺多的，當(dāng)然付費(fèi)的會(huì)更穩(wěn)定。這里推薦一個(gè)很好用的免費(fèi)圖床，SM.MS，提供5G免費(fèi)存儲(chǔ)。

注：上面Markdown中插入圖片的方式是組方式，其它Markdown插圖方式和Markdown高階語(yǔ)法見博客，搜索即可。

• 開啟圖片縮放插件：?jiǎn)⒂肗exT內(nèi)嵌的圖像縮放插件，以允許放大圖像。NexT提供了兩個(gè)插件：fanncybox和mediumzoom，前者功能更加強(qiáng)大，而后者更加輕巧所以網(wǎng)頁(yè)加載更快，按需選擇。修改主題配置文件，如fancybox: true即可。

相冊(cè)頁(yè)真的是一個(gè)很好的記錄和展示的窗口，筆者博客的相冊(cè)頁(yè)效果如下圖，是不是很棒呢

---

四、開啟評(píng)論系統(tǒng)

一個(gè)好的博客，應(yīng)該提供一個(gè)用于交互的評(píng)論區(qū)，NexT內(nèi)嵌了7個(gè)插件用于支持評(píng)論區(qū)的搭建，可參考官方教程。值得注意的是，部分評(píng)論系統(tǒng)國(guó)內(nèi)可能無(wú)法使用，需要翻墻。

接下來以使用最為廣泛的Disqus為例介紹搭建方法(Disqus需要翻墻，手動(dòng)滑稽)。四個(gè)步驟：

• 創(chuàng)建一個(gè)Disqus賬號(hào)，登陸，點(diǎn)首頁(yè)GET STARTED，點(diǎn)下面的I want to install Disqus on my site將會(huì)出現(xiàn)Create a new site界面：

• 輸入Website Name作為你的Disqus簡(jiǎn)稱，注意不需要和你的網(wǎng)站同名哦，只是為了用于區(qū)分的簡(jiǎn)稱，然后選擇一個(gè)Category和Language，然后點(diǎn)底部Create Site，然后選擇一個(gè)套餐（可免費(fèi)試用30天）
  
• 選擇平臺(tái)，由于Disqus沒有為Hexo專門定制，所以選底部的I don't see my platform listed, install manually with Universal Code，然后可以自由配置，比如評(píng)論者的頭像等等，配置完點(diǎn)Complete Setup
  
• 最后配置NexT，修改主題配置文件如下：
  

disqus: enable: true # 開啟 shortname: 你的Disqus網(wǎng)站簡(jiǎn)稱 count: true # 統(tǒng)計(jì)每個(gè)博文評(píng)論數(shù)，建議開啟其它NexT支持的評(píng)論系統(tǒng)的搭建類似，你那么聰明我就不一一展開啦。

---

后話：
參照建站系列的三篇博文，我們終于搭建起了足夠個(gè)性化的博客主頁(yè)，不管你是學(xué)術(shù)風(fēng)還是二次元，都能搭建符合個(gè)性的網(wǎng)站。另一方面，我們還為我們的博客主頁(yè)添加了很多功能，大大豐富了網(wǎng)站的功能，是不是很有意思呢！具體效果可以看我的博客，下面附上效果圖。

細(xì)心的你可能已經(jīng)注意到主頁(yè)側(cè)邊欄的音樂播放界面，沒錯(cuò)，我們還能為我們的主頁(yè)添加音樂播放插件，是不是很nice? 下一篇博文將介紹如何添加播放界面，也將是建站系列的終結(jié)篇。