feat: 過期通知優化，可單獨文章關閉

fix: 修復説説評論 css 受主題影響的 bug
jerryc127 · Nov 5, 2024 · 91c8c5c · 91c8c5c
1 parent fb4ab20
commit 91c8c5c
Show file tree

Hide file tree

Showing 25 changed files with 83 additions and 81 deletions.
diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
@@ -69,16 +69,6 @@
     })
   }
 
-  let noticeOutdate = 'undefined'
-  if (theme.noticeOutdate && theme.noticeOutdate.enable) {
-    noticeOutdate = JSON.stringify({
-      limitDay: theme.noticeOutdate.limit_day,
-      position: theme.noticeOutdate.position,
-      messagePrev: theme.noticeOutdate.message_prev,
-      messageNext: theme.noticeOutdate.message_next,
-    })
-  }
-
   let highlight = 'undefined'
   let syntaxHighlighter = config.syntax_highlighter
   let highlightEnable = syntaxHighlighter ? ['highlight.js', 'prismjs'].includes(syntaxHighlighter) : (config.highlight.enable || config.prismjs.enable)
@@ -100,7 +90,6 @@ script.
     algolia: !{algolia},
     localSearch: !{localSearch},
     translate: !{translate},
-    noticeOutdate: !{noticeOutdate},
     highlight: !{highlight},
     copy: {
       success: '!{_p("copy.success")}',

diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug
@@ -23,6 +23,5 @@ script#config-diff.
     isHome: !{is_home()},
     isHighlightShrink: !{isHighlightShrink},
     isToc: !{showToc},
-    postUpdate: '!{full_date(page.updated)}',
     isShuoshuo: !{page.type == 'shuoshuo'}
   }
diff --git a/layout/includes/page/default-page.pug b/layout/includes/page/default-page.pug
@@ -1,2 +1,2 @@
-#article-container
+#article-container.container
   != page.content
diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug
@@ -1,4 +1,4 @@
-#article-container
+#article-container.container
   .flink
     - let { content, random, flink_url } = page
     - let pageContent = content

diff --git a/layout/includes/page/shuoshuo.pug b/layout/includes/page/shuoshuo.pug
@@ -28,7 +28,7 @@
           const btn = e.target.closest('.shuoshuo-comment-btn')
           if (!btn) return
 
-          const ele = btn.parentNode.nextElementSibling
+          const ele = btn.closest('.container').nextElementSibling
           const { shuoshuoComment } = window
           const isInclude = ele.classList.contains('no-comment')
           runDestroy(shuoshuoComment)
@@ -103,22 +103,24 @@
 
                 return `
                   <div class="shuoshuo-item">
-                    <div class="shuoshuo-item-header">
-                      <div class="shuoshuo-avatar">
-                        <img class="no-lightbox" src="${item.avatar || '!{url_for(theme.avatar.img)}'}">
+                    <div class="container">
+                      <div class="shuoshuo-item-header">
+                        <div class="shuoshuo-avatar">
+                          <img class="no-lightbox" src="${item.avatar || '!{url_for(theme.avatar.img)}'}">
+                        </div>
+                        <div class="shuoshuo-info">
+                          <div class="shuoshuo-author">${item.author || '!{config.author}'}</div>
+                          <time class="shuoshuo-date" title="${formattedDate}">
+                            ${btf.diffDate(formattedDate, true)}
+                          </time>
+                        </div>
                       </div>
-                      <div class="shuoshuo-info">
-                        <div class="shuoshuo-author">${item.author || '!{config.author}'}</div>
-                        <time class="shuoshuo-date" title="${formattedDate}">
-                          ${btf.diffDate(formattedDate, true)}
-                        </time>
+                      <div class="shuoshuo-content">${item.content}</div>
+                      <div class="shuoshuo-footer ${tags ? 'flex-between' : 'flex-end'}">
+                        ${tags ? `<div class="shuoshuo-tags">${tags}</div>` : ''}
+                        ${commentButton}
                       </div>
                     </div>
-                    <div class="shuoshuo-content">${item.content}</div>
-                    <div class="shuoshuo-footer ${tags ? 'flex-between' : 'flex-end'}">
-                      ${tags ? `<div class="shuoshuo-tags">${tags}</div>` : ''}
-                      ${commentButton}
-                    </div>
                     ${commentContainer}
                   </div>`
               }).join('')
@@ -165,21 +167,22 @@
     if site.data.shuoshuo
       each i in shuoshuoFN(site.data.shuoshuo, page)
         .shuoshuo-item
-          .shuoshuo-item-header
-            .shuoshuo-avatar
-              img.no-lightbox(src=i.avatar || url_for(theme.avatar.img))
-            .shuoshuo-info
-              .shuoshuo-author=i.author || config.author
-              time.shuoshuo-date(title=i.date)=i.date
-          .shuoshuo-content
-            !=markdown(i.content)
-          .shuoshuo-footer(class=i.tags && i.tags.length ? 'flex-between' : 'flex-end')
-            if i.tags
-              .shuoshuo-tags
-                each tag in i.tags
-                  span.shuoshuo-tag=tag
-            if i.key && commentsJsLoad
-              .shuoshuo-comment-btn(onclick='addCommentToShuoshuo(event)')
-                i.fa-solid.fa-comments
+          .container
+            .shuoshuo-item-header
+              .shuoshuo-avatar
+                img.no-lightbox(src=i.avatar || url_for(theme.avatar.img))
+              .shuoshuo-info
+                .shuoshuo-author=i.author || config.author
+                time.shuoshuo-date(title=i.date)=i.date
+            .shuoshuo-content
+              !=markdown(i.content)
+            .shuoshuo-footer(class=i.tags && i.tags.length ? 'flex-between' : 'flex-end')
+              if i.tags
+                .shuoshuo-tags
+                  each tag in i.tags
+                    span.shuoshuo-tag=tag
+              if i.key && commentsJsLoad
+                .shuoshuo-comment-btn(onclick='addCommentToShuoshuo(event)')
+                  i.fa-solid.fa-comments
           if i.key && commentsJsLoad
             .shuoshuo-comment.no-comment(data-key=i.key)
diff --git a/layout/includes/post/outdate-notice.pug b/layout/includes/post/outdate-notice.pug
@@ -0,0 +1,8 @@
+- const { limit_day, message_prev, message_next, position} = theme.noticeOutdate
+- const notice_data = { limitDay: limit_day, messagePrev: message_prev, messageNext: message_next, postUpdate: full_date(page.updated)}
+if position === 'top'
+  #post-outdate-notice(data=notice_data hidden)
+  !=page.content
+else
+  !=page.content
+  #post-outdate-notice(data=notice_data hidden)
diff --git a/layout/post.pug b/layout/post.pug
@@ -5,7 +5,11 @@ block content
     if top_img === false
       include includes/header/post-info.pug
 
-    article#article-container.post-content!=page.content
+    article#article-container.container.post-content
+      if theme.noticeOutdate.enable && page.noticeOutdate !== false 
+        include includes/post/outdate-notice.pug
+      else
+        !=page.content
     include includes/post/post-copyright.pug
     .tag_share
       if (page.tags.length > 0 && theme.post_meta.post.tags)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js
@@ -3,8 +3,8 @@
  * galleryGroup and gallery
  * {% galleryGroup [name] [descr] [url] [img] %}
  *
- * {% gallery [button],%}
- * {% gallery url,[url],[button]%}
+ * {% gallery [button] %}
+ * {% gallery url,[url],[button] %}
  */
 
 'use strict'

diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
@@ -42,7 +42,7 @@ $code-block
     counter-reset: line
     white-space: pre-wrap
 
-#article-container
+.container
   pre,
   code
     font-size: $code-font-size
@@ -164,7 +164,7 @@ $code-block
       border: none
 
 if $highlight_macstyle
-  #article-container
+  .container
     figure.highlight
       margin: 0 0 24px
       border-radius: 7px
@@ -202,7 +202,7 @@ if $highlight_macstyle
               transform: rotate(90deg)
 
 if hexo-config('code_blocks.height_limit')
-  #article-container
+  .container
     .code-expand-btn
       position: absolute
       bottom: 0
@@ -243,7 +243,7 @@ if hexo-config('code_blocks.height_limit')
       opacity: .6
 
 if hexo-config('code_blocks.fullpage')
-  #article-container
+  .container
     figure.highlight.code-fullpage
       position: fixed
       top: 0

diff --git a/source/css/_highlight/highlight/index.styl b/source/css/_highlight/highlight/index.styl
@@ -1,7 +1,7 @@
 if $highlight_theme != false
   @require 'diff'
 
-#article-container
+.container
   figure.highlight
     .line
       if wordWrap

diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl
@@ -4,7 +4,7 @@ if $prismjs_line_number
 if $highlight_theme != false
   @require 'diff'
 
-#article-container
+.container
   pre[class*='language-']
     // scrollbar - firefox
     @-moz-document url-prefix()

diff --git a/source/css/_highlight/prismjs/line-number.styl b/source/css/_highlight/prismjs/line-number.styl
@@ -1,4 +1,4 @@
-#article-container
+.container
   pre[class*='language-']
     &.line-numbers
       position: relative

diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl
@@ -69,7 +69,7 @@ beautify()
   hr
     @extend .custom-hr
 
-#article-container
+.container
   word-wrap: break-word
   overflow-wrap: break-word
 
@@ -236,14 +236,17 @@ beautify()
           &:hover
             text-decoration: none
 
-  .post-outdate-notice
+  #post-outdate-notice
     position: relative
     margin: 0 0 20px
     padding: .5em 1.2em
     background-color: $noticeOutdate-bg
     color: $noticeOutdate-color
     addBorderRadius(3)
 
+    .num
+      padding: 0 4px
+
     if hexo-config('noticeOutdate.style') == 'flat'
       padding: .5em 1em .5em 2.6em
       border-left: 5px solid $noticeOutdate-border

diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
@@ -153,7 +153,7 @@ if hexo-config('math.use')
 .aplayer
   color: $font-black
 
-#article-container
+.container
   .aplayer
     margin: 0 0 20px
 

diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
@@ -41,7 +41,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       background-color: alpha($dark-black, .7)
       content: ''
 
-    #article-container
+    .container
       code
         background: #2c2c2c
 
@@ -87,9 +87,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     .hide-button,
     .btn-beautify,
     .hl-label,
-    .post-outdate-notice,
+    #post-outdate-notice,
     .error-img,
-    #article-container iframe,
+    .container iframe,
     .gist,
     .ads-wrap
       filter: brightness(.8)

diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl
@@ -77,13 +77,13 @@ if hexo-config('readmode')
     #footer,
     #post > *:not(#post-info):not(.post-content),
     #nav,
-    .post-outdate-notice,
+    #post-outdate-notice,
     #web_bg,
     #rightside,
     .not-top-img
       display: none !important
 
-    #article-container
+    .container
       a
         color: #99a9bf
 

diff --git a/source/css/_page/flink.styl b/source/css/_page/flink.styl
@@ -1,4 +1,4 @@
-#article-container
+.container
   .flink
     margin-bottom: 20px
 

diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl
@@ -1,4 +1,4 @@
-#article-container
+.container
   .btn-center
     margin: 0 0 20px
     text-align: center

diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl
@@ -1,4 +1,4 @@
-#article-container
+.container
   figure.gallery-group
     position: relative
     float: left

diff --git a/source/css/_tags/inlineImg.styl b/source/css/_tags/inlineImg.styl
@@ -1,4 +1,4 @@
-#article-container
+.container
   .inline-img
     display: inline
     margin: 0 3px

diff --git a/source/css/_tags/series.styl b/source/css/_tags/series.styl
@@ -1,4 +1,4 @@
-#article-container
+.container
   .series-items
     a
       &:hover

diff --git a/source/css/_tags/tabs.styl b/source/css/_tags/tabs.styl
@@ -1,5 +1,5 @@
 
-#article-container
+.container
   .tabs
     position: relative
     margin: 0 0 20px

diff --git a/source/css/_tags/timeline.styl b/source/css/_tags/timeline.styl
@@ -1,4 +1,4 @@
-#article-container
+.container
   .timeline
     margin: 0 10px 20px
     padding: 14px 0 5px 20px

diff --git a/source/js/main.js b/source/js/main.js
@@ -807,18 +807,14 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   const addPostOutdateNotice = () => {
-    const { limitDay, messagePrev, messageNext, position } = GLOBAL_CONFIG.noticeOutdate
-    const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
+    const ele = document.getElementById('post-outdate-notice')
+    if (!ele) return
+
+    const { limitDay, messagePrev, messageNext, postUpdate } = JSON.parse(ele.getAttribute('data'))
+    const diffDay = btf.diffDate(postUpdate)
     if (diffDay >= limitDay) {
-      const ele = document.createElement('div')
-      ele.className = 'post-outdate-notice'
       ele.textContent = `${messagePrev} ${diffDay} ${messageNext}`
-      const $targetEle = document.getElementById('article-container')
-      if (position === 'top') {
-        $targetEle.insertBefore(ele, $targetEle.firstChild)
-      } else {
-        $targetEle.appendChild(ele)
-      }
+      ele.hidden = false
     }
   }
 
@@ -895,7 +891,7 @@ document.addEventListener('DOMContentLoaded', () => {
     justifiedIndexPostUI()
 
     if (GLOBAL_CONFIG_SITE.isPost) {
-      GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
+      addPostOutdateNotice()
       GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
     } else {
       GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))