diff --git a/languages/en.yml b/languages/en.yml index df795d1..5449013 100644 --- a/languages/en.yml +++ b/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" diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index d02baf4..ea08b1a 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -63,6 +63,7 @@ copyright: create_time: 创建时间 license_title: 版权声明 license_content: "本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！" +article-aging: "本文距离上次更新已过去 %s 天，部分内容可能已经过时，请注意甄别。" ago: second: "%s 秒前" minute: "%s 分钟前" diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index d71da87..0befba6 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -63,6 +63,7 @@ copyright: create_time: 撰寫時間 license_title: 版權宣告 license_content: "這個網站所有文章均使用 %s 授權" +article-aging: "本文距離上次更新已過去 %s 天，部分內容可能已經過時，請註意甄別。" ago: second: "%s 秒前" minute: "%s 分鐘前" diff --git a/layout/article-content.ejs b/layout/article-content.ejs index 9d5df90..49fb4e0 100644 --- a/layout/article-content.ejs +++ b/layout/article-content.ejs @@ -32,6 +32,12 @@ <% } %>
+ <% if (page?.aging === true) { %> +
+ <%- __('article-aging', '0') %> +
+ <% } %> + <%- page.content %>
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index b601a01..027fe35 100644 --- a/source/css/common/variables.styl +++ b/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 mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color + // 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 } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index c8aac35..ec99b14 100644 --- a/source/css/layout/article-content.styl +++ b/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) } diff --git a/source/js/post-helper.js b/source/js/post-helper.js index a0e71a3..dd0e02b 100644 --- a/source/js/post-helper.js +++ b/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() }