吐槽改进日志

Hexo定制化-更新时间与发布时间

字数统计: 1k字   |   阅读时长: 4分
66

摘要: 在文章标题下方增加一个更新时间的信息

【对数据分析、人工智能、金融科技、风控服务感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：潮汐朝夕
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

写文章时间长了以后，历史的文章多了，不是每篇文章都能记住的。有时候翻看以前写的文章，经常会有一些忘记的文章，看到标题的时候会非常惊讶于自己以前竟然写过这篇文章，点开看了内容之后就会反应过来，以前确实写过这个内容。

这可能是经常写文章的一个好处，打开历史的文章，就可以一定程度上回忆起来当时的状态，当时做过什么事情，当时有什么想法等等。

但是毕竟过了这么长时间，自己的阅历增加了，知识和经验都更新了，此时看到历史写过的一些文章，难免会有一些想法要更新一下文章。比如想要把一些细节补充一下，比如增加一些背景信息等等。

对于这种更新过的历史文章，我们就会想把最近一次更新文章的时间也记录下来，给以后留个参考。

这需要通过对 Hexo 下的代码做一些魔改的方式进行定制化，本文记录一下这个定制化的过程。首先看一下最终的效果。

  • 发过的文章如果没有更新的话，则只显示一个发布时间

  • 发过的文章如果有更新的话，则发布时间之后还显示一个最近更新时间

layout/post.ejs

首先我们知道我们是要在每篇文章的相应位置显示信息的，因此我们首先找到主题对应的目录下的 layout/post.ejs，这个文件中没有直接写内容，而是引用了另一个文件，如下：

1
<%- partial('common/article', { post: page }) %>

layout/common/article.ejs

根据 layout/post.ejs 中的引用信息，找到 layout/common/article.ejs 文件。这份文件很长，在前面若干行是关于标题下的信息显示这部分的代码。其中发布时间是已有的，如下：

1
<%- partial('post/date', { class_name: 'article-date', date_format: null }) %>

其中 post/date 的含义是引用了当前文件所在的 common 目录下的 post/date.ejs 这份文件。

然后我们这一行复制一份，然后做一些修改，就形成了更新时间的代码，如下：

1
<%- partial('post/update_date', { class_name: 'article-update', date_format: null }) %>

主要改动内容就是把 post/date 改成了 post/update_date，对应地，我们需要增加 common 目录下的 post/update_date.ejs

layout/common/post/update_date.ejs

首先我们把已有的 date.ejs 中的内容复制进来，如下：

1
2
3
4
5
6
<% if (post.date) { %>
    <div class="<%= class_name %>">
      <i class="fa fa-calendar"></i>
         <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
    </div>
<% } %>

修改为如下内容，主要就是把 date 改成了 update_date，然后把 <i> 标签下的内容改了：

1
2
3
4
5
6
<% if (post.update_date != null) { %>
    <div class="<%= class_name %>">
        <i class="fa fa-calendar-check-o"></i>
        <time datetime="<%= date_xml(post.update_date) %>" itemprop="dateUpdated"><%= date(post.update_date, date_format) %></time>
    </div>
<% } %>

其中 post.update_date 表示文章的头部是否有 update_date 这个字段，如果有的话，进行后续的显示。

文章头部的 update_date 字段

前面的文件写好之后，就可以对更新的文章增加更新日期了。方法是在文章的头部增加一个 update_date 字段，与之前加的文件中的代码对应。

例如，下面这两行中，date 是之前已有的，update_date 是更新的时候手动新增的。

1
2
date: 2020-09-16 09:38:14
update_date: 2022-10-20 09:38:14
Share