如何在发布新博文后给Blog菜单项加'new'徽章，3周无新帖自动隐藏

实现思路 #

核心逻辑不需要依赖特定的new-post hook，直接查询最新博客文章的发布时间，对比当前时间差值是否小于3周，符合条件就渲染徽章，反之隐藏即可。

具体实现步骤 #

1. 资源准备 #

将png格式的new徽章上传到站点静态资源目录，参考路径为/assets/images/new-badge.png。

2. 时间判断逻辑编写 #

以下以WordPress为例，其他站点框架可参照逻辑调整：

// 站点主题functions.php文件中添加如下代码
function has_recent_blog_post() {
    // 查询最新1篇已发布的博客文章
    $latest_post = get_posts(array(
        'numberposts' => 1,
        'post_type' => 'post',
        'post_status' => 'publish'
    ));
    if (empty($latest_post)) return false;
    // 3周对应的秒数为 3*7*24*3600 = 1814400
    $post_publish_time = strtotime($latest_post[0]->post_date);
    $current_time = current_time('timestamp');
    return ($current_time - $post_publish_time) < 1814400;
}

如果是Hexo、Hugo这类静态站点生成框架，可以在构建阶段计算最新文章发布时间，将是否显示徽章的布尔值注入到模板上下文即可。

3. 菜单模板修改 #

找到站点导航菜单的渲染代码，在Blog菜单项后添加徽章判断逻辑：

<li class="menu-item">
  <a href="/blog">Blog</a>
  <?php if (has_recent_blog_post()): ?>
    <img src="/assets/images/new-badge.png" alt="New content" class="new-badge">
  <?php endif; ?>
</li>

4. 适配样式调整（可选） #

添加少量CSS让徽章和菜单布局适配：

.new-badge {
  width: 28px;
  height: auto;
  margin-left: 5px;
  vertical-align: middle;
}

注意事项 #

• 若站点开启了缓存机制，建议将缓存过期时间设置为24小时以内，避免徽章更新不及时或过期后无法自动隐藏
• 多语言站点可根据站点语言加载对应版本的徽章资源

内容的提问来源于stack exchange，提问作者tshdvs