Dedecms列表页文章发布时间改为“今天/昨天”显示

在网站开发中，优化用户体验是至关重要的。一个常见的需求就是在列表页中将文章的发布时间以更加人性化的形式展示出来，例如“今天”“昨天”“前天”等。这样的设计不仅能让用户更直观地了解文章的新鲜度，还能提升页面的友好性。下面，我们将详细介绍如何通过模板标签的修改来实现这一功能。

首先，我们需要明确目标：如果文章是当天发布的，则显示“今天”；如果是前一天发布的，则显示“昨天”；如果是前两天发布的，则显示“前天”。对于超过三天的文章，我们则以“月-日时:分”的格式进行展示，例如“05-24 11:41”。这种设计能够兼顾近期和较早的文章时间展示需求。

以下是实现人性化日期展示的核心逻辑代码：


function humanizeDate(publishTime) {
    const now = new Date();
    const publishDate = new Date(publishTime);
    const diffInMilliseconds = now - publishDate;
    const diffInDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));

    if (diffInDays === 0) {
        return "今天 " + publishDate.getHours().toString().padStart(2, '0') + ":" + publishDate.getMinutes().toString().padStart(2, '0');
    } else if (diffInDays === 1) {
        return "昨天 " + publishDate.getHours().toString().padStart(2, '0') + ":" + publishDate.getMinutes().toString().padStart(2, '0');
    } else if (diffInDays === 2) {
        return "前天 " + publishDate.getHours().toString().padStart(2, '0') + ":" + publishDate.getMinutes().toString().padStart(2, '0');
    } else {
        const month = (publishDate.getMonth() + 1).toString().padStart(2, '0');
        const day = publishDate.getDate().toString().padStart(2, '0');
        return `${month}-${day} ${publishDate.getHours().toString().padStart(2, '0')}:${publishDate.getMinutes().toString().padStart(2, '0')}`;
    }
}

这段代码的功能如下：

首先获取当前时间和文章的发布时间。
计算两者之间的时间差（以毫秒为单位），并将其转换为天数。
根据时间差的不同，返回对应的字符串格式。例如，如果是当天的文章，则返回“今天 xx:xx”；如果是前一天，则返回“昨天 xx:xx”，依此类推。
对于超过三天的文章，返回“月-日时:分”的格式。

需要注意的是，上述代码适用于 JavaScript 环境。如果你的项目使用的是后端语言（如 PHP、Python 等），也可以根据类似的逻辑进行实现。

此外，这种方法同样适用于处理 pubdate 字段。无论是博客系统还是新闻网站，都可以通过这种方式提升时间展示的可读性和用户体验。

最后，为了优化搜索引擎排名（SEO），建议在页面中添加适当的元数据，并确保时间字段的语义化标记，例如使用标签包裹具体的时间值。这不仅能帮助搜索引擎更好地理解内容，还能提高页面的结构化程度。

希望以上方法能为你提供灵感！如果有任何疑问，请随时留言交流。

推荐阅读