Memos项目：如何为备忘录添加创建时间显示功能

在个人知识管理工具Memos中，用户经常需要快速查看备忘录的创建时间，特别是当一天中有多个备忘录时。本文将深入探讨如何为Memos项目实现创建时间的精确显示功能。

时间显示需求分析

Memos默认只显示备忘录的创建日期，而不显示具体时间。这对于需要记录一天中多个时间点信息的用户来说不够完善。例如，记录血糖监测、会议笔记或日常观察时，精确到分钟的时间戳非常重要。

技术实现方案

Memos使用React框架构建，其时间显示功能基于HTML5的relative-time自定义元素组件。该组件默认配置可能只显示日期，但通过设置特定属性可以扩展其显示格式。

核心属性配置

要使relative-time组件显示小时和分钟，需要设置以下两个属性：

• hour="2-digit" - 以两位数格式显示小时(如09:00)
• minute="2-digit" - 以两位数格式显示分钟

临时解决方案

对于非开发者用户，可以通过在Memos的"Additional script"设置中添加以下JavaScript代码实现时间显示：

setInterval(() => {
    const timeElements = document.getElementsByTagName("relative-time");
    Array.from(timeElements).forEach(element => {
        element.setAttribute("hour", "2-digit");
        element.setAttribute("minute", "2-digit");
    });
}, 10000);

这段代码会：

1. 每10秒执行一次
2. 查找页面中所有relative-time元素
3. 为每个元素添加小时和分钟显示属性

原生实现建议

从项目架构角度，更优雅的实现方式是在React组件层面修改时间显示格式。开发者可以考虑：

1. 在用户设置中添加"显示创建时间"的开关选项
2. 根据用户选择动态调整relative-time组件的属性
3. 确保时间格式与用户的语言区域设置一致

用户体验考量

实现时间显示功能时应注意：

• 保持界面整洁，避免信息过载
• 考虑不同设备的显示空间限制
• 提供时间格式自定义选项(12小时制/24小时制)
• 确保时间显示不影响主要内容的可读性

总结

为Memos添加创建时间显示功能不仅能满足特定用户群体的需求，也能提升应用在时间敏感场景下的实用性。无论是通过临时脚本还是原生实现，这一功能都能显著增强用户对备忘录的时间管理能力。