💄 Add post expired tip features.

assets/css/_common/components/post/post-alert.scss

@@ -12,7 +12,7 @@
   @include alert-styles(#{$key}, $color);
 }
 
-.post-alert-title {
+.post-alert-title, .post-expired-title {
 
   display: flex;
   align-items: center;
@@ -31,6 +31,6 @@
   }
 }
 
-.post-alert-content {
+.post-alert-content, .post-expired-content {
   color: var(--text-color);
 }

assets/css/_common/components/post/post-body.scss

@@ -86,5 +86,26 @@
     visibility: hidden;
   }
 
-@import 'post-alert';
+  .post-expired-tip {
+
+    font-size: 0.825em;
+    border: 1px solid #4A90E2;
+    border-left: 6px solid #4A90E2;
+    margin: 0 0 0.85em 0;
+    padding: 0.65em 0.15em 0.65em 0.95em;
+
+    .post-expired-title {
+      color: #4A90E2;
+      font-weight: bold;
+    }
+
+    .post-expired-times {
+      font-weight: bold;
+      font-size: 1.15em;
+      color: #e5534b;
+      margin: 0 3px;
+    }
+  }
+
+  @import 'post-alert';
 }

assets/js/next-boot.js

@@ -63,9 +63,13 @@ NexT.boot.refresh = function() {
 
   if (!NexT.CONFIG.page.isPage) return;
  
-  NexT.utils.registerSidebarTOC();
+  if (NexT.CONFIG.page.toc) NexT.utils.registerSidebarTOC();
+  if (NexT.CONFIG.page.expired) NexT.utils.calPostExpiredDate();
+
   NexT.utils.registerCopyCode();
+  NexT.utils.registerImageViewer();
   NexT.utils.registerPostReward();
+
   if(NexT.CONFIG.page.comments) {    
     NexT.utils.initCommontesDispaly();
     NexT.utils.registerCommonSwitch();
@@ -73,7 +77,6 @@ NexT.boot.refresh = function() {
   } else {
     NexT.utils.hideComments();
   }
-  NexT.utils.registerImageViewer();
 
   //TODO
    /**

assets/js/utils.js

@@ -7,6 +7,35 @@ HTMLElement.prototype.wrap = function (wrapper) {
 };
 
 NexT.utils = {
+  calPostExpiredDate: function() {
+    const postMetaDom = document.querySelector('.post-meta-container');
+    let postTime = postMetaDom.querySelector('time[itemprop="dateCreated datePublished"]').getAttribute("datetime");
+    let postLastmodTime = postMetaDom.querySelector('time[itemprop="dateModified dateLastmod"]');
+
+    if (postLastmodTime != null) postTime = postLastmodTime.getAttribute("datetime");
+
+    const expireCfg = NexT.CONFIG.page.expiredTips;
+    let expiredTipPre = '';
+    let expiredTipSuf = '';
+    let expireTime = this.diffDate(postTime, 2);
+
+    if (expireTime == '0'+NexT.CONFIG.i18n.ds_days) {
+      document.getElementById('post-expired-tip').style.display = 'none';
+    } else {      
+      if (expireTime.indexOf(NexT.CONFIG.i18n.ds_years) > -1){
+        let expireTip = expireCfg.warn.split('#');
+        expiredTipPre = expireTip[0];
+        expiredTipSuf = expireTip[1];      
+      } else {
+        let expireTip = expireCfg.info.split('#');
+        expiredTipPre = expireTip[0];
+        expiredTipSuf = expireTip[1];
+      }
+  
+      let expiredTip = expiredTipPre + '<span class="post-expired-times">' + expireTime + '</span>' + expiredTipSuf;
+      document.getElementById('post-expired-content').innerHTML = expiredTip;
+    }
+  },
   registerMenuClick: function () {
     const pMenus = document.querySelectorAll('.main-menu > li > a.menus-parent');
     pMenus.forEach(function (item) {

exampleSite/config.yaml

@@ -495,6 +495,34 @@ params:
       # 页面访问统计插件，支持busuanzi, waline, waline3
       # Page views counter plugin, support: busuanzi, waline, waline3
       plugin: busuanzi
+    # 是否开启过期提示
+    # Expired tip
+    expired: false
+
+  # 文章内容中的提示信息设置
+  # Alert settings in post content
+  postAlerts:
+    info:
+      icon: "circle-info"
+      color: "#4A90E2"
+    note:
+      icon: "bell"
+      color: "#17A2B8"
+    help:
+      icon: "circle-question"
+      color: "#967ADC"
+    error:
+      icon: "circle-xmark"
+      color: "#DC3545"
+    warning:
+      icon: "triangle-exclamation"
+      color: "#F39C12"
+    success:
+      icon: "circle-check"
+      color: "#32CD32"
+    important:
+      icon: "circle-plus"
+      color: "#007BFF"
 
   # 文章底部的设置
   # Post footer settings

exampleSite/content/post/hugo-blockquote.md

@@ -4,7 +4,7 @@ description: "在新版本Hugo框架中添加了对blockquote样式渲染，支
 keywords: "hugo,block,quote"
 
 date: 2025-01-02T16:08:02+08:00
-lastmod: 2025-01-02T16:08:02+08:00
+lastmod: 2025-01-02T19:08:02+08:00
 
 categories:
   - 示例文章
@@ -15,6 +15,7 @@ tags:
 
 url: "demo/hugo-blockquote.html"
 toc: true
+expired: true
 ---
 
 过去 `HugoNexT` 主题都是通过自定义短语来实现块信息的标注，近期发现 `Hugo` 从[v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)版本开始便是可以支持通过hook方式渲染Markdown文档中的Blockquote样式（需要自己实现），实现类似Github的警告风格样式。于是便在 `HugoNexT` 主题中添加7种不同风格供用户可选择使用，还可以自定义图标与颜色配置。

exampleSite/content/post/image-viewer.md

@@ -16,6 +16,7 @@ tags:
 
 url: "demo/image-viewer.html"
 toc: false
+expired: true
 ---
 
 本主题自带图像浏览器功能，支持对文章区域内出现的图片进行浏览，点击图片可以查看大图，点击空白处可以关闭。不需要配置任何参数，只要在文章里面相应的位置添加图片信息即可 。

exampleSite/content/post/no-header-title.md

@@ -15,6 +15,7 @@ tags:
 comment:
   enable: false
 url: "demo/no-header-title.html"
+expired: true
 ---
 
 刘慈欣2018克拉克奖获奖感言（部分内容节选）。

i18n/en.yaml

@@ -71,6 +71,10 @@ PostMeta:
   tags: Tags
   more: "Read More"
   edit: "Edit this post"
+  expired:
+    title: "Note"
+    info: "🕰️ Hey，This article is an aged wine of over # the information may need updating, please check the best before date before reading."
+    warn: "🚀 Heads up! This article is from # ago and might not keep up with the pace of time. Bring your own time machine for reading, watch out for the time travel!"
 
 PostAlert:
   info     : "Info"

i18n/fr.yaml

@@ -70,6 +70,10 @@ PostMeta:
   tags: Tags
   more: "Lire la suite"
   edit: "Editer ce billet"
+  expired:
+    title: "Astuce bienveillante"
+    info: "🕰️ Hey，This article is an aged wine of over # the information may need updating, please check the best before date before reading."
+    warn: "🚀 Heads up! this article is from # ago and might not keep up with the pace of time. Bring your own time machine for reading, watch out for the time travel!"
 
 PostAlert:
   info     : "Info"

i18n/zh-cn.yaml

@@ -71,6 +71,10 @@ PostMeta:
   tags: 标签
   more: 阅读全文
   edit: 编辑
+  expired:
+    title: "温馨提醒"
+    info: "🕰️ 嗨，这篇文章已是#前的陈年佳酿，信息可能需要更新，阅读前请检查最佳赏味期限。"
+    warn: "🚀 注意啦！这篇文章来自#以前，可能已跟不上时代的步伐。阅读时请自备时光机，小心穿越哦！"
 
 PostAlert:
   info     : "信息"

i18n/zh-tw.yaml

@@ -71,6 +71,10 @@ PostMeta:
   tags: 標籤
   more: 閱讀全文
   edit: 編輯
+  expired:
+    title: "温馨提醒"
+    info: "🕰️ 嗨，这篇文章已是#前的陳年佳釀，資訊可能需要更新，閱讀前請檢查最佳賞味期限。"
+    warn: "🚀 請注意啦！這篇文章来自#以前，可能已經跟不上時代的腳步了。閱讀時請自備時光機，小心穿越哦！"
 
 PostAlert:
   info     : "信息 "

layouts/partials/head/config.html

@@ -2,11 +2,23 @@
   "isHome"    .IsHome
   "isPage"    .IsPage
   "comments"  (.Scratch.Get "isComment")
+  "toc"       (default .Site.Params.toc.enable .Params.Toc)
   "permalink" (.Page.Permalink | absURL)
   "path"      (.Page.Permalink | path.Base)
   "title"     .Page.Title
 }}
 
+{{/* Append post expired config */}}
+{{ $expired := default .Site.Params.PostMeta.expired .Params.Expired }}
+{{ $pageCfg = merge $pageCfg (dict "expired" $expired) }}
+{{ if $expired }}
+{{ $expiredTips := dict
+  "info" (T "PostMeta.expired.info")
+  "warn" (T "PostMeta.expired.warn")
+}}
+{{ $pageCfg = merge $pageCfg (dict "expiredTips" $expiredTips) }}
+{{ end }}
+
 {{/* Append waline pageview & comment plugin */}}
 {{ with .Site.Params.postMeta.views }}
   {{ if and .enable (ne .plugin "busuanzi") }}

layouts/partials/post/body.html

@@ -6,9 +6,21 @@
   {{ .Summary }}
   {{ end }}
 {{ else }}
-  {{/** Started use the read more content anchor the need Hugo framework min marjo version greater than 0.134.0 **/}}
+  {{ $expired := default .Site.Params.PostMeta.expired .Params.Expired }}
+  {{ if $expired }}
+  <div class="post-expired-tip" id="post-expired-tip">
+    <div class="post-expired-title">
+      <i class="fa-solid fa-hourglass-half"></i>
+      <span>{{ T "PostMeta.expired.title" }}</span>
+    </div>
+    <div id="post-expired-content" class="post-expired-content"></div>
+  </div>
+  {{ end }}
+  {{/** Started use the read more content anchor the need 
+    Hugo framework min marjo version greater than 0.134.0 **/}}
   {{ .Summary }}
-  <a id="more"><!-- It's an anchor point to locate read more content start. --></a>
+  <!-- It's an anchor point to locate read more content start. -->
+  <a id="more"></a>
   {{ .ContentWithoutSummary }}
 {{ end }}
 {{ end }}