Hexo個人部落格 - 主題/套件設定

發表於 | 更新於 | In | 0 comments |
文章字數 : 1.7k | 所需閱讀時間 ≈ 7 分鐘

完成初步部落格的設置後，預設的主題覺得很傷眼睛
換主題是建部落格時最開心也最燒腦的事

Hexo 主題更換

官方提供許多主題可更換：Themes | Hexo
個人偏好這種乾淨簡潔風 NexT，這個主題也是非常熱門的主題

安裝喜愛的主題

這邊就以Next為範例，先將要安裝的主題clone下來

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

安裝完成後，themes的資料夾內會多一個next的資料夾。
到_config.yml檔案內，尋找 # Extensions，將主題啟用才算完成唷！

1
theme: next

主題設定

接著來調整主題的相關設定

1. 版型設定

NexT 提供多種不同的外觀，可以在主題設定theme/next/_config.yml中找到 # Schemes
將自己喜愛的註解打開就可以了

1
2
3
4
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

2. 代碼背景

NexT 的代碼背景色也可做更換，共有5款主題可選擇。在 主題設定theme/next/_config.yml 文件中找到 highlight_theme 。預設使用的是白色的normal，選項有normal、night、 night blue、night bright、night eighties。

1
2
3
4
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
highlight_theme: normal

3. 大頭貼設定

到 theme/next/_config.yml 文件中，搜尋# Sidebar Avatar

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: 大頭貼位置

4. 設置社群媒體連結

到 theme/next/_config.yml 文件中，找到 #Social Links，將要顯示在首頁的媒體打開註解，並在後方加入連結即可。

1
2
3
4
5
6
7
8
9
10
11
social:
  GitHub: https://github.com/ || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

5. 增加選單分頁

預設只有首頁的分頁，可依據個人需求將分頁打開或是增加，在 theme/next/_config.yml 設定，也可將分頁名稱修改為中文→「首頁: /|| home」。

1
2
3
4
5
6
7
8
9
10
menu:
  home: /|| home
  about: /about/|| user
  tags: /tags/|| tags
  categories: /categories/|| th
  archives: /archives/|| archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  #分頁名稱：路徑 || 分頁icon

這邊要特別注意的是，在打開分頁調整完畢後，記得「路徑 與 ||」中間不能有空格，否則會造成分頁無法顯示。

1
2
3
# Enable/Disable menu icons.
menu_icons:
  enable: true

在menu的下方可以選擇是否要顯示分頁icon，也可以更換成自己喜愛的icon，Next使用的是 Font Awesome 的icon，可至網站選擇。

6. 設置網站icon

將要更換的icon檔案放到 themes/next/source/images 裡面，
打開 theme/next/_config.yml ，搜尋 favicon ，依序將檔案更換即可。

1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

主題套件設定

1. 在部落格底部增加訪客統計

Next主題已有置入這個功能了，首先開啟 theme/next/_config.yml 搜尋 busuanzi_count 把這個功能打開
再依照個人使用需求修改，這邊的site_header(icon)也都是可以做修改的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true  // 開啟統計
  # custom uv span for the whole site 網站的訪客數
  site_uv: true  
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site 網站的總瀏覽量
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only  閱讀數量
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

主題內是使用的是不蒜子的腳本統計，若開啟功能後有無法顯示的問題，可至 layout/_third-party/analytics/busuanzi-counter.swig 開啟檔案，將第3行的腳本網址更改為 https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

※在Local端的數字會顯示異常，推到Github上就會顯示正確囉！

2. 文章字數統計 & 預計閱讀時間

這邊好像會有不同的方法開啟，原本試的是 symbols_count_time 一直沒有成功
後來使用的是Next主題內建的 post_wordcount
首先，安裝 hexo-wordcount 套件

1
npm i --save hexo-wordcount

開啟 theme/next/_config.yml 文件，找到 post_wordcount 依個人需求調整以下設定。

1
2
3
4
5
6
post_wordcount:
  item_text: true
  wordcount: true  // 單篇文章字數統計
  min2read: true  // 單篇文章閱讀時間
  totalcount: false  // 網站字數統計
  separated_meta: true

3. 設定標籤 & 分類

這個在設定時搞了很久才弄出來，一定要記錄一下！！！
首先，輸入以下語法建立標籤和分類的頁面

1
2
$ hexo new page tags
$ hexo new page categories

建立完成後，到 theme/next/_config.yml ，找到 menu 將 tags 和 categories 的註解打開。(若已經打開的話則無需理會)

1
2
3
menu:
  tags: /tags/|| tags
  categories: /categories/|| th

剛才建立的頁面還需做一些調整，到 /source 資料夾中，會看到 tags 和 categories 兩個資料夾，分別打開裡面的 index.md ，分別加上 type: "tags" 以及 type: "categories"即可。

4. 優化URL

Hexo本身Url的SEO狀況並不是設計非常漂亮，因為在 SEO 規範中文連結遠比英文連結差，所以這邊紀錄一下該如何使用。

1.首先，安裝hexo-abbrlink套件

1
npm install hexo-abbrlink --save

2.安裝完畢後，開啟_config.yml找到permalink

1
2
3
permalink: :category/:year:month:day/:abbrlink/
            /posts/:abbrlink/
// 這邊網址的顯示方式可自行做調整

然後在文件最末端加入abbrlink設置

1
2
3
4
# abbrlink config
abbrlink:
  alg: crc32  # 演算法：crc16(default) and crc32 
  rep: dec    # 進位制：dec(default) and hex

※ 在套件的 GitHub 下方有解釋四種生成方式。

1
2
3
4
5
6
7
8
9
10
11
crc16 & hex
https://balajasa.github.io/posts/66c8

crc16 & dec
https://balajasa.github.io/posts/65535

crc32 & hex
https://balajasa.github.io/posts/8ddf18fb

crc32 & dec
https://balajasa.github.io/posts/1690090958

3.Category 調整
若連結內有使用分類名稱為url的話，這邊需要先做調整
首先，開啟_config.yml找到category_map，然後依照分類的名稱新增

1
2
3
4
5
6
7
# Category & Tag
# 中文名稱:英文名稱
category_map:
  Hexo部落格: hexo
  前端筆記: webnote
  HTML: html
  CSS: css

※ 這邊要注意分類最好不要有空格，英文前後空格也不要有，否則可能會無法正常對應。

參考來源：
https://www.twblogs.net/a/5c2a0256bd9eee01606d3636
https://hsiangfeng.github.io/hexo/20190517/2562079032/