Hexo 簡易調教指南(四):主題設定—功能篇

接下來要把主題配置檔案的剩餘部份給說明完畢囉

網站載入設定

Preconnect

修改位置:第 344 行

提前針對需要用到的資源建立連線,可以省下連結每項資源所產生的來回通訊延遲時間

開啟後會在網頁程式碼中加入兩行程式碼,告訴瀏覽器需要預先連線的資源

# Preconnect CDN for fonts and plugins.
# For more information: https://www.w3.org/TR/resource-hints/#preconnect
preconnect: false

Pjax

修改位置:第 526 行

讓不同網頁的內容在同一個頁面上呈現,這樣就不必重複載入相同的網頁元素

可以提升使用者體驗,並且縮短載入時間

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: false

圖片延遲載入

修改位置:第 539 行

開啟之後,所有圖片都會等到其他的網頁元素載入完畢後才會開始載入

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: false

修改字體

修改位置:第 426 行

預設的英文字體為「Lato」,中文字體則是「微軟雅黑」

要自訂字體的話,需要先將第 427 行的 enable 設為 true

font:
  enable: true

下面會示範如何使用 Google Fonts 和 Adobe Fonts 的字體

Google Fonts

進入 Google Fonts 的首頁,找到自己要使用的字體,這裡使用「Noto Sans TC」來做示範

Google Fonts 網頁

複製字體名稱,並且在 global 底下的 family 貼上

# Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Noto Sans TC
    size: 

接著重新建立網站檔案後就能看到成果了

套用 Noto Sans TC 字體後的網頁

Adobe Fonts

Adobe 字體需要取得專案 ID 才能使用,所以步驟會比較多

首先進入 Adobe Fonts 並且登入帳號,選擇字體並且點選右方的「新增至網頁專案」

Adobe Fonts 網頁

輸入專案名稱後點選「建立」

輸入名稱和選擇要使用的字體粗細

將含有專案 ID 的程式碼複製下來(在「我的 Adobe Fonts」→「網路專案」也有相同的程式碼),還有下方的字體名稱也一併複製

需要使用的程式碼以及字體列表

/source/ 內新增 _data 資料夾,接著在裡面新增 head.njk 並將程式碼貼上

將上述程式碼貼到 head.njk 檔內

開啟 _config.next.yml 找到 custom_file_path ,把下方第一個 head 取消註解

取消註解之後,該檔案的內容會新增至網頁原始碼

回到 font 選項,修改 hostfamily

font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://use.typekit.net/

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: source-han-serif-tc
    size: 

接著重新建立網站檔案後就能看到成果了

套用 Source Han Serif TC 字體後的網頁

圖片檢視

NexT 內建兩種圖片放大套件:「FancyBox」和「Medium Zoom」

都不開啟也可以,就只是不能放大而已

FancyBox

修改位置:第 525 行

FancyBox 展示圖片的效果

  • 功能較多
  • 可循環播放所有圖片
  • 可顯示註解

Medium Zoom

修改位置:第 530 行

Medium Zoom 展示圖片的效果

  • 跟 Medium 相同的圖片放大方式
  • 無法顯示註解

中、英文之間加空格

修改位置:第 544 行

可以幫你把文章內的中文和半形英、數、符號之間加入空格

# Pangu Support
# For more information: https://github.com/vinta/pangu.js
# Server-side plugin: https://github.com/next-theme/hexo-pangu
pangu: false

留言功能

修改位置:第 576 行~第 653 行

NexT 內建七種不同的留言系統可供選擇,其中包含常見的 Disqus

我自己的網站是使用 Gitalk,優點是使用 GitHub 帳號就能留言,並且支援 Markdown 語法

首先要建立 OAuth 應用程式(路徑:「Settings」→「Developer settings」→「OAuth Apps」→「Register a new application」)

建立 OAuth 應用程式需要填寫名稱、網域等資訊

  • Application name:名稱
  • Homepage URL:網站域名(https://<username>.github.io/)
  • Application description:描述,可不填
  • Authorization callback URL:網站域名(https://<username>.github.io/)

建立完成後,接著點選「Generate a new client secret」

建立完後還需要產生 Client secret

這樣就會獲得 Client ID 和 Client secret,複製這兩個數值

複製 Client ID 和 Client secret 的值

回到 _config.next.yml ,分別在 client_idclient_secret 貼上

接著在 github_idadmin_user 填入 GitHub 帳號、repo 填入網站域名、 language 填入「zh-TW」

修改位置:第 626 行

# Gitalk
# For more information: https://gitalk.github.io
gitalk:
  enable: true # 啟用 Gitalk
  github_id: # 輸入 GitHub 使用者名稱
  repo: # 輸入專案名稱(<username>.github.io)
  client_id: # 輸入 Client ID
  client_secret: # 輸入 Client secret
  admin_user: # 輸入 GitHub 使用者名稱
  distraction_free_mode: true # Facebook-like distraction free mode
  # When the official proxy is not available, you can change it to your own proxy address
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy adress
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-TW # 強制顯示的語言,不填則是按照系統語言

調整動畫

修改位置:第 827 行

可以更改文章列表、文章標題、文章內容、目錄欄和側邊欄區塊的動畫

所有可使用的效果都列在這個網站

# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
  enable: true
  async: false
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp

載入進度條

修改位置:第 841 行

可以顯示目前網站讀取的進度

如果有啟用 Pjax 的話,這個功能就一定要開啟

# Progress bar in the top during page loading.
# For more information: https://github.com/rstacruz/nprogress
nprogress:
  enable: false
  spinner: true

總結

這兩篇已經把 _config.next.yml 內的設定講得差不多了,不過其實還有網站統計的部分還沒做

這部分就留到網站部屬完成後再做吧

參考資料

[教學] 深入淺出 Preload, Prefetch 和 Preconnect:三種加快網頁載入速度的 Resource Hint 技巧 | Shubo 的程式教學筆記

next-theme/pjax - GitHub

[Hexo] NexT 更改字體 | UlaGraphy

Comment Systems | NexT

十分鐘超詳細替 Hexo Next 開啟 Gitalk 留言版 | Welcome.Web.World