Astro-Paper 项目中如何仅显示文章日期而不显示时间

在 Astro-Paper 博客模板中，默认情况下文章会同时显示发布日期和时间。但有时我们可能只需要显示日期而不需要显示具体时间。本文将详细介绍如何修改代码实现这一需求。

理解日期时间显示机制

Astro-Paper 使用 React 组件来处理日期时间的显示，具体实现位于 src/components/Datetime.tsx 文件中。这个组件接收一个日期对象，然后将其格式化为可读的字符串。

修改日期显示方式

要仅显示日期而不显示时间，我们需要修改 FormattedDatetime 组件的实现。以下是具体步骤：

1. 打开 src/components/Datetime.tsx 文件
2. 找到 FormattedDatetime 组件定义
3. 修改日期格式化逻辑

原始代码通常会包含类似这样的时间格式化部分：

const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
  hour: "2-digit",
  minute: "2-digit",
});

正确修改方法

直接删除时间格式化部分可能会导致错误，因为组件可能依赖这些值。正确的方法是：

1. 保留日期格式化部分
2. 移除时间显示部分的JSX
3. 确保组件仍然返回有效的React元素

修改后的组件可能如下所示：

export default function FormattedDatetime({ datetime }: Props) {
  const myDatetime = new Date(datetime);

  const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <time dateTime={datetime}>
      {date}
    </time>
  );
}

注意事项

1. 确保修改后的组件仍然接收和正确处理 datetime 属性
2. 检查项目中其他地方是否依赖时间显示功能
3. 如果使用TypeScript，确保类型定义仍然匹配
4. 修改后建议全面测试博客的各种页面，确保日期显示一致

扩展思考

这种修改不仅适用于Astro-Paper项目，类似的原理可以应用于任何基于React或类似框架的博客系统。理解日期时间组件的运作方式，可以帮助开发者根据需求灵活定制显示格式。

通过这种方式，我们可以轻松实现仅显示日期的需求，同时保持代码的整洁和可维护性。