fix: 修復上個版本導致的代碼塊部分css沒有生成的bugs

fix: 修復valine背景圖片再次出現時，由左到右移動的bugs
improvement: 調大sidebar的寬度
improvement: html結構調整，mobile-sidebar改為sidebar/search調整
remove: 刪除多餘的css和pug

layout/404.pug

@@ -25,5 +25,4 @@ html(lang=config.language data-theme=theme.display_mode)
             i.fas.fa-rocket
             = _p('error404.back_button')
           
-    !=partial('includes/third-party/search/index', {}, {cache:theme.fragment_cache})
     include includes/additional-js.pug

layout/includes/footer.pug

@@ -19,5 +19,5 @@
     .icp
       a(href=theme.footer.ICP.url)
         if theme.footer.ICP.icon
-          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='icp')
+          img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='ICP')
         span=theme.footer.ICP.text

layout/includes/layout.pug

@@ -11,7 +11,7 @@ html(lang=config.language data-theme=theme.display_mode)
     if theme.background
       #web_bg
       
-    !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
+    !=partial('includes/sidebar', {}, {cache:theme.fragment_cache})
 
     #body-wrap
       include ./header/index.pug

layout/includes/mobile-sidebar/index.pug

@@ -1,3 +0,0 @@
-#mobile-sidebar
-  #menu_mask
-  include ../mobile-sidebar/mobile-menus.pug

layout/includes/mobile-sidebar/mobile-menus.pug

@@ -1,29 +0,0 @@
-#mobile-sidebar-menus
-  .mobile_author_icon
-    if theme.lazyload.enable
-      img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-    else
-      img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-  .mobile_post_data
-    if site.posts.length
-      .mobile_data_item.is-center
-        .mobile_data_link
-          a(href=url_for(config.archive_dir) + '/')
-            .headline= _p('aside.articles') 
-            .length_num= site.posts.length
-
-    if site.tags.length
-      .mobile_data_item.is-center       
-        .mobile_data_link
-          a(href=url_for(config.tag_dir) + '/' )
-            .headline= _p('aside.tags')
-            .length_num= site.tags.length
-
-    if site.categories.length
-      .mobile_data_item.is-center      
-        .mobile_data_link
-          a(href=url_for(config.category_dir) + '/')
-            .headline= _p('aside.categories') 
-            .length_num= site.categories.length
-  hr
-  !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})

layout/includes/rightside.pug

@@ -1,4 +1,4 @@
-section#rightside
+#rightside
   #rightside-config-hide
     if is_post() && theme.readmode
       button#readmode(type="button" title=_p('rightside.readmode_title'))

layout/includes/sidebar.pug

@@ -0,0 +1,31 @@
+#sidebar
+  #menu-mask
+  #sidebar-menus
+    .author-avatar
+      if theme.lazyload.enable
+        img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+      else
+        img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+    .site-data
+      if site.posts.length
+        .data-item.is-center
+          .data-item-link
+            a(href=url_for(config.archive_dir) + '/')
+              .headline= _p('aside.articles') 
+              .length-num= site.posts.length
+
+      if site.tags.length
+        .data-item.is-center
+          .data-item-link
+            a(href=url_for(config.tag_dir) + '/' )
+              .headline= _p('aside.tags')
+              .length-num= site.tags.length
+
+      if site.categories.length
+        .data-item.is-center
+          .data-item-link
+            a(href=url_for(config.category_dir) + '/')
+              .headline= _p('aside.categories') 
+              .length-num= site.categories.length
+    hr
+    !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})

layout/includes/third-party/search/algolia.pug

@@ -1,12 +1,13 @@
-#algolia-search.search-dialog
+#algolia-search
-  #algolia-search-title.search-dialog__title Algolia
+  .search-dialog
-  #algolia-input-panel
+    #algolia-search-title.search-dialog__title Algolia
-    #algolia-search-input
+    #algolia-input-panel
-  hr
+      #algolia-search-input
-  #algolia-search-results
+    hr
-    #algolia-hits
+    #algolia-search-results
-    #algolia-pagination
+      #algolia-hits
-    #algolia-stats
+      #algolia-pagination
-  span.search-close-button
+      #algolia-stats
-    i.fas.fa-times
+    span.search-close-button
-#search-mask
+      i.fas.fa-times
+  #search-mask

layout/includes/third-party/search/local-search.pug

@@ -1,23 +1,24 @@
-#local-search.search-dialog
+#local-search
-  #local-search-title.search-dialog__title=_p("local_search.label")
+  .search-dialog
-  #local-input-panel
+    #local-search-title.search-dialog__title=_p("local_search.label")
-    #local-search-input
+    #local-input-panel
-      .local-search-box
+      #local-search-input
-        input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
+        .local-search-box
-  hr
+          input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
-  #local-search-results
+    hr
-    #local-hits
+    #local-search-results
-    #local-stats
+      #local-hits
-      #hr.local-search-stats__hr
+      #local-stats
-        case config.language
+        #hr.local-search-stats__hr
-          when "zh-CN"
+          case config.language
-            span=_p("local_search.by")
+            when "zh-CN"
-            |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+              span=_p("local_search.by")
-            |  #[span=_p("local_search.powered")]
+              |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
-          when "en"
+              |  #[span=_p("local_search.powered")]
-          default
+            when "en"
-            span=_p("local_search.powered_by")
+            default
-            |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+              span=_p("local_search.powered_by")
-  span.search-close-button
+              |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
-    i.fas.fa-times
+    span.search-close-button
-#search-mask
+      i.fas.fa-times
+  #search-mask

layout/includes/third-party/subtitle.pug

@@ -1,97 +1,40 @@
 - var source = theme.subtitle.source
-if source == '1'
+case source
-  script.
+  when 1
-    function subtitleType () {
+    script.
-      $.getJSON('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',function (data) {
+      function subtitleType () {
-        if (!{theme.subtitle.effect}) {
+        $.getJSON('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',function (data) {
-          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-          var both = sub.unshift(data.text)
-          typed = new Typed('#subtitle', {
-            strings: sub,
-            startDelay: 300,
-            typeSpeed: 150,
-            loop: !{theme.subtitle.loop},
-            backSpeed: 50,
-          })
-        } else {
-          document.getElementById('subtitle').innerHTML = data.text
-        }
-      })
-    }
-
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
-
-else if source == '2'
-  script.
-    function subtitleType () {
-      $.getJSON('https://v1.hitokoto.cn', function (data) {
-        if (!{theme.subtitle.effect}) {
-          var from = '出自 ' + data.from
-          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-          var both = sub.unshift(data.hitokoto, from)
-          var typed = new Typed('#subtitle', {
-            strings: sub,
-            startDelay: 300,
-            typeSpeed: 150,
-            loop: !{theme.subtitle.loop},
-            backSpeed: 50,
-          })
-        } else {
-          document.getElementById('subtitle').innerHTML = data.hitokoto
-        }
-      })
-    }
-
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
-
-else if source == '3'
-  script.
-    function subtitleType () {
-      $.getScript('http://yijuzhan.com/api/word.php?m=js', function () {
-        var con = str[0]
-        if (!{theme.subtitle.effect}) {
-          var from = '出自 ' + str[1]
-          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-          var both = sub.unshift(con, from)
-          var typed = new Typed('#subtitle', {
-            strings: sub,
-            startDelay: 300,
-            typeSpeed: 150,
-            loop: !{theme.subtitle.loop},
-            backSpeed: 50,
-          })
-        } else {
-          document.getElementById('subtitle').innerHTML = con
-        }
-      })
-    }
-
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
-
-else if source == '4'
-  script.
-    function subtitleType () {
-      $.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
-        jinrishici.load(function (result) {
           if (!{theme.subtitle.effect}) {
             var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-            var content = result.data.content
+            var both = sub.unshift(data.text)
-            var both = sub.unshift(content)
+            typed = new Typed('#subtitle', {
+              strings: sub,
+              startDelay: 300,
+              typeSpeed: 150,
+              loop: !{theme.subtitle.loop},
+              backSpeed: 50,
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = data.text
+          }
+        })
+      }
+
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }
+
+  when 2
+    script.
+      function subtitleType () {
+        $.getJSON('https://v1.hitokoto.cn', function (data) {
+          if (!{theme.subtitle.effect}) {
+            var from = '出自 ' + data.from
+            var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+            var both = sub.unshift(data.hitokoto, from)
             var typed = new Typed('#subtitle', {
               strings: sub,
               startDelay: 300,
@@ -100,38 +43,96 @@ else if source == '4'
               backSpeed: 50,
             })
           } else {
-            document.getElementById('subtitle').innerHTML = result.data.content
+            document.getElementById('subtitle').innerHTML = data.hitokoto
           }
         })
-      })
-    }
-
-    if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
-      subtitleType()
-    }
-
-else
-  script.
-    function subtitleType () {
-      if (!{theme.subtitle.effect}) { 
-        var typed = new Typed("#subtitle", {
-          strings: "!{theme.subtitle.sub}".split(","),
-          startDelay: 300,
-          typeSpeed: 150,
-          loop: !{theme.subtitle.loop},
-          backSpeed: 50
-        })
-      } else {
-        document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
       }
-    }
 
-    if (!{theme.subtitle.effect}) {
+      if (!{theme.subtitle.effect}) {
-      if (typeof Typed === 'function') subtitleType()
+        if (typeof Typed === 'function') subtitleType()
-      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
-    } else {
+      } else {
-      subtitleType()
+        subtitleType()
-    }
+      }
+
+  when 3
+    script.
+      function subtitleType () {
+        $.getScript('http://yijuzhan.com/api/word.php?m=js', function () {
+          var con = str[0]
+          if (!{theme.subtitle.effect}) {
+            var from = '出自 ' + str[1]
+            var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+            var both = sub.unshift(con, from)
+            var typed = new Typed('#subtitle', {
+              strings: sub,
+              startDelay: 300,
+              typeSpeed: 150,
+              loop: !{theme.subtitle.loop},
+              backSpeed: 50,
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = con
+          }
+        })
+      }
+
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }
+
+  when 4
+    script.
+      function subtitleType () {
+        $.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
+          jinrishici.load(function (result) {
+            if (!{theme.subtitle.effect}) {
+              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+              var content = result.data.content
+              var both = sub.unshift(content)
+              var typed = new Typed('#subtitle', {
+                strings: sub,
+                startDelay: 300,
+                typeSpeed: 150,
+                loop: !{theme.subtitle.loop},
+                backSpeed: 50,
+              })
+            } else {
+              document.getElementById('subtitle').innerHTML = result.data.content
+            }
+          })
+        })
+      }
+
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }
+
+  default
+    script.
+      function subtitleType () {
+        if (!{theme.subtitle.effect}) { 
+          var typed = new Typed("#subtitle", {
+            strings: "!{theme.subtitle.sub}".split(","),
+            startDelay: 300,
+            typeSpeed: 150,
+            loop: !{theme.subtitle.loop},
+            backSpeed: 50
+          })
+        } else {
+          document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
+        }
+      }
+
+      if (!{theme.subtitle.effect}) {
+        if (typeof Typed === 'function') subtitleType()
+        else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+      } else {
+        subtitleType()
+      }

layout/includes/widget/card_author.pug

@@ -13,19 +13,19 @@
         .card-info-data-item.is-center
           a(href=url_for(config.archive_dir) + '/')
             .headline= _p('aside.articles') 
-            .length_num= site.posts.length
+            .length-num= site.posts.length
 
       if site.tags.length
         .card-info-data-item.is-center
           a(href=url_for(config.tag_dir) + '/')
             .headline= _p('aside.tags')
-            .length_num= site.tags.length
+            .length-num= site.tags.length
 
       if site.categories.length
         .card-info-data-item.is-center
           a(href=url_for(config.category_dir) + '/')
             .headline= _p('aside.categories') 
-            .length_num= site.categories.length
+            .length-num= site.categories.length
 
     a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
       i(class=theme.aside.card_author.button.icon)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b4",
+  "version": "3.3.0-b5",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

scripts/events/init.js

@@ -18,4 +18,10 @@ hexo.extend.filter.register('before_generate', () => {
       process.exit(-1)
     }
   }
+
+  // let stylus to get the hexo highlight config
+  const themeConfig = hexo.theme.config
+  const hexoConfig = hexo.config
+  themeConfig.highlight_settings = hexoConfig.highlight
+  themeConfig.prismjs_settings = hexoConfig.prismjs
 })

source/css/_global/function.styl

@@ -68,7 +68,7 @@ if hexo-config('enter_transitions')
   #ribbon-canvas
     animation: ribbon_to_show 4s
 
-  #mobile-sidebar-menus
+  #sidebar-menus
     &.open
       for i in 1 2 3 4
         > :nth-child({i})

source/css/_global/index.styl

@@ -25,7 +25,6 @@
   --blockquote-color: $blockquote-color
   --blockquote-bg: $blockquote-background-color
   --reward-pop: $reward-pop-up-bg
-  --sidebar-icon-color: $sidebar-icon-color
   --toc-link-color: $toc-link-color
 
 html

source/css/_highlight/highlight.styl

@@ -1,8 +1,8 @@
 // https://github.com/equinusocio/vsc-material-theme
 $highlight_theme = hexo-config('highlight_theme')
-$highlighEnable = hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
+$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
-$prismjsEnable = hexo-config('rootConfig.prismjs') && hexo-config('rootConfig.prismjs.enable')
+$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable')
-wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
+wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap')
 
 @require 'theme'
 

source/css/_highlight/highlight/index.styl

@@ -22,9 +22,9 @@ if $highlight_theme != false
       overflow: auto
       border: none
 
-    td
+      td
-      padding: 0
+        padding: 0
-      border: none
+        border: none
 
     .gutter pre
       padding-right: .5rem

source/css/_highlight/prismjs/index.styl

@@ -1,4 +1,4 @@
-if hexo-fonfig('rootConfig.prismjs.line_number')
+if hexo-fonfig('prismjs_settings.line_number')
   @require 'line-number'
 
 if $highlight_theme != false

source/css/_layout/aside.styl

@@ -65,7 +65,7 @@
             color: var(--font-color)
             font-size: 1em
 
-          .length_num
+          .length-num
             margin-top: -.3rem
             color: var(--text-highlight-color)
             font-size: 1.4em
@@ -271,7 +271,7 @@
       bottom: 30px
       z-index: 100
       display: none
-      width: 300px
+      width: $toc-mobile-width
       transform-origin: right bottom
       animation: toc-open .3s
 
@@ -303,7 +303,7 @@
         &.active
           border-left-color: darken($theme-toc-color, 20%)
           background: $theme-toc-color
-          color: $sidebar-active-color
+          color: $toc-active-color
 
       &:before
         position: absolute

source/css/_layout/sidebar.styl

@@ -1,5 +1,5 @@
-#mobile-sidebar
+#sidebar
-  #menu_mask
+  #menu-mask
     position: fixed
     z-index: 102
     display: none
@@ -7,14 +7,14 @@
     height: 100%
     background: alpha($dark-black, .8)
 
-  #mobile-sidebar-menus
+  #sidebar-menus
     position: fixed
     top: 0
-    right: -250px
+    right: -($sidebar-width)
     z-index: 103
     overflow-x: hidden
     overflow-y: auto
-    width: 250px
+    width: $sidebar-width
     height: 100%
     background: var(--sidebar-bg)
     transition: all .5s
@@ -22,7 +22,7 @@
     &.open
       transform: translate3d(-100%, 0, 0)
 
-    & > .mobile_author_icon
+    & > .author-avatar
       padding: 1.3rem 1.5rem 0
       text-align: center
 
@@ -35,20 +35,20 @@
         &:hover
           transform: rotate(360deg)
 
-    .mobile_post_data
+    .site-data
       display: table
       padding: .6rem .5rem 0
       width: 100%
       table-layout: fixed
 
-      .mobile_data_item
+      .data-item
         display: table-cell
 
-        .mobile_data_link
+        .data-item-link
           & > a > div
             @extend .limit-one-line
 
-          .length_num
+          .length-num
             color: var(--text-highlight-color)
             font-size: 1.28em
 
@@ -71,11 +71,11 @@
         cursor: pointer
 
         i:first-child
-          width: 30%
+          width: 25%
           text-align: left
 
         span
-          width: 70%
+          width: 75%
 
           &:hover
             color: $light-blue

source/css/_layout/third-party.styl

@@ -14,7 +14,7 @@
       background: url(hexo-config('valine.bg')) 100% 100% no-repeat
 
       &:focus
-        background: none
+        background-image: none
 
   .vimg
     transition: all .3s

source/css/_mode/darkmode.styl

@@ -26,7 +26,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --blockquote-color: alpha(#FFFFFF, .7)
     --blockquote-bg: lighten(#121212, 10)
     --reward-pop: lighten(#121212, 10)
-    --sidebar-icon-color: alpha(#FFFFFF, .7)
     --toc-link-color: alpha(#FFFFFF, .6)
 
     #web_bg:before,
@@ -69,7 +68,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       figure.highlight
         box-shadow: none
 
-        if hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
+        if hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
           table::-webkit-scrollbar-thumb
             background: lighten(#121212, 5)
 

source/css/_search/algolia.styl

@@ -1,76 +1,77 @@
 #algolia-search
-  animation: titlescale .5s
+  .search-dialog
+    animation: titlescale .5s
 
-  .ais-search-box
+    .ais-search-box
-    margin: 0 auto
+      margin: 0 auto
-    max-width: 100%
+      max-width: 100%
-    width: 100%
+      width: 100%
 
-    input
+      input
-      padding: .25rem .7rem
+        padding: .25rem .7rem
-      outline: none
+        outline: none
-      border: 2px solid $search-color
+        border: 2px solid $search-color
-      border-radius: 2rem
+        border-radius: 2rem
-      background: var(--search-bg)
+        background: var(--search-bg)
-      color: var(--search-input-color)
+        color: var(--search-input-color)
 
-  .ais-hits--item.algolia-hit-item
+    .ais-hits--item.algolia-hit-item
-    position: relative
+      position: relative
-    padding-left: 1.2rem
+      padding-left: 1.2rem
-
-    &:hover
-      &:before
-        border-color: $pseudo-hover
-
-    &:before
-      $w = .5em
-      position: absolute
-      top: .53em
-      left: 0
-      width: w = $w
-      height: h = w
-      border: .15rem solid $search-color
-      border-radius: w
-      background: transparent
-      content: ''
-      line-height: h
-      transition: all .2s ease-in-out
-
-    a
-      display: block
-      color: var(--search-result-title)
-      cursor: pointer
 
       &:hover
-        color: $search-color
+        &:before
+          border-color: $pseudo-hover
 
-    em
+      &:before
-      color: $search-keyword-highlight
+        $w = .5em
-      font-weight: bold
+        position: absolute
+        top: .53em
+        left: 0
+        width: w = $w
+        height: h = w
+        border: .15rem solid $search-color
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+        transition: all .2s ease-in-out
 
-  .ais-pagination.pagination
+      a
-    margin: .8rem 0 0
+        display: block
-    padding: 0
+        color: var(--search-result-title)
-    text-align: center
+        cursor: pointer
 
-    .ais-pagination--item
+        &:hover
-      margin: 0 .2rem
+          color: $search-color
+
+      em
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .ais-pagination.pagination
+      margin: .8rem 0 0
       padding: 0
+      text-align: center
 
-      a
+      .ais-pagination--item
-        display: inline-block
+        margin: 0 .2rem
-        min-width: 1.2rem
+        padding: 0
-        height: 1.2rem
-        text-align: center
-        line-height: 1.2rem
 
-    .ais-pagination--item.current
+        a
-      a
+          display: inline-block
-        background: $theme-paginator-color
+          min-width: 1.2rem
-        color: #eee
+          height: 1.2rem
-        cursor: default
+          text-align: center
+          line-height: 1.2rem
 
-  .algolia-logo
+      .ais-pagination--item.current
-    padding-top: 2px
+        a
-    width: 4rem
+          background: $theme-paginator-color
-    height: 1.5rem
+          color: #eee
+          cursor: default
+
+    .algolia-logo
+      padding-top: 2px
+      width: 4rem
+      height: 1.5rem

source/css/_search/local-search.styl

@@ -1,68 +1,69 @@
 #local-search
-  animation: titlescale .5s
+  .search-dialog
+    animation: titlescale .5s
 
-  .local-search-box
+    .local-search-box
-    margin: 0 auto
+      margin: 0 auto
-    max-width: 100%
+      max-width: 100%
-    width: 100%
-
-    input
-      padding: .25rem .7rem
       width: 100%
-      outline: none
-      border: 2px solid $search-color
-      border-radius: 2rem
-      background: var(--search-bg)
-      color: var(--search-input-color)
-      -webkit-appearance: none
 
-  .local-search__hit-item
+      input
-    position: relative
+        padding: .25rem .7rem
-    padding-left: 1.2rem
+        width: 100%
-    line-height: 1.7
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 2rem
+        background: var(--search-bg)
+        color: var(--search-input-color)
+        -webkit-appearance: none
 
-    &:hover
+    .local-search__hit-item
-      &:before
+      position: relative
-        border-color: $pseudo-hover
+      padding-left: 1.2rem
-
+      line-height: 1.7
-    &:before
-      $w = .5em
-      position: absolute
-      top: .45em
-      left: 0
-      width: w = $w
-      height: h = w
-      border: .15rem solid $search-color
-      border-radius: w
-      background: transparent
-      content: ''
-      line-height: h
-      transition: all .2s ease-in-out
-
-    a
-      display: block
-      color: var(--search-result-title)
-      font-weight: 600
-      cursor: pointer
 
       &:hover
-        color: $search-color
+        &:before
+          border-color: $pseudo-hover
 
-    .search-result
+      &:before
-      margin: 0 0 .4rem
+        $w = .5em
-      word-break: break-all
+        position: absolute
+        top: .45em
+        left: 0
+        width: w = $w
+        height: h = w
+        border: .15rem solid $search-color
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+        transition: all .2s ease-in-out
 
-    .search-keyword
+      a
-      color: $search-keyword-highlight
+        display: block
-      font-weight: bold
+        color: var(--search-result-title)
+        font-weight: 600
+        cursor: pointer
 
-  .local-search-stats__hr
+        &:hover
-    display: none !important
+          color: $search-color
 
-  .search-result-list
+      .search-result
-    overflow-y: auto
+        margin: 0 0 .4rem
-    max-height: 10.5rem
+        word-break: break-all
 
-    +maxWidth768()
+      .search-keyword
-      padding-bottom: 2rem
+        color: $search-keyword-highlight
-      max-height: 75vh !important
+        font-weight: bold
+
+    .local-search-stats__hr
+      display: none !important
+
+    .search-result-list
+      overflow-y: auto
+      max-height: 10.5rem
+
+      +maxWidth768()
+        padding-bottom: 2rem
+        max-height: 75vh !important

source/css/var.styl

@@ -58,16 +58,12 @@ $a-link-color = #99a9bf
 $sticky-color = $light-orange
 $theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
 // sidebar
-$sidebar-icon-top = 20px
-$sidebar-icon-left = $sidebar-icon-top - 4px
-$sidebar-icon-size = 16px
-$sidebar-icon-color = #1F2D3D
-$sidebar-width = 300px
 $sidebar-background = #f6f8fa
-$sidebar-active-color = #fff
+$sidebar-width = 300px
-$mobile-sidebar-width = 250px
 // aside
 $toc-link-color = #666261
+$toc-mobile-width = 300px
+$toc-active-color = #fff
 // Button
 $button-color = #fff
 $button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange

source/js/main.js

@@ -24,8 +24,8 @@ $(function () {
   // sidebar menus
   const sidebarFn = () => {
     const $toggleMenu = $('#toggle-menu')
-    const $mobileSidebarMenus = $('#mobile-sidebar-menus')
+    const $mobileSidebarMenus = $('#sidebar-menus')
-    const $menuMask = $('#menu_mask')
+    const $menuMask = $('#menu-mask')
     const $body = $('body')
 
     function openMobileSidebar () {
@@ -489,7 +489,7 @@ $(function () {
  * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
  */
   const clickFnOfSubMenu = function () {
-    $('#mobile-sidebar-menus .expand').on('click', function () {
+    $('#sidebar-menus .expand').on('click', function () {
       $(this).parents('.menus_item').find('> .menus_item_child').slideToggle()
       $(this).toggleClass('hide')
     })

source/js/search/algolia.js

@@ -1,7 +1,7 @@
 $(function () {
   const openSearch = () => {
     $('body').css({ width: '100%', overflow: 'hidden' })
-    $('#algolia-search').css('display', 'block')
+    $('#algolia-search .search-dialog').css('display', 'block')
     $('.ais-search-box--input').focus()
     $('#search-mask').fadeIn()
     // shortcut: ESC
@@ -15,12 +15,12 @@ $(function () {
 
   const closeSearch = () => {
     $('body').css({ width: '', overflow: '' })
-    $('#algolia-search').css({
+    $('#algolia-search .search-dialog').css({
       animation: 'search_close .5s'
     })
 
     setTimeout(function () {
-      $('#algolia-search').css({
+      $('#algolia-search .search-dialog').css({
         animation: '',
         display: 'none'
       })

source/js/search/local-search.js

@@ -5,7 +5,7 @@ $(function () {
       width: '100%',
       overflow: 'hidden'
     })
-    $('#local-search').css('display', 'block')
+    $('#local-search .search-dialog').css('display', 'block')
     $('#local-search-input input').focus()
     $('#search-mask').fadeIn()
     if (!loadFlag) {
@@ -27,12 +27,12 @@ $(function () {
       width: '',
       overflow: ''
     })
-    $('#local-search').css({
+    $('#local-search .search-dialog').css({
       animation: 'search_close .5s'
     })
 
     setTimeout(function () {
-      $('#local-search').css({
+      $('#local-search .search-dialog').css({
         animation: '',
         display: 'none'
       })
@@ -49,7 +49,7 @@ $(function () {
   searchClickFn()
 
   window.addEventListener('pjax:complete', function () {
-    $('#local-search').is(':visible') && closeSearch()
+    $('#local-search .search-dialog').is(':visible') && closeSearch()
     searchClickFn()
   })