文章显示“更新”标志

博客中，您可能希望标记哪些文章最近更新过，以便读者更方便地识别最新内容。本文将教您如何添加一个“Updated”标志，并基于更新时间动态隐藏标志（如超过 7 天后隐藏）。

1. 使用文章的 updated 属性判断文章是否有更新。
2. 在模板中为“Updated”标志添加 data-updated 属性，记录更新时间。
3. 使用 JavaScript 脚本，在页面加载时计算更新时间与当前时间的差距，动态控制标志的显示或隐藏。
4. 使用 CSS 为“Updated”标志添加样式。

---

步骤 1：修改文章模板

我们需要在文章列表模板中添加“Updated”标志。找到 index.ejs（首页），通常路径：themes/fluid/layout/index.ejs

在模板文件中找到index-btm post-metas（如日期显示的位置), 插入以下内容：

<div class="index-btm post-metas">
  <% if (theme.index.post_meta.date) { %>
    <div class="post-meta">
      <i class="iconfont icon-date"></i>
      <time datetime="<%= full_date(post.date, 'YYYY-MM-DD HH:mm') %>" pubdate>
        <%- date(post.date, config.date_format) %>
      </time>

      <%# -------- 加入以下内容 --------%>
      <% if (post.updated) { %>
        <% const updatedDays = (new Date() - new Date(post.updated)) / (1000 * 60 * 60 * 24); %>
        <% if (updatedDays <= 7) { %>
          <span class="updated-flag" data-updated="<%= post.updated.toISOString() %>">Updated within 7 days</span>
        <% } %>
      <% } %>
      <%# ----------------------------%>

    </div>
  <% } %>
</div>

span标签显示”Updated within 7 days“，也可以换成”Updated“ 或者”更新“。

代码解析

1. post.updated：检查文章是否有 updated 属性。
2. 计算时间差：(new Date() - new Date(post.updated)) / (1000 * 60 * 60 * 24) 将更新时间差转换为天数。
3. 判断 7 天内：如果更新时间差小于等于 7 天，显示“Updated”标志。
4. data-updated 属性：将更新时间以 ISO 格式写入 data-updated，供 JavaScript 使用。

步骤 2：创建动态脚本

在主题的 source/js/ 文件夹中创建一个新的文件 update-flag.js，用于动态隐藏过期的标志。

文件路径：themes/fluid/source/js/update-flag.js

添加以下代码：

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM fully loaded");
  const updateFlags = document.querySelectorAll('.updated-flag');
  console.log("Found updated flags:", updateFlags);

  const expiryDays = 7; // 设置有效期为 7 天
  const expiryTime = expiryDays * 24 * 60 * 60 * 1000; // 转换为毫秒

  updateFlags.forEach(flag => {
    const updatedDate = new Date(flag.dataset.updated); // 从 data-updated 获取时间
    const timeDiff = Date.now() - updatedDate.getTime(); // 当前时间与更新时间的差

    console.log(`Article updated on: ${updatedDate}, Time difference: ${timeDiff / (1000 * 60 * 60 * 24)} days`);

    if (timeDiff > expiryTime) {
      console.log("Hiding outdated updated flag");
      flag.style.display = 'none'; // 隐藏过期标志
    }
  });
});

步骤 3：确保脚本被加载

在主题的 scripts.ejs 文件中。
通常位于 themes/fluid/layout/_partial/scripts.ejs），添加对 update-flag.js 的引用：

<script src="/js/update-flag.js" defer></script>

defer 确保脚本在页面内容加载完成后执行。

步骤 4：定义样式

为“Updated”标志添加样式，使其在页面上显眼且美观。找到主题的 CSS 文件。
通常是themes/fluid/source/css/_pages/_base/color-schema.styl，在文件末尾添加以下代码：

.updated-flag {
  background-color: #ff0000; /* 红色背景 */
  color: white;             /* 白色文字 */
  font-size: 0.8em;         /* 小字号 */
  padding: 2px 5px;         /* 内边距 */
  border-radius: 3px;       /* 圆角 */
  margin-left: 5px;         
}

虽然styl文件支持css，但是以防万一，可以使用以下代码：

.updated-flag
  background-color #5d8744
  color white
  font-size 0.8em
  padding 2px 5px
  border-radius 3px
  margin-left 5px 

步骤 5：测试并验证

1. 创建测试文件

在source/_posts下面创建文章test.md。修改某篇文章的 Front Matter，让 updated 时间为近期或较早的日期，此文章超过7天，updated标志消失，可以修改其文章已测试显示updated：

title: test
date: 2025-01-01
updated: 2025-01-08

2. 生成和部署

运行以下命令生成并查看网站：

hexo clean
hexo generate
hexo server

验证效果

• 如果文章的更新时间在 7 天内，页面应显示“Updated”标志。
• 如果超过 7 天，标志应动态隐藏。

希望本教程能帮助你优化博客的用户体验！如有任何问题，欢迎留言交流！ 🚀