Hexo-NexT 側邊欄基礎配置
前言
這篇要介紹的是側邊欄的基礎配置會包含關於、標籤、分類、歸檔、搜尋、頭像、個人相關連結（IG、Gmail…）這些功能，另外本網誌的側邊欄有新增切換語言的功能，有興趣可以看看。
關於、標籤、分類、歸檔
首先要生成關於、標籤、分類這三個分頁（但歸檔不用，他預設就有了，我也覺得很奇怪為什麼其他不要預設就生成）1
2
3hexo new page about
hexo new page tags
hexo new page categories
接著應該會發現在 source 裡面多出了三個資料夾 
點進去後會發現一個叫做 index.html 的東西，點進去後輸入以下內容（xxx 依照 about、tags、categories 哪個資料夾填入）1
2
3
4
type: "xxx"
layout: "xxx"
以 about 為例1
2
3
4
type: "about"
layout: "about"
另外，about 裡面要放一些關於自己的一些事的話，就直接接續 ---，底下繼續撰寫即可，以我的 about 為例1
2
3
4
5
6
7
8
type: "about"
layout: "about"
## 我是貓熊🐼
這裡會紀錄貓熊的生活大小事
接著要讓側邊欄顯示關於、標籤、分類、歸檔這些字樣給使用者選用，移駕到你的 theme 主題的_config.yml
找到 menu，並將 about、tags、categories，取消註解，如下（如果想改圖示的話就就跟頁底配置中更換 icon 一樣，將後面的圖示替換即可）1
2
3
4
5
6menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
恭喜你這樣就完成第一步啦～應該可以在網站上看到這些東西了
搜尋
首先安裝搜尋需要的插件1
npm install hexo-generator-searchdb
然後到你的 theme 主題的_config.yml，搜尋 local_search，將 enable，設為 true，就完成嘍，超簡單的吧～1
2
3
4
5
6
7
8
9
10
11
12
13# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false
頭像
這個更簡單，在 theme 主題的_config.yml，搜尋 avatar，然後將你想要的頭像放到 theme 主題中 /source/images
然後將 url 後設定為 /images/image_name，以我的頭像為例，其檔名叫做 Panda_Me.png，而 rounded 代表是否要顯示在圓框內，rotated 表示滑鼠移到頭像上時是否要旋轉1
2
3
4
5
6
7
8# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/Panda_Me.png
# If true, the avatar will be displayed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: false
個人相關連結
接下來這是最輕鬆的，一樣在 theme 主題的_config.yml，然後搜尋 social，在底下找你想要顯示的網站，取消註解，然後將你的網址打上去即可，以我的為例，我放了 Github、Gmail、IG1
2
3
4
5
6
7
8
9
10
11
12
13
14# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/moon-jam || fab fa-github
Gmail: mailto:wu.messi.wu@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
IG: https://www.instagram.com/mooooonjam || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
結語
側邊欄的基礎功能都已經配置完畢，看起來已經跟一般的部落格看起來差不多了呢，是不是很簡單啊，如果有發現哪裡講錯或是有任何疑問，都歡迎在底下留言告訴我喔～