Day 18:為你的 Hexo 部落格文章添加文章字數與所需閱讀時間

今天要實作的內容,能夠為自己的 Hexo 部落格文章增加提示本篇文章所需字數以及所需閱讀時間,能夠幫助讀者好掌握閱讀這篇文章大致上需要花費的時間。

安裝套件

打開終端機指定位址至 Hexo 目錄後,執行以下這段指令:

1
npm install hexo-symbols-count-time --save

修改 Next 設定檔

開啟 Next 佈景的 _config.yml 檔案,找到以下這段語法:

1
2
3
4
5
6
7
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: false # 是否獨立一行
# 以下設定如果填 false,「文章字數:」與「所需閱讀時間 ≈ 」會以圖標呈現
item_text_post: true # 文章
item_text_total: true # 網頁底部

在 Hexo 設定檔新增語法

開啟 Hexo 根目錄 _config.yml 檔案,增加以下這段語法:

1
2
3
4
5
6
7
8
9
10
# count
symbols_count_time:
symbols: true # 文章字數統計顯示
time: true # 文章閱讀時間顯示
total_symbols: false # 網頁底部字數統計顯示
total_time: false # 網頁底部閱讀時間顯示
exclude_codeblock: false # 字數統計是否排除程式碼
awl: 4 # 平均文字長度,中文為 2, 英文為 5, 預設為 4
wpm: 275 # 一分鐘閱讀字數
suffix: "分鐘"

實作成果

文章(項目以文字呈現)

文章(項目以文字呈現)

文章(獨立一行呈現)

文章(獨立一行呈現)

網頁底部(項目以圖標呈現)

網頁底部(項目以圖標呈現)

參考資料

  • 忘了當初照哪一篇教學文章操作了,找到再補。

本篇文章同步發布於 iT 邦幫忙