Hexo 簡易調教指南（四）：主題設定—功能篇

發表日期： 2021-08-28 分類：教學， Hexo 調教指南字數： 3,873 字閱讀時間 ≈ 7 分鐘

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

網站載入設定

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 選項，修改 host 和 family

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_id 和 client_secret 貼上

接著在 github_id 和 admin_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