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,4 +1,5 @@
-#algolia-search.search-dialog
+#algolia-search
+  .search-dialog
     #algolia-search-title.search-dialog__title Algolia
     #algolia-input-panel
       #algolia-search-input
@@ -9,4 +10,4 @@
       #algolia-stats
     span.search-close-button
       i.fas.fa-times
-#search-mask
+  #search-mask

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

@@ -1,4 +1,5 @@
-#local-search.search-dialog
+#local-search
+  .search-dialog
     #local-search-title.search-dialog__title=_p("local_search.label")
     #local-input-panel
       #local-search-input
@@ -20,4 +21,4 @@
               |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
     span.search-close-button
       i.fas.fa-times
-#search-mask
+  #search-mask

layout/includes/third-party/subtitle.pug

@@ -1,5 +1,6 @@
 - var source = theme.subtitle.source
-if source == '1'
+case source
+  when 1
     script.
       function subtitleType () {
         $.getJSON('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',function (data) {
@@ -26,7 +27,7 @@ if source == '1'
         subtitleType()
       }
 
-else if source == '2'
+  when 2
     script.
       function subtitleType () {
         $.getJSON('https://v1.hitokoto.cn', function (data) {
@@ -54,7 +55,7 @@ else if source == '2'
         subtitleType()
       }
 
-else if source == '3'
+  when 3
     script.
       function subtitleType () {
         $.getScript('http://yijuzhan.com/api/word.php?m=js', function () {
@@ -83,7 +84,7 @@ else if source == '3'
         subtitleType()
       }
 
-else if source == '4'
+  when 4
     script.
       function subtitleType () {
         $.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
@@ -113,7 +114,7 @@ else if source == '4'
         subtitleType()
       }
 
-else
+  default
     script.
       function subtitleType () {
         if (!{theme.subtitle.effect}) { 

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/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,4 +1,5 @@
 #algolia-search
+  .search-dialog
     animation: titlescale .5s
 
     .ais-search-box

source/css/_search/local-search.styl

@@ -1,4 +1,5 @@
 #local-search
+  .search-dialog
     animation: titlescale .5s
 
     .local-search-box

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()
   })