feat: 添加更新日期显示功能

Author: D-Sketon

_config.yml

@@ -149,6 +149,9 @@ tagcloud_limits:
 # Archive behavior
 only_show_capsule_in_index: false # If you have hugo amounts of tags and categories, you can set this to true to only show the capsule in the index page for better performance
 
+show_update_time: false # If you want to show the update time, please set this to true
+
+# Internationalization
 i18n:
   enable: false
   type: [page, post]
@@ -169,7 +172,7 @@ reimu_cursor:
     text: ../images/cursor/reimu-cursor-text.png
 
 # set to false to enable fontawesome
-icon_font: 4552607_cp3b72wuupu
+icon_font: 4552607_cs6s86l0wm9
 
 # Font loading strategy
 # Custom Font -> Google Fonts -> Local FallBack Font

layout/_partial/post.ejs

@@ -23,6 +23,9 @@
     <div class="post-info">
       <div class="post-meta">
         <span><span class="icon-calendar"></span><%- date(post.date, "YYYY-MM-DD") %></span>
+        <% if (theme.show_update_time) { %>
+          <span><span class="icon-calendar-plus"></span><%- date(post.updated, "YYYY-MM-DD") %></span>
+        <% } %>
         <span><span class="icon-pencil"></span><%= _p('post.count', wordcount(post.content, post._id)) %></span>
         <span><span class="icon-clock"></span><%= _p('post.time', min2read(post.content, {}, post._id)) %></span>
       </div>

layout/_partial/post/date.ejs

@@ -1,6 +1,11 @@
 <div class="<%= class_name %>">
-  <span class="article-date-link" data-aos="<%= theme.animation.options.article.date %>">
+  <span class="article-date-link icon-calendar" data-aos="<%= theme.animation.options.article.date %>">
     <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
     <time style="display: none;" id="post-update-time"><%= date(post.updated, date_format) %></time>
   </span>
+  <% if (theme.show_update_time) { %>
+    <span class="article-date-link icon-calendar-plus" data-aos="<%= theme.animation.options.article.date %>">
+      <time datetime="<%= date_xml(post.updated) %>" itemprop="datePublished"><%= date(post.updated, date_format) %></time>
+    </span>
+  <% } %>
 </div>

source/css/_partial/post.styl

@@ -61,16 +61,29 @@ $post-wrap
   span
     font-size: 14px
     color: var(--grey-7)
-    margin: 0 8px
+    margin: 0 12px
     white-space: nowrap
     text-overflow: ellipsis
     overflow: hidden
 
-  span:before
-    margin: 0 10px
-
     @media mg-normal
-      margin: 0
+      margin: 0 8px
+
+  if hexo-config('show_update_time')
+    > span
+      @media mg-extra-large
+        margin: 0 8px
+      @media mg-large
+        margin: 0 6px
+      @media mq-mobile
+        margin: 0 2px
+      span
+        @media mg-extra-large
+          margin: 0 6px
+        @media mg-large
+          margin: 0 4px
+        @media mq-mobile
+          margin: 0 3px
 
 .post-article
   display: -webkit-box

source/css/_variables.styl

@@ -144,5 +144,7 @@ mq-normal = "screen and (min-width: 768px)"
 mg-normal = "screen and (max-width: 767px)"
 mq-large = "screen and (min-width: 960px)"
 mg-large = "screen and (max-width: 959px)"
+mq-extra-large = "screen and (min-width: 1242px)"
+mg-extra-large = "screen and (max-width: 1241px)"
 
 post-radius = 10px

source/css/fontawesome.styl

@@ -124,6 +124,12 @@
     content: "\f133"
     font-weight: 900
 
+.icon-calendar-plus
+  &:before
+    font-family: var(--font-icon)
+    content: "\f271"
+    font-weight: 900
+
 .icon-pencil
   &:before
     font-family: var(--font-icon)

source/css/iconfont.styl

@@ -121,6 +121,11 @@ _a = '//at.alicdn.com/t/c/font_' + id + '.woff2'
     font-family: font-icon
     content: "\e605"
 
+.icon-calendar-plus
+  &:before
+    font-family: font-icon
+    content: "\e648"
+
 .icon-pencil
   &:before
     font-family: font-icon