diff --git a/assets/css/_common/components/post/post-alert.scss b/assets/css/_common/components/post/post-alert.scss index 62527ca..d2c3b0b 100644 --- a/assets/css/_common/components/post/post-alert.scss +++ b/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); } \ No newline at end of file diff --git a/assets/css/_common/components/post/post-body.scss b/assets/css/_common/components/post/post-body.scss index 70cea86..1757143 100644 --- a/assets/css/_common/components/post/post-body.scss +++ b/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'; } diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js index 03eeedd..048a52b 100644 --- a/assets/js/next-boot.js +++ b/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 /** diff --git a/assets/js/utils.js b/assets/js/utils.js index 5da1bad..d94ef74 100644 --- a/assets/js/utils.js +++ b/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 + '' + expireTime + '' + expiredTipSuf; + document.getElementById('post-expired-content').innerHTML = expiredTip; + } + }, registerMenuClick: function () { const pMenus = document.querySelectorAll('.main-menu > li > a.menus-parent'); pMenus.forEach(function (item) { diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 389d0a2..9682ff1 100644 --- a/exampleSite/config.yaml +++ b/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 diff --git a/exampleSite/content/post/hugo-blockquote.md b/exampleSite/content/post/hugo-blockquote.md index 86eba5e..6c1b1ec 100644 --- a/exampleSite/content/post/hugo-blockquote.md +++ b/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种不同风格供用户可选择使用,还可以自定义图标与颜色配置。 diff --git a/exampleSite/content/post/image-viewer.md b/exampleSite/content/post/image-viewer.md index 19c8af2..7cb64be 100644 --- a/exampleSite/content/post/image-viewer.md +++ b/exampleSite/content/post/image-viewer.md @@ -16,6 +16,7 @@ tags: url: "demo/image-viewer.html" toc: false +expired: true --- 本主题自带图像浏览器功能,支持对文章区域内出现的图片进行浏览,点击图片可以查看大图,点击空白处可以关闭。不需要配置任何参数,只要在文章里面相应的位置添加图片信息即可 。 diff --git a/exampleSite/content/post/no-header-title.md b/exampleSite/content/post/no-header-title.md index 6119175..0aa4629 100644 --- a/exampleSite/content/post/no-header-title.md +++ b/exampleSite/content/post/no-header-title.md @@ -15,6 +15,7 @@ tags: comment: enable: false url: "demo/no-header-title.html" +expired: true --- 刘慈欣2018克拉克奖获奖感言(部分内容节选)。 diff --git a/i18n/en.yaml b/i18n/en.yaml index a68ea84..85e3d17 100644 --- a/i18n/en.yaml +++ b/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" diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 2f3c189..673a00b 100644 --- a/i18n/fr.yaml +++ b/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" diff --git a/i18n/zh-cn.yaml b/i18n/zh-cn.yaml index 2dda1b1..440ba74 100644 --- a/i18n/zh-cn.yaml +++ b/i18n/zh-cn.yaml @@ -71,6 +71,10 @@ PostMeta: tags: 标签 more: 阅读全文 edit: 编辑 + expired: + title: "温馨提醒" + info: "🕰️ 嗨,这篇文章已是#前的陈年佳酿,信息可能需要更新,阅读前请检查最佳赏味期限。" + warn: "🚀 注意啦!这篇文章来自#以前,可能已跟不上时代的步伐。阅读时请自备时光机,小心穿越哦!" PostAlert: info : "信息" diff --git a/i18n/zh-tw.yaml b/i18n/zh-tw.yaml index 65b145e..62ae52e 100644 --- a/i18n/zh-tw.yaml +++ b/i18n/zh-tw.yaml @@ -71,6 +71,10 @@ PostMeta: tags: 標籤 more: 閱讀全文 edit: 編輯 + expired: + title: "温馨提醒" + info: "🕰️ 嗨,这篇文章已是#前的陳年佳釀,資訊可能需要更新,閱讀前請檢查最佳賞味期限。" + warn: "🚀 請注意啦!這篇文章来自#以前,可能已經跟不上時代的腳步了。閱讀時請自備時光機,小心穿越哦!" PostAlert: info : "信息 " diff --git a/layouts/partials/head/config.html b/layouts/partials/head/config.html index 574d57b..d4887e9 100644 --- a/layouts/partials/head/config.html +++ b/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") }} diff --git a/layouts/partials/post/body.html b/layouts/partials/post/body.html index 2042488..d8a98ea 100644 --- a/layouts/partials/post/body.html +++ b/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 }} +