✨ 动态生成更新日期的相对时间 #1014

_config.yml

@@ -1098,3 +1098,5 @@ static_prefix:
   discuss: https://lib.baomitu.com/discuss/1.2.1/
 
   hint: https://lib.baomitu.com/hint.css/2.7.0/
+
+  moment: https://lib.baomitu.com/moment.js/2.29.4/

languages/zh-CN.yml

@@ -42,7 +42,7 @@ post:
   toc: '目录'
   prev_post: '上一篇'
   next_post: '下一篇'
-  updated: '本文最后更新于：%s'
+  updated: '本文最后更新于 %s'
   meta:
     wordcount: '%s 字'
     min2read: '%s 分钟'

layout/_partials/plugins/moment.ejs

@@ -0,0 +1,30 @@
+<%
+var lang = (config.language || 'zh-cn').toLowerCase();
+
+import_script(`
+<script>
+  var relativeDate = function() {
+    var updatedTime = document.getElementById('updated-time');
+    if (updatedTime) {
+      var text = updatedTime.textContent;
+      var reg = /\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}(?:Z|[+-]\\d{2}:\\d{2})/;
+      var matchs = text.match(reg);
+      if (matchs) {
+        var relativeTime = moment(matchs[0]).fromNow();
+        updatedTime.textContent = text.replace(reg, relativeTime);
+      }
+      updatedTime.style.display = '';
+    }
+  };
+  Fluid.utils.createScript('${url_join(theme.static_prefix.moment, 'moment.min.js')}', function() {
+    if (!'${lang}'.startsWith('en')) {
+      Fluid.utils.createScript('${url_join(theme.static_prefix.moment, 'locale/' + lang + '.min.js')}', function() {
+        relativeDate();
+      });
+    } else {
+      relativeDate();
+    }
+  });
+</script>
+`)
+%>

layout/post.ejs

@@ -16,14 +16,15 @@ page.banner_mask_alpha = page.banner_mask_alpha || theme.post.banner_mask_alpha
           <article class="post-content mx-auto">
             <h1 id="seo-header"><%= page.subtitle || page.title %></h1>
             <% if (theme.post.updated.enable && theme.post.updated && compare_date(page.date, page.updated)) { %>
-              <p class="note note-<%= theme.post.updated.note_class || 'info' %>">
+              <p id="updated-time" class="note note-<%= theme.post.updated.note_class || 'info' %>" style="<%= theme.post.updated.relative ? 'display: none' : '' %>">
                 <% if (theme.post.updated.relative) { %>
                   <% if (theme.post.updated.content) { %>
                     <!-- compatible with older versions-->
-                    <%- theme.post.updated.content %><%- relative_date(page.updated, theme.post.updated.date_format) %>
+                    <%- theme.post.updated.content %><%- date(page.updated, 'YYYY-MM-DDTHH:mm:ssZ') %>
                   <% } else { %>
-                    <%- __('post.updated', relative_date(page.updated, theme.post.updated.date_format)) %>
+                    <%- __('post.updated', date(page.updated, 'YYYY-MM-DDTHH:mm:ssZ')) %>
                   <% } %>
+                  <%- partial('_partials/plugins/moment.ejs') %>
                 <% } else { %>
                   <% if (theme.post.updated.content) { %>
                     <!-- compatible with older versions-->

source/css/_pages/_post/post-page.styl

@@ -20,7 +20,7 @@
   strong
     font-weight bold
 
-  & > *:first-child
+  & > *:nth-child(2)
     margin-top 0
 
   img