hexo-theme-fluid 1.8.13 → 1.8.14

package/_config.yml

@@ -183,6 +183,13 @@ color:
   board_color: "#fff"
   board_color_dark: "#252d38"
 
+  # 滚动条颜色
+  # Color of scrollbar
+  scrollbar_color: "#c4c6c9"
+  scrollbar_color_dark: "#687582"
+  scrollbar_hover_color: "#a6a6a6"
+  scrollbar_hover_color_dark: "#9da8b3"
+
 # 主题字体配置
 # Font
 font:

package/layout/_partial/plugins/math.ejs

@@ -14,7 +14,7 @@ if (enable) {
 var lazy = false;
 if (theme.lazyload.enable) {
   var verRe = theme.static_prefix.mathjax.match(/@(\d{1,2})\.?(\d{0,2})\.?(\d{0,2})/);
-  if (verRe.length >= 4) {
+  if (verRe && verRe.length >= 4) {
     ver = `${verRe[1]}.${verRe[2] || 'x'}.${verRe[3] || 'x'}`;
     lazy = compareVersions(ver, '3.2.0') >= 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-fluid",
-  "version": "1.8.13",
+  "version": "1.8.14",
   "description": "An elegant Material-Design theme for Hexo.",
   "repository": {
     "type": "git",

package/scripts/events/lib/highlight.js

@@ -30,8 +30,8 @@ module.exports = (hexo) => {
           return `<div class="hljs code-wrapper">${p1}</div>`;
         });
         page.content = page.content.replace(/<td class="gutter/gims, '<td class="gutter hljs');
-      } else if (!hexo.config.highlight.line_number) {
-        page.content = page.content.replace(/(?<!<div class="code-wrapper">)(<pre.+?<\/pre>)/gims, (str, p1) => {
+      } else {
+        page.content = page.content.replace(/(?<!<td class="code.*?">|<div class="code-wrapper">)(<pre.+?<\/pre>)/gims, (str, p1) => {
           if (/<code[^>]+?mermaid[^>]+?>/ims.test(p1)) {
             return str.replace(/(class=".*?)hljs(.*?")/gims, '$1$2');
           }
@@ -39,6 +39,10 @@ module.exports = (hexo) => {
         });
       }
 
+      page.content = page.content.replace(/<pre><code>/gims, (str) => {
+        return '<pre><code class="hljs">';
+      });
+
       if (hexo.config.highlight.line_number) {
         // Mermaid block adaptation
         page.content = page.content.replace(/<figure.+?<td class="code">.*?(<pre.+?<\/pre>).+?<\/figure>/gims, (str, p1) => {
@@ -48,6 +52,7 @@ module.exports = (hexo) => {
           return str;
         });
       }
+
       return page;
     });
   } else if (config.code.highlight.lib === 'prismjs') {
@@ -73,6 +78,11 @@ module.exports = (hexo) => {
         }
         return `<div class="code-wrapper">${p1}</div>`;
       });
+
+      page.content = page.content.replace(/<pre><code>/gims, (str) => {
+        return '<pre class="language-none"><code class="language-none">';
+      });
+
       return page;
     });
   }

package/source/css/_pages/_base/_widget/board.styl

@@ -7,7 +7,3 @@
   z-index 3
   -webkit-box-shadow 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
   box-shadow 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
-
-@media (max-width: 767px)
-  #board
-    overflow-x hidden

package/source/css/_pages/_base/base.styl

@@ -34,6 +34,7 @@ code
 
 table
   font-size inherit
+  color var(--post-text-color)
 
 img[lazyload]
   object-fit cover
@@ -46,3 +47,17 @@ img[lazyload]
 
 *[align="right"]
   text-align right
+
+::-webkit-scrollbar
+  width 6px
+  height 4px
+
+::-webkit-scrollbar-thumb
+  background-color var(--scrollbar-color)
+  border-radius 6px
+
+  &:hover
+    background-color var(--scrollbar-hover-color)
+
+::-webkit-scrollbar-corner
+  background-color transparent

package/source/css/_pages/_base/color-schema.styl

@@ -11,6 +11,8 @@
   --link-hover-bg-color $link-hover-bg-color
   --navbar-bg-color $navbar-bg-color
   --navbar-text-color $navbar-text-color
+  --scrollbar-color $scrollbar-color
+  --scrollbar-hover-color $scrollbar-hover-color
 
 dark-colors()
   --body-bg-color $body-bg-color-dark
@@ -24,6 +26,8 @@ dark-colors()
   --link-hover-bg-color $link-hover-bg-color-dark
   --navbar-bg-color $navbar-bg-color-dark
   --navbar-text-color $navbar-text-color-dark
+  --scrollbar-color $scrollbar-color-dark
+  --scrollbar-hover-color $scrollbar-hover-color-dark
 
   img, .note, .label
     -webkit-filter brightness(.9)
@@ -40,15 +44,6 @@ dark-colors()
       background-color rgba(#3e4b5e, .35)
       transition background-color .2s ease-in-out
 
-    pre, td.gutter, td.code > .code-wrapper
-      -webkit-filter brightness(.9)
-      filter brightness(.9)
-      transition filter .2s ease-in-out
-
-    td.gutter pre
-      -webkit-filter initial
-      filter initial
-
     h1, h2
       border-bottom-color $line-color-dark
       transition border-bottom-color .2s ease-in-out

package/source/css/_pages/_base/rewrite.styl

@@ -222,18 +222,6 @@ label
     pre
       background-color initial !important
 
-  & > .code-wrapper
-    position relative
-    border-radius 3px
-
-    pre[class*=language-].line-numbers
-      position initial
-
-  figure.highlight
-    td.code > pre
-      border-top-left-radius 0
-      border-bottom-left-radius 0
-
   hr
     height 0
     margin 2rem 0
@@ -242,6 +230,13 @@ label
     border-top-style solid
     border-top-color rgba(0, 0, 0, .1)
 
+*:not(td) > .code-wrapper
+  position relative
+  border-radius 3px
+
+pre[class*=language-].line-numbers
+  position initial
+
 figure
   margin 1rem 0
 
@@ -266,6 +261,9 @@ figure.highlight
 
   td.gutter
     display table-cell
+    position sticky
+    left 0
+    z-index 1
 
     &:not(.hljs)
       background-color #f6f8fa
@@ -284,6 +282,10 @@ figure.highlight
       span.line
         color #999
 
+  td.code > pre
+    border-top-left-radius 0
+    border-bottom-left-radius 0
+
 // Rewrite mdb.css
 .list-group-item
   background-color transparent

package/source/css/_pages/_post/post.styl

@@ -28,6 +28,10 @@
     object-fit cover
     max-width 100%
 
+@media (max-width: 767px)
+  .page-content, .post-content
+    overflow-x hidden
+
 .post-metas
   display flex
   flex-direction row
@@ -176,6 +180,24 @@
   overflow hidden
   transition all .3s ease-in-out
 
+.toc-list-item
+  &.is-active-li::before
+    height 1rem
+    margin 0.25rem 0
+    visibility visible
+
+  &::before
+    width 0.15rem
+    height 0.2rem
+    position absolute
+    left 0.25rem
+    content ''
+    border-radius 2px
+    margin 0.65rem 0
+    background var(--link-hover-color)
+    visibility hidden
+    transition height .1s ease-in-out, margin .1s ease-in-out, visibility .1s ease-in-out
+
 @media (max-width: 1024px)
   .toc-container
     padding-left 0

package/source/css/_variables/base.styl

@@ -46,5 +46,11 @@ $scroll-arrow-height-limit = theme-config-origin("scroll_down_arrow.banner_heigh
 $board-bg-color = theme-config("color.board_color", "#fff")
 $board-bg-color-dark = theme-config("color.board_color_dark", "#252d38")
 
+// scrollbar
+$scrollbar-color = theme-config("color.scrollbar_color", "#c4c6c9")
+$scrollbar-color-dark = theme-config("color.scrollbar_color_dark", "#687582")
+$scrollbar-hover-color = theme-config("color.scrollbar_hover_color", "#a6a6a6")
+$scrollbar-hover-color-dark = theme-config("color.scrollbar_hover_color_dark", "#9da8b3")
+
 // Shadow
 $img-shadow = 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)

package/source/js/color-schema.js

@@ -188,7 +188,7 @@
     }
 
     // 设置 utterances 评论主题
-    var utterances = document.querySelector('iframe');
+    var utterances = document.querySelector('.utterances-frame');
     if (utterances) {
       var theme = window.UtterancesThemeLight;
       if (schema === 'dark') {