Butterfly 主題魔改 — 為網站添加文章時效/過期提醒

Error_0x03F72024-07-142024-07-14

前言

其實主題就有內建文章時效性提醒的功能了，只要在 config.yml 中將其打開就好，無奈內建的是判斷文章更新時間到今天的天數來決定加不加提醒，白話說就是只要文章更新時間距離現在超過一年就一定會自動加上這個文章過期提醒，但我的筆記和學習成果內容不需要這樣的判斷機制，不然未來所有舊的學習紀錄就被加上了文章過期的提示。

所以我決定自己來寫這個功能 — 能夠讓我自己決定哪些文章要顯示時效性提醒，又能顯示出該文章距離今天已過多久了的實際天數，甚至外觀顯眼又好看，這個功能也不難寫。

教學

1. 到主題資料夾的 scripts/tag/ 新增 outdate.js 自定義標籤，內容打上下圖下方的程式碼。

// 向 Hexo 註冊一個自定義標籤 'outdate'
// hexo.extend.tag.register 方法接受三個參數:
// 1. 標籤的名稱，這邊是 'outdate'
// 2. 處理函數，當標籤在 MD 檔裡被使用時會調用該函數
// 3. 可選的配置對象，這邊設定 {async: false} 表示該函數是同步的

hexo.extend.tag.register('outdate', function(args) {
    // 從傳入的參數中取得文章最後更新的日期
    // args 是一個數組，包含在標籤中傳遞的所有參數
    // 這裡假設第一個參數是最後更新的日期字符串
    const lastUpdateDate = new Date(args[0]);

    // 取得目前的日期
    const currentDate = new Date();

    // 計算目前日期和文章最後更新日期之間的時間差，以毫秒為單位
    const timeDifference = currentDate - lastUpdateDate;

    // 將時間差轉換成天數。時間差(毫秒) / (1000 毫秒/秒 * 60 秒/分 * 60 分/時 * 24 時/天)
    const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  
    // 返回 HTML，顯示文章時效性/過期提醒的提示還有自文章最後一次更新以來到現在的天數
    return `<div class="post-outdate-notice">這篇文章最後更新於 ${daysDifference} 天前，內容和資訊非最新狀態，可能已經過時，請斟酌閱讀。</div>`;
  }, {async: false});

2. 到 Hexo 根目錄找到 package.json。

3. 在 scripts 下添加 "tags": "scripts/tags"，確保 Hexo 啟動時會加載剛在 scripts 下寫的腳本

4. 之後別忘了 Hexo cl&&hexo g&&hexo s 重啟 Hexo，確保 Hexo 加載新的腳本和配置。

5. 最後在想添加時效/過期提醒的文章 MD 檔中的內容加上 {% outdate '20XX-XX-XX' %}，把其中的日期改成該文章的最後更新日期，這樣就能成功顯示出有動態天數的過期提醒了，簡單、簡潔又方便，未來也只要在 MD 檔裡加 {% outdate '20XX-XX-XX' %} 就行了。