Hexo NexT 文末感謝閱讀提示

又犯了”看到別人的部落格有，我也想試試看的”毛病 😅 找了很多網路教學，發現基本都會修改到 NexT 的原始檔案，這對後面的版本更新很不利，所以決定自己改改看!

前言

在看了網路教學把部落格增加了很多功能後，有一次不小心覆蓋了原始檔案，然後就部落格”主題初始化”了。因為之前都是照著別人的教學直接去修改主題檔案的原始碼，根本記不得是改了哪個路徑的哪個檔案，也不記得改了那一大堆原始碼裡的哪一段。所以我連想重做一次都很難，要重新找一次教學，想哭……

仔細看了 NexT 團隊提供的說明，他們有提出: 為了避免發生我這種狀況，建議大家在做功能修改時，盡可能不要改動原始檔案，而是利用 custom_file_path 新建設定檔案套用，會讓 NexT 主題在版本更新時可以更無痛升級。

研究一下網路教學的程式碼結構，發現就是把基本的 HTML 、 CSS 套進 Nunjucks 的模板裡而已。成功試出來後，趕快把修改步驟記錄下來，讓自己以後魔改時參考。

Custom Files 用法

本篇設定的 Hexo 及 NexT 版本如下，不同版本可能會有功能或設定方式上的差異!
Hexo 版本: hexo: 6.0.0
Next 版本: hexo-theme-next-8.8.2

在不改變 NexT 原始檔的情況下，只要在 root\source\_data 中新建並編輯相關檔案，即可直接覆蓋 NexT 原始設定。使用 Custom Files 的好處:

1. 後續如果 NexT 有版本升級可直接完全覆蓋，已做好的個人化設定不受影響。
2. 可以直接在 Custom Files 管理所有的個人化修改。

修改步驟

本文的 NexT 主題 config 一律採用 root\_config.next.yml 方式設定，請參考 config.next.yml 設定 說明。

新建 Custom File

1. 修改 root\_config.next.yml 設定，把 postBodyEnd 取消註解。

   custom_file_path:
     postBodyEnd: source/_data/post-body-end.njk

2. 在 root\source\_data 新增 post-body-end.njk 檔案。post-body-end 指的就是每篇文章最後的位置。

簡單版(直接寫入要顯示的文字)

1. 將文字、樣式、模板寫進 post-body-end.njk 檔案。

   <!-- 在文章底部添加感謝閱讀 -->        # 說明修改目的，方便後續維護
   <div>
     {% if not is_index and theme.end_info.enable %}
       <div style="text-align:center;color: #ccc;font-size:14px;letter-spacing: 5px">
         ----------------  本文結束  <i class="fa fa-paw"></i>  感謝您的閱讀  -----------------
       </div>
     {% endif %}
   </div>

2. 新增 root\_config.next.yml 設定，開啟 end_info 功能。

   end_info:
     enable: true

進階版(要顯示文字在 root\_config.next.yml 中修改)

1. 將文字、樣式、模板寫進 post-body-end.njk 檔案。

   <!-- 在文章底部添加感謝閱讀 -->
   <div>
     {% if not is_index and theme.end_info.enable %}
       <div style="text-align:center; color:#ccc; font-size:14px; letter-spacing:5px">
         {{theme.end_info.start_info}}&nbsp;<i class="{{theme.end_info.icon}}"></i>&nbsp;{{theme.end_info.end_info}}
       </div>
     {% endif %}
   </div>

2. 新增 root\_config.next.yml 設定，開啟 end_info 功能。

   end_info:
     enable: true                                 # 開啟功能
     start_info: '----------------  本文結束'      # 起始文字
     icon: fa fa-paw                              # icon 編碼
     end_info: '感謝您的閱讀  -----------------'   # 結束文字

修改程式碼說明

這次的進階版是自己琢磨出來的，將撰寫規則筆記下來，方便後續修改並維護。

Nunjucks 模板啟用

不同條件使用 and 連接即可。

{% if not is_index and theme.end_info.enable %}
  # 中間填入符合條件後要執行的東西
{% endif %}

1. if not is_index
   觀察 Hexo 結構可以發現，除了 _posts 是由各個不同標題的 .md 檔組成，其他如: 標籤、分類、404、歸檔…等資料夾都只有 index.md。所以如果只要在非 index 頁面啟用，可加上此條件。

2. theme.end_info.enable
   上面這段的意思是: 如果 theme 的 config 檔中， end_info 設定裡的 enable 值為 True 時啟用。
   其中， theme 在 root\config.yml 中已設定為 next ，所以他會直接到 root\_config.next.yml 尋找 end_info 的設定值。

從 theme config 中抓取資料

從 theme config 裡 end_info 設定中抓取不同項目的值。參考進階版第二步驟的設定項目。

{{theme.end_info.start_info}}
{{theme.end_info.icon }}
{{theme.end_info.end_info}}

CSS 樣式設定

在 style=”” 中填入 CSS 樣式，可自行搜尋可填入的值或其他樣式。

<div style="text-align:center; color:#ccc; font-size:14px; letter-spacing:5px"></div>

1. 對齊方式(text-align)
2. 字體顏色(color)
3. 字體大小(font-size)
4. 字元間距(letter-spacing)

文章內容如有錯誤，歡迎留言討論！