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

  |  

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

【对数据分析、人工智能、金融科技、风控服务感兴趣的同学,欢迎关注我哈,阅读更多原创文章】
我的网站:潮汐朝夕的生活实验室
我的公众号:潮汐朝夕
我的知乎:潮汐朝夕
我的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