feat(post): added article aging tips (#177)

languages/en.yml

@@ -63,6 +63,7 @@ copyright:
   create_time: Create time
   license_title: Copyright notice
   license_content: "All articles in this blog are licensed under %s unless stating additionally."
+article-aging: "It has been %s days since the last update of this article. Some contents may be outdated. Please pay attention to screening."
 ago:
   second: "%s seconds ago"
   minute: "%s minutes ago"

languages/zh-CN.yml

@@ -63,6 +63,7 @@ copyright:
   create_time: 创建时间
   license_title: 版权声明
   license_content: "本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！"
+article-aging: "本文距离上次更新已过去 %s 天，部分内容可能已经过时，请注意甄别。"
 ago:
   second: "%s 秒前"
   minute: "%s 分钟前"

languages/zh-TW.yml

@@ -63,6 +63,7 @@ copyright:
   create_time: 撰寫時間
   license_title: 版權宣告
   license_content: "這個網站所有文章均使用 %s 授權"
+article-aging: "本文距離上次更新已過去 %s 天，部分內容可能已經過時，請註意甄別。"
 ago:
   second: "%s 秒前"
   minute: "%s 分鐘前"

layout/article-content.ejs

@@ -32,6 +32,12 @@
             <% } %>
 
             <div class="article-content keep-markdown-body">
+                <% if (page?.aging === true) { %>
+                    <div class="article-aging-tips" data-update-date="<%= page.updated %>" data-aging-days="<%= page?.agingDays %>">
+                        <i class="fa-solid fa-circle-exclamation"></i><%- __('article-aging', '<span class="days">0</span>') %>
+                    </div>
+                <% } %>
+
                 <%- page.content %>
             </div>
 

source/css/common/variables.styl

@@ -103,12 +103,18 @@ $scrollbar-background-color = darken($background-color-1, 10%)
 $toc-scrollbar-color = alpha($text-color-3, 0.1)
 
 $copyright-info-color = #cc0033
+
 $avatar-background-color = $primary-color-dark-1
+
 $header-transparent-background-1 = alpha($background-color-1, 0.28)
 $header-transparent-background-2 = alpha($background-color-1, 0.4)
 
 $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
 
+$article-aging-tips-color = #b78d0f
+$article-aging-tips-background-color = alpha($article-aging-tips-color, 0.1)
+$article-aging-tips-border-color = alpha($article-aging-tips-color, 0.6)
+
 
 // ==============================================================================================
 // theme dark mode color set
@@ -141,6 +147,7 @@ $dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)
 $dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1)
 
 $dark-copyright-info-color = darken($copyright-info-color, 20%)
+
 $dark-avatar-background-color = darken($avatar-background-color, 20%)
 
 $dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28)
@@ -148,6 +155,10 @@ $dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.4)
 
 $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
 
+$dark-article-aging-tips-color = #ecc34d
+$dark-article-aging-tips-background-color = alpha($dark-article-aging-tips-color, 0.1)
+$dark-article-aging-tips-border-color = alpha($dark-article-aging-tips-color, 0.6)
+
 
 // ==============================================================================================
 // font settings
@@ -210,13 +221,23 @@ root-color(mode) {
   --scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color
   --toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
 
+  // copyright info left side color
   --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
+
+  // avatar background color
   --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
 
+  // header transparent background color
   --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
   --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
 
+  // pjax progress bar color
   --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
+
+  // article aging tips primary color
+  --article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color
+  --article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color
+  --article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color
 }
 
 

source/css/layout/article-content.styl

@@ -145,6 +145,28 @@ $toc-container-width = 15rem
       color var(--text-color-3)
       word-wrap break-word
 
+      .article-aging-tips {
+        position relative
+        display none
+        box-sizing border-box
+        margin-bottom 1.8rem
+        padding 1rem
+        color var(--article-aging-tips-color)
+        line-height 1.6
+        background var(--article-aging-tips-background-color)
+        border 0.1rem solid var(--article-aging-tips-border-color)
+        border-radius 0.4rem
+
+        i {
+          margin-right 0.4rem
+          color var(--article-aging-tips-color)
+        }
+
+        .days {
+          color var(--article-aging-tips-color)
+        }
+      }
+
       if (hexo-config('post.copyright_info') == true || hexo-config('copyright_info.enable') == true) {
         border-bottom 0.1rem dashed var(--border-color)
       }

source/js/post-helper.js

@@ -114,6 +114,7 @@ function initToggleShowToc() {
       observer.observe(commentsCountDom, config)
     },
 
+    // set post link
     initSetPostLink() {
       const postLinkContentDom = document.querySelector(
         '.copyright-info-content .post-link .content'
@@ -121,6 +122,7 @@ function initToggleShowToc() {
       postLinkContentDom && (postLinkContentDom.innerHTML = decodeURI(window.location.href))
     },
 
+    // copy copyright info
     copyCopyrightInfo() {
       const cicDom = document.querySelector('.copyright-info-content')
       const copyDom = document.querySelector('.copy-copyright-info')
@@ -157,9 +159,29 @@ function initToggleShowToc() {
           setCopyDomContent('fa-check', 'fa-copy', ccLang.copy, false)
         }, 500)
       })
+    },
+
+    // set article aging tips
+    setArticleAgingDays() {
+      const agingTipsDom = document.querySelector('.article-content .article-aging-tips')
+      if (agingTipsDom) {
+        const daysDom = agingTipsDom.querySelector('.days')
+        const nowTimestamp = Date.now()
+        const tmpTimeLength = 24 * 60 * 60 * 1000
+        const agingDaysTimestamp = (agingTipsDom.dataset?.agingDays || 30) * tmpTimeLength
+        const postUpdateTimestamp = new Date(agingTipsDom.dataset.updateDate).getTime()
+        const timeDifference = nowTimestamp - postUpdateTimestamp
+        const timeDifferenceDays = (timeDifference / tmpTimeLength).toFixed(0)
+        if (timeDifference >= agingDaysTimestamp) {
+          daysDom.innerHTML = timeDifferenceDays
+          agingTipsDom.style.display = 'block'
+        }
+      }
     }
   }
   KEEP.utils.postHelper.initSetPostToolsLeft()
+  KEEP.utils.postHelper.setArticleAgingDays()
+
   if (KEEP.theme_config.toc?.enable === true) {
     KEEP.utils.postHelper.initToggleToc()
   }