接下來要把主題配置檔案的剩餘部份給說明完畢囉
網站載入設定
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」來做示範
複製字體名稱，並且在 global 底下的 family 貼上
| # Global font settings used for all elements inside <body>. global: external: true family: Noto Sans TC size: |
接著重新建立網站檔案後就能看到成果了
Adobe Fonts
Adobe 字體需要取得專案 ID 才能使用，所以步驟會比較多
首先進入 Adobe Fonts 並且登入帳號，選擇字體並且點選右方的「新增至網頁專案」
輸入專案名稱後點選「建立」
將含有專案 ID 的程式碼複製下來（在「我的 Adobe Fonts」→「網路專案」也有相同的程式碼），還有下方的字體名稱也一併複製
在 /source/ 內新增 _data 資料夾，接著在裡面新增 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: |
接著重新建立網站檔案後就能看到成果了
圖片檢視
NexT 內建兩種圖片放大插件：「FancyBox」和「Medium Zoom」
都不開啟也可以，就只是不能放大而已
FancyBox
修改位置：第 525 行
- 功能較多
- 可循環播放所有圖片
- 可顯示註解
Medium Zoom
修改位置：第 530 行
- 跟 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」）
Application name：名稱
Homepage URL：網站域名（https://<username>.github.io/）
Application description：描述，可不填
Authorization callback URL：網站域名（https://<username>.github.io/）
建立完成後，接著點選「Generate a new 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 proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # 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 內的設定講得差不多了，不過其實還有網站統計的部分還沒做
這部分就留到網站部屬完成後再做吧
參考資料
達人
