Tailwind Next.js Starter Blog 项目中的未来日期文章过滤方案

在基于Tailwind和Next.js构建的博客系统中，处理带有未来日期的文章是一个常见的需求。这类文章通常用于预发布内容，但需要在正式发布前对访客隐藏。本文将深入探讨几种技术实现方案。

核心问题分析

博客系统通常需要处理两种特殊状态的内容：

1. 草稿状态（draft）
2. 预发布状态（未来日期）

这两种状态都需要在前端展示时进行过滤，但技术实现上有所区别。

解决方案对比

方案一：使用草稿标记

这是仓库所有者推荐的标准做法，通过在Markdown文件的frontmatter中添加draft: true标记：

---
title: "未来文章示例"
date: "2025-01-01"
draft: true
---

优点：

• 实现简单直观
• 与静态站点生成器原生兼容
• 易于理解和维护

缺点：

• 需要手动管理草稿状态
• 发布时间需要额外操作（移除draft标记）

方案二：日期过滤

通过编程方式过滤未来日期的文章：

const currentPosts = allCoreContent.filter(post => new Date(post.date) <= new Date())

优点：

• 自动处理发布时间
• 无需人工干预状态变更

缺点：

• 需要在所有内容查询处添加过滤逻辑
• 可能影响构建时的静态生成策略

高级实现建议

对于需要更复杂控制的场景，可以考虑：

1. 混合模式：同时使用draft标记和日期过滤，提供双重控制
2. 构建时环境变量：通过环境变量区分开发和生产环境的过滤行为
3. 自定义Hook：创建统一的useFilteredPosts钩子集中管理过滤逻辑

最佳实践

1. 对于小型博客，推荐使用draft标记方案
2. 对于内容团队协作的博客，建议采用日期自动过滤
3. 重要公告类内容应使用手动发布控制

无论选择哪种方案，保持整个项目中的处理方式一致是关键，这有助于长期维护和团队协作。