feat: 只支持 hexo 5.0.0 及以上版本

feat: toc改為aside顯示,去掉sidebar
feat: 手機toc ui 修改
feat: 去掉 toc auto_open 配置
feat: 文章標題改為居中
improvement: 完善note標籤在readmode上的顯示
improvement: 精簡css 和 js
improvement： pjax 優化
fix: 修復當文章頁top_img設為false時，閲讀模式下文章內容不顯示的bugs

_config.yml

@@ -188,7 +188,6 @@ index_post_content:
 toc:
   enable: true
   number: true
-  auto_open: true # auto open the sidebar
 
 post_copyright:
   enable: true

languages/default.yml

@@ -1,7 +1,3 @@
-sidebar:
-  catalog: Catalog
-  have_read: You've read
-
 footer:
   framework: Framework
   theme: Theme
@@ -78,6 +74,7 @@ aside:
     heading: Newest Comments
     loading_text: loading...
     error: Unable to get the data, please make sure the settings are correct.
+  card_toc: Catalog
 
 date_suffix:
   just: Just

languages/en.yml

@@ -1,7 +1,3 @@
-sidebar:
-  catalog: Catalog
-  have_read: You've read
-
 footer:
   framework: Framework
   theme: Theme
@@ -78,6 +74,7 @@ aside:
     heading: Newest Comments
     loading_text: loading...
     error: Unable to get the data, please make sure the settings are correct.
+  card_toc: Catalog
 
 date_suffix:
   just: Just

languages/zh-CN.yml

@@ -1,7 +1,3 @@
-sidebar:
-  catalog: 目录
-  have_read: 你已经读了
-
 footer:
   framework: 框架
   theme: 主题
@@ -80,6 +76,7 @@ aside:
     heading: 最新评论
     loading_text: 正在加载中...
     error: 无法获取资料，请确认相关配置是否正确
+  card_toc: 目录
 
 date_suffix:
   just: 刚刚

languages/zh-TW.yml

@@ -1,7 +1,3 @@
-sidebar:
-  catalog: 目錄
-  have_read: 你已經讀了
-
 footer:
   framework: 框架
   theme: 主題
@@ -80,6 +76,7 @@ aside:
     heading: 最新評論
     loading_text: 正在加載中...
     error: 無法獲取資料，請確認相關配置是否正確
+  card_toc: 目錄
 
 date_suffix:
   just: 剛剛

layout/includes/head/config.pug

@@ -93,7 +93,6 @@
 script.
   var GLOBAL_CONFIG = { 
     root: '!{config.root}',
-    hexoversion: '!{get_hexo_version()}',
     algolia: !{algolia},
     localSearch: !{localSearch},
     translate: !{translate},

layout/includes/head/config_site.pug

@@ -5,7 +5,7 @@
   else isHighlightShrink = theme.highlight_shrink
 
   const pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
-  const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true )
+  const showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 
 script#config_change
@@ -14,6 +14,6 @@ script#config_change
       isPost: !{is_post()},
       isHome: !{is_home()},
       isHighlightShrink: !{isHighlightShrink},
-      isSidebar: !{showToc},
+      isToc: !{showToc},
       postUpdate: '!{full_date(page.updated)}'
     }

layout/includes/layout.pug

@@ -8,30 +8,22 @@ html(lang=config.language data-theme=theme.display_mode)
     if theme.preloader
       !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
 
+    if theme.background
+      #web_bg
+      
     !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
 
     #body-wrap
-      if theme.background
-        #web_bg
-
-      include ./sidebar.pug
       include ./header/index.pug
 
-      if (!is_post())
+      main#content-inner.layout(class=hideAside)
-        main#content-inner.layout_page(class=hideAside)
+        if body
-          if body
+          div!= body
-            div!= body
+        else
-          else
+          block content
-            block content
+          if theme.aside.enable && page.aside !== false
-            if theme.aside.enable && page.aside !== false
+            include widget/index.pug
-              !=partial('includes/widget/index', {}, {cache:theme.fragment_cache})
+
-      else
-        main#content-inner.layout_post
-          if body
-            div!= body
-          else
-            block content
-      
       - var footerBg = theme.footer_bg
       if (footerBg)
         if (footerBg === true)

layout/includes/rightside.pug

@@ -16,7 +16,7 @@ section#rightside
       if commentsJsLoad
         a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
           i.fas.fa-comments
-      if showToc
+      if showToc && theme.aside.mobile
         button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
           i.fas.fa-list-ul
     else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)

layout/includes/sidebar.pug

@@ -1,21 +0,0 @@
--
-  let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
-  let autoOpenPostSet = page.auto_open == undefined ? theme.toc.auto_open : page.auto_open
-  let autoOpenSidebar = autoOpenPostSet ? 'on' : ''
--
-
-if(showToc)
-  #sidebar
-    i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar)
-    .sidebar-toc
-      div.sidebar-toc__title= _p('sidebar.catalog')
-      div.sidebar-toc__progress
-        span.progress-notice= _p('sidebar.have_read')
-        span.progress-num 0
-        span.progress-percentage %
-        div.sidebar-toc__progress-bar      
-      if (page.encrypt == true)
-        div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
-      else 
-        div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})
-        

layout/includes/widget/card_post_toc.pug

@@ -0,0 +1,13 @@
+- let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
+
+#card-toc.card-widget
+  .card-content
+    .item-headline
+      i.fas.fa-stream
+      span= _p('aside.card_toc')
+
+    if (page.encrypt == true)
+      .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
+    else 
+      .toc-content!=toc(page.content, {list_number: tocNumber})
+      

layout/includes/widget/index.pug

@@ -1,20 +1,28 @@
 #aside_content.aside_content
   if theme.aside.card_author.enable
-    include ./card_author.pug
+    !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
+  if theme.aside.card_announcement.enable
+    !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
   .sticky_layout
-    if theme.aside.card_announcement.enable
+    if is_post()
-      include ./card_announcement.pug
+      if showToc
-    if theme.aside.card_recent_post.enable
+        include ./card_post_toc.pug
-      include ./card_recent_post.pug
+      if theme.aside.card_recent_post.enable
-    if theme.newest_comments.enable
+        !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
-      include ./card_newest_comment.pug
+      if theme.ad && theme.ad.aside
-    if theme.ad && theme.ad.aside
+        !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
-      include ./card_ad.pug
+    else
-    if theme.aside.card_categories.enable
+      if theme.aside.card_recent_post.enable
-      include ./card_categories.pug
+        !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
-    if theme.aside.card_tags.enable
+      if theme.ad && theme.ad.aside
-      include ./card_tags.pug
+        !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
-    if theme.aside.card_archives.enable
+      if theme.newest_comments.enable
-      include ./card_archives.pug
+        !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
-    if theme.aside.card_webinfo.enable
+      if theme.aside.card_categories.enable
-      include ./card_webinfo.pug
+        !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_tags.enable
+        !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_archives.enable
+        !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
+      if theme.aside.card_webinfo.enable
+        !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})

layout/post.pug

@@ -1,11 +1,11 @@
 extends includes/layout.pug
 
 block content
-  article#post(class="")
+  #post
     if top_img === false
       include includes/header/post-info.pug
 
-    #article-container.post-content!=page.content
+    article#article-container.post-content!=page.content
     include includes/post/post-copyright.pug
     .tag_share
       if (theme.post_meta.post.tags)

package.json

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

scripts/events/check_hexo.js

@@ -4,9 +4,9 @@ hexo.extend.filter.register('before_generate', () => {
   // Get first two digits of the Hexo version number
   var hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1')
 
-  if (hexoVer < 4.2) {
+  if (hexoVer < 5) {
-    logger.error('Please update Hexo to V4.2.0 or higher!')
+    logger.error('Please update Hexo to V5.0.0 or higher!')
-    logger.error('請把 Hexo 升級到 V4.2.0 或更高的版本！')
+    logger.error('請把 Hexo 升級到 V5.0.0 或更高的版本！')
     process.exit(-1)
   }
 })

scripts/helpers/page.js

@@ -76,7 +76,3 @@ hexo.extend.helper.register('urlNoIndex', function () {
 hexo.extend.helper.register('md5', function (path) {
   return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
 })
-
-hexo.extend.helper.register('get_hexo_version', function () {
-  return hexo.version
-})

source/css/_global/function.styl

@@ -68,26 +68,6 @@ if hexo-config('enter_transitions')
   #ribbon-canvas
     animation: ribbon_to_show 4s
 
-  .tocOpenPc
-    .sidebar-toc__title
-      animation: tocsidebarLtoR .5s
-
-    .sidebar-toc__progress
-      animation: tocsidebarLtoR .7s
-
-    .sidebar-toc__content
-      animation: tocsidebarLtoR .9s
-
-  .tocOpenMobile
-    .sidebar-toc__title
-      animation: tocsidebarRtoL .4s
-
-    .sidebar-toc__progress
-      animation: tocsidebarRtoL .6s
-
-    .sidebar-toc__content
-      animation: tocsidebarRtoL .7s
-
   #mobile-sidebar-menus
     &.open
       for i in 1 2 3 4
@@ -215,19 +195,5 @@ if hexo-config('avatar.effect') == true
   0%
     transform: translateX(200px)
 
-  100%
-    transform: translateX(0)
-
-@keyframes tocsidebarRtoL
-  0%
-    transform: translateX(200px)
-
-  100%
-    transform: translateX(0)
-
-@keyframes tocsidebarLtoR
-  0%
-    transform: translateX(-200px)
-
   100%
     transform: translateX(0)

source/css/_global/index.styl

@@ -26,6 +26,7 @@
   --blockquote-bg: $blockquote-background-color
   --reward-pop: $reward-pop-up-bg
   --sidebar-icon-color: $sidebar-icon-color
+  --toc-link-color: $toc-link-color
 
 html
   height: 100%
@@ -140,6 +141,16 @@ button
   background: none
   cursor: pointer
 
+a
+  color: $a-link-color
+  text-decoration: none
+  word-wrap: break-word
+  transition: all .2s
+  overflow-wrap: break-word
+
+  &:hover
+    color: $light-blue
+
 // font
 #site-title,
 #site-subtitle,
@@ -183,6 +194,10 @@ button
       transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
       transform: scaleX(1)
 
+img
+  max-width: 100%
+  transition: all .2s
+
 img[src=''],
 img:not([src])
   opacity: 0

source/css/_layout/aside.styl

@@ -1,10 +1,27 @@
 #aside_content
   width: 25%
 
+  +minWidth900()
+    if hexo-config('aside.position') == 'right'
+      padding-left: 15px
+    else
+      padding-right: 15px
+
+  +maxWidth900()
+    width: 100%
+
+  if hexo-config('aside.mobile') == false
+    +maxWidth768()
+      display: none
+
   > .card-widget:first-child
     margin-top: 0
 
+    +maxWidth900()
+      margin-top: 1rem
+
   .card-widget
+    position: relative
     overflow: hidden
     margin-top: 1rem
     border-radius: 8px
@@ -82,15 +99,12 @@
     padding: 1rem 1.2rem
 
   .item-headline
+    padding-bottom: .3rem
     font-size: 1.2em
 
     span
       margin-left: .5rem
 
-    & + div,
-    & + ul
-      padding: .3rem 0 0
-
   .sticky_layout
     +minWidth900()
       position: sticky
@@ -171,6 +185,7 @@
   .card-archives ul.card-archive-list,
   .card-categories ul.card-category-list
     margin: 0
+    padding: 0
     list-style: none
 
   .card-archives ul.card-archive-list > .card-archive-list-item,
@@ -248,23 +263,71 @@
             flex: 1
             padding-right: 1rem
 
-+maxWidth900()
+  // toc
-  #aside_content
+  #card-toc
-    width: 100% !important
+    +maxWidth900()
+      position: fixed
+      right: 45px
+      bottom: 30px
+      z-index: 9999
+      display: none
+      width: 300px
+      transform-origin: right bottom
+      animation: toc-close .3s
 
-  #aside_content
+      &.open
-    .card-widget:first-child
+        display: block
-      margin-top: 1rem
+        animation: toc-open .3s
 
-+minWidth900()
+      .toc-child
-  #aside_content
+        display: block !important
-    .card-widget
-      if hexo-config('aside.position') == 'right'
-        margin-left: 15px
-      else
-        margin-right: 15px
 
-if hexo-config('aside.mobile') == false
+    .toc-content
-  +maxWidth768()
+      overflow-y: auto
-    #aside_content
+      max-height: calc(100vh - 120px)
-      display: none
+
+      ol,
+      li
+        list-style: none
+
+      > ol
+        padding: 0 !important
+
+      ol
+        margin: 0
+        padding-left: .4rem
+
+      .toc-link
+        display: block
+        padding-left: .3rem
+        border-left: 3px solid transparent
+        color: var(--toc-link-color)
+        transition: all .2s ease-in-out
+
+        &.active
+          border-left-color: darken($theme-toc-color, 20%)
+          background: $theme-toc-color
+          color: $sidebar-active-color
+
+      &:before
+        position: absolute
+        top: .6rem
+        right: 1.2rem
+        color: #a9a9a9
+        content: attr(progress-percentage)
+        font-style: italic
+        font-size: 1.2rem
+
+@keyframes toc-open
+  0%
+    transform: scale(.7)
+
+  100%
+    transform: scale(1)
+
+@keyframes toc-close
+  0%
+    transform: scale(.7)
+
+  100%
+    transform: scale(1)

source/css/_layout/head.styl

@@ -116,10 +116,14 @@
 
   #post-info
     position: absolute
-    bottom: 1.5rem
+    bottom: 5rem
     padding: 0 8%
     width: 100%
-    text-align: left
+    text-align: center
+
+    +maxWidth900()
+      bottom: 1.5rem
+      text-align: left
 
     +maxWidth768()
       bottom: 1.1rem
@@ -128,7 +132,7 @@
 #post-info
   #post-title
     margin-bottom: .4rem
-    font-size: 2.15em
+    font-size: 2.5em
 
     +maxWidth768()
       font-size: 1.72em

source/css/_layout/pagination.styl

@@ -59,6 +59,9 @@
   .next-post
     width: 50%
 
+    +maxWidth768()
+      width: 100%
+
     a
       position: relative
       display: block
@@ -73,9 +76,4 @@
 
   &.pagination-post
     margin: 2rem 0 !important
-    background: $dark-black
+    background: $dark-black
-
-+maxWidth768()
-  .prev-post,
-  .next-post
-    width: 100% !important

source/css/_layout/post.styl

@@ -142,6 +142,24 @@ no-beautify()
       padding-left: .3rem
 
 #article-container
+  word-wrap: break-word
+  overflow-wrap: break-word
+
+  a
+    color: $theme-link-color
+
+    &:hover
+      text-decoration: underline
+
+  img
+    margin: 0 auto .8rem
+
+  p
+    margin: 0 0 .8rem
+
+  iframe
+    margin: 0 0 1rem
+
   if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
     beautify()
   else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
@@ -152,42 +170,7 @@ no-beautify()
   else
     no-beautify()
 
-a
+#post
-  color: $a-link-color
-  text-decoration: none
-  word-wrap: break-word
-  transition: all .2s
-  overflow-wrap: break-word
-
-  &:hover
-    color: $light-blue
-
-a.fancybox
-  outline: none
-
-  &:focus
-    outline: none
-
-  display: inline-block
-  width: 100%
-  text-align: center
-
-img
-  max-width: 100%
-  transition: all .2s
-
-.katex-wrap
-  overflow: auto
-
-  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
-    &::-webkit-scrollbar
-      display: none
-
-.layout_post
-  margin: 0 auto
-  padding: 2rem 15px
-  max-width: 1000px
-
   img
     display: block
 
@@ -272,25 +255,6 @@ img
           &:hover
             text-decoration: none
 
-#article-container
-  word-wrap: break-word
-  overflow-wrap: break-word
-
-  a
-    color: $theme-link-color
-
-    &:hover
-      text-decoration: underline
-
-  img
-    margin: 0 auto .8rem
-
-  p
-    margin: 0 0 .8rem
-
-  iframe
-    margin: 0 0 1rem
-
   .post-outdate-notice
     position: relative
     margin: 0 0 1rem
@@ -311,25 +275,3 @@ img
         color: $noticeOutdate-border
         content: '\f071'
         transform: translateY(-50%)
-
-+maxWidth1024()
-  .layout_post
-    width: auto
-
-+maxWidth768()
-  .layout_post
-    padding: 1rem 5px
-
-    & > #post
-      padding: 1.8rem .7rem
-
-// adjust the layout width in big screen
-+minWidth2000()
-  .layout_post
-    max-width: 1300px
-
-  .layout_page
-    max-width: 1500px
-
-    &.hide-aside
-      max-width: 1300px

source/css/_layout/sidebar.styl

@@ -1,88 +0,0 @@
-#toggle-sidebar
-  position: fixed
-  bottom: $sidebar-icon-top
-  left: $sidebar-icon-left
-  z-index: 100
-  color: var(--sidebar-icon-color)
-  font-size: $sidebar-icon-size
-  cursor: pointer
-  transition: all .2s
-
-  +maxWidth1024()
-    display: none
-
-#sidebar
-  position: fixed
-  top: 0
-  left: -($sidebar-width)
-  z-index: 10
-  padding: 1rem 0 2rem .5rem
-  width: $sidebar-width
-  height: 100%
-  background: var(--sidebar-bg)
-  opacity: .9
-
-  &.tocOpenPc
-    & > #toggle-sidebar
-      color: #99a9bf
-      transform: rotateZ(180deg)
-
-  +maxWidth1024()
-    right: -($mobile-sidebar-width)
-    left: auto
-    z-index: 103
-    width: $mobile-sidebar-width
-    box-shadow: none
-    opacity: 1
-    transition: all .4s
-
-    .toc-child
-      display: block !important
-
-  .sidebar-toc
-    ol,
-    li
-      list-style: none
-
-    ol
-      margin-top: .2rem
-      padding-left: .4rem
-
-    &__title
-      padding-right: .5rem
-      text-align: center
-      font-size: 1.3em
-
-    &__content
-      overflow-y: scroll
-      padding-bottom: 5rem
-      height: 90vh
-
-    .toc-link
-      display: block
-      padding-left: .2rem
-      border-right: 3px solid transparent
-      transition: all .2s ease-in-out
-
-      &.active
-        border-right-color: darken($theme-toc-color, 20%)
-        background: $theme-toc-color
-        color: $sidebar-active-color
-
-    &__progress
-      position: relative
-      margin-bottom: .3rem
-      padding-left: .6rem
-      color: $theme-toc-color
-
-      .progress-notice
-        margin-right: .4rem
-
-      .progress-num
-        display: inline-block
-        min-width: .9rem
-
-      &-bar
-        width: 0
-        height: 1px
-        background: $theme-toc-color

source/css/_layout/third-party.styl

@@ -61,6 +61,13 @@
     margin: 0 0 .8em
     padding: .3rem 0 .8em
 
+.katex-wrap
+  overflow: auto
+
+  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
+    &::-webkit-scrollbar
+      display: none
+
 // mathjax
 .mathjax-overflow
   overflow-x: auto

source/css/_mode/darkmode.styl

@@ -27,6 +27,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --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,
     #footer:before,

source/css/_mode/readmode.styl

@@ -12,18 +12,21 @@ if hexo-config('readmode')
 
   [data-theme='dark']
     .read-mode
-      --font-color: rgba(255, 255, 255, .6)
+      --font-color: rgba(255, 255, 255, .7)
       --readmode-light-color: #0d0d0d
-      --white: rgba(255, 255, 255, .8)
+      --white: rgba(255, 255, 255, .9)
-      --light-grey: rgba(255, 255, 255, .6)
+      --light-grey: rgba(255, 255, 255, .7)
-      --gray: rgba(255, 255, 255, .6)
+      --gray: rgba(255, 255, 255, .7)
-      --hr-border: rgba(255, 255, 255, .3)
+      --hr-border: rgba(255, 255, 255, .5)
-      --hr-before-color: rgba(255, 255, 255, .6)
+      --hr-before-color: rgba(255, 255, 255, .7)
       -highlight-bg: #171717
 
   .read-mode
     background: var(--readmode-light-color)
 
+    #aside_content
+      display: none
+
     #body-wrap
       padding-left: 0 !important
 
@@ -38,23 +41,21 @@ if hexo-config('readmode')
         padding: 0
         text-align: center
 
-    .layout_post
+    #post
-      > #post
+      margin: 0 auto
-        background: transparent
+      background: transparent
-        box-shadow: none
+      box-shadow: none
 
-        &:hover
+      &:hover
-          box-shadow: none
+        box-shadow: none
 
     & > canvas
       display: none !important
 
     .highlight-tools,
     #footer,
-    #post > *:not(:first-child),
+    #post > *:not(#post-info):not(.post-content),
     #to_comment,
-    #sidebar,
-    #toggle-sidebar,
     #mobile-toc-button,
     #nav,
     .post-outdate-notice,
@@ -179,6 +180,7 @@ if hexo-config('readmode')
 
       .note
         border: 2px solid var(--gray)
+        border-left-color: var(--gray) !important
         filter: none
-        background-color: var(--readmode-light-color)
+        background-color: var(--readmode-light-color) !important
         color: var(--font-color)

source/css/_page/common.styl

@@ -1,4 +1,4 @@
-.layout_page
+.layout
   display: flex
   margin: 0 auto
   padding: 2rem 15px
@@ -10,7 +10,20 @@
   +maxWidth768()
     padding: 1rem 5px !important
 
+  +minWidth2000()
+    max-width: 1500px
+
   & > div:first-child:not(.recent-posts)
+    align-self: flex-start
+    padding: 50px 40px
+    border-radius: 8px
+    background: var(--card-bg)
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+    transition: all .3s
+
+    &:hover
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
     +maxWidth768()
       padding: 1.8rem .7rem !important
 
@@ -20,31 +33,20 @@
     +maxWidth900()
       width: 100% !important
 
+    if hexo-config('aside.position') == 'left'
+      +minWidth900()
+        order: 2
+
   // 隱藏aside
   &.hide-aside
     max-width: 1000px
 
+    +minWidth2000()
+      max-width: 1300px
+
     & > div
       width: 100% !important
 
-.layout_post > #post,
-.layout_page > div:first-child:not(.recent-posts)
-  align-self: flex-start
-  padding: 50px 40px
-  border-radius: 8px
-  background: var(--card-bg)
-  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
-  transition: all .3s
-
-  &:hover
-    box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
-
-if hexo-config('aside.position') == 'left'
-  +minWidth900()
-    .layout_page
-      & > div:first-child
-        order: 2
-
 #page
   h1.page-title
     margin-top: .4rem

source/css/var.styl

@@ -66,6 +66,8 @@ $sidebar-width = 300px
 $sidebar-background = #f6f8fa
 $sidebar-active-color = #fff
 $mobile-sidebar-width = 250px
+// aside
+$toc-link-color = #666261
 // 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

@@ -1,21 +1,11 @@
-
-/**
-  * 當menu過多時，自動適配，避免UI錯亂
-  * @param {*} n
-  * 傳入 1 sidebar打開時
-  * 傳入 2 正常狀態下
-  */
-
 $(function () {
   const blogNameWidth = $('#site-name').width()
   const menusWidth = $('#menus').width()
-  const sidebarWidth = $('#sidebar').width() || 300
 
-  const adjustMenu = function (n) {
+  const adjustMenu = () => {
     const $nav = $('#nav')
     let t
-    if (n === 0) t = true
+    if (window.innerWidth < 768) t = true
-    else if (n === 1) t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 30
     else t = blogNameWidth + menusWidth > $nav.width() - 30
 
     if (t) {
@@ -27,157 +17,45 @@ $(function () {
 
   // 初始化header
   const initAdjust = () => {
-    if (window.innerWidth < 768) adjustMenu(0)
+    adjustMenu()
-    else adjustMenu(2)
     $('#nav').addClass('show')
   }
 
-  /**
+  // sidebar menus
- * 進入post頁sidebar處理
- */
-  const OpenSidebarAuto = () => {
-    if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) {
-      setTimeout(function () {
-        openSidebar()
-      }, 400)
-    }
-  }
-
-  /**
- * 點擊左下角箭頭,顯示sidebar
- */
-
-  const closeSidebar = () => {
-    $('#sidebar').removeClass('tocOpenPc').animate({
-      left: '-300px'
-    }, 400)
-    $('#menus').animate({
-      paddingRight: 0
-    }, 400)
-    $('#body-wrap').animate({
-      paddingLeft: 0
-    }, 400)
-    if ($('#nav').hasClass('hide-menu')) {
-      setTimeout(function () {
-        adjustMenu(2)
-      }, 400)
-    }
-  }
-
-  const openSidebar = () => {
-    if (!$('#nav').hasClass('hide-menu')) {
-      adjustMenu(1)
-    }
-    $('#sidebar').addClass('tocOpenPc').animate({
-      left: 0
-    }, 400)
-    $('#menus').animate({
-      paddingRight: 300
-    }, 400)
-    $('#body-wrap').animate({
-      paddingLeft: 300
-    }, 400)
-  }
-
-  const toggleSidebar = function () {
-    $('#toggle-sidebar').on('click', function () {
-      const isOpen = $(this).hasClass('on')
-      isOpen ? $(this).removeClass('on') : $(this).addClass('on')
-      if (isOpen) {
-        closeSidebar()
-      } else {
-        openSidebar()
-      }
-    })
-  }
-
-  /**
- * 手機menu和toc按鈕點擊
- * 顯示menu和toc的sidebar
- */
-
   const sidebarFn = () => {
     const $toggleMenu = $('#toggle-menu')
     const $mobileSidebarMenus = $('#mobile-sidebar-menus')
-    const $mobileTocButton = $('#mobile-toc-button')
     const $menuMask = $('#menu_mask')
     const $body = $('body')
-    const $sidebar = $('#sidebar')
 
-    function openMobileSidebar (name) {
+    function openMobileSidebar () {
       btf.sidebarPaddingR()
       $body.css('overflow', 'hidden')
       $menuMask.fadeIn()
-
+      $toggleMenu.removeClass('close').addClass('open')
-      if (name === 'menu') {
+      $mobileSidebarMenus.addClass('open')
-        $toggleMenu.removeClass('close').addClass('open')
-        $mobileSidebarMenus.addClass('open')
-      }
-
-      if (name === 'toc') {
-        $mobileTocButton.removeClass('close').addClass('open')
-        $sidebar.addClass('tocOpenMobile').css({ transform: 'translate3d(-100%,0,0)', left: '' })
-      }
     }
 
-    function closeMobileSidebar (name) {
+    function closeMobileSidebar () {
       $body.css({ overflow: '', 'padding-right': '' })
       $menuMask.fadeOut()
-
+      $toggleMenu.removeClass('open').addClass('close')
-      if (name === 'menu') {
+      $mobileSidebarMenus.removeClass('open')
-        $toggleMenu.removeClass('open').addClass('close')
-        $mobileSidebarMenus.removeClass('open')
-      }
-
-      if (name === 'toc') {
-        $mobileTocButton.removeClass('open').addClass('close')
-        $sidebar.removeClass('tocOpenMobile').css({ transform: '' })
-      }
     }
 
     $toggleMenu.on('click', function () {
-      openMobileSidebar('menu')
+      openMobileSidebar()
-    })
-
-    $mobileTocButton.on('click', function () {
-      openMobileSidebar('toc')
     })
 
     $menuMask.on('click touchstart', function (e) {
       if ($toggleMenu.hasClass('open')) {
-        closeMobileSidebar('menu')
+        closeMobileSidebar()
-      }
-      if ($mobileTocButton.hasClass('open')) {
-        closeMobileSidebar('toc')
       }
     })
 
     $(window).on('resize', function (e) {
       if (!$toggleMenu.is(':visible')) {
-        if ($toggleMenu.hasClass('open')) closeMobileSidebar('menu')
+        if ($toggleMenu.hasClass('open')) closeMobileSidebar()
-      }
-    })
-
-    const mql = window.matchMedia('(max-width: 1024px)')
-    const $toggleSidebar = $('#toggle-sidebar')
-    const matchFn = (ev) => {
-      if (ev.matches) {
-        if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
-      } else {
-        if ($toggleSidebar.hasClass('on')) openSidebar()
-        if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
-      }
-    }
-
-    mql.addListener(matchFn)
-    document.addEventListener('pjax:send', () => { mql.removeListener(matchFn) })
-
-    // toc元素點擊
-    $sidebar.find('.toc-link').on('click', function (e) {
-      e.preventDefault()
-      btf.scrollToDest(decodeURI($(this).attr('href')))
-      if (window.innerWidth < 1024) {
-        closeMobileSidebar('toc')
       }
     })
   }
@@ -427,9 +305,10 @@ $(function () {
  *  toc
  */
   const tocFn = function () {
-    const $sidebar = $('#sidebar')
+    const $cardTocLayout = $('#card-toc')
-    const $tocChild = $sidebar.find('.toc-child')
+    const $cardToc = $cardTocLayout.find('.toc-content')
-    const $tocLink = $sidebar.find('.toc-link')
+    const $tocChild = $cardToc.find('.toc-child')
+    const $tocLink = $cardToc.find('.toc-link')
     const $article = $('#article-container')
 
     $tocChild.hide()
@@ -459,10 +338,7 @@ $(function () {
       const percentage = (scrollPercentRounded > 100) ? 100
         : (scrollPercentRounded <= 0) ? 0
           : scrollPercentRounded
-      $sidebar.find('.progress-num').text(percentage)
+      $cardToc.attr('progress-percentage', percentage)
-      $sidebar.find('.sidebar-toc__progress-bar').animate({
-        width: percentage + '%'
-      }, 100)
     }
 
     // anchor
@@ -473,9 +349,36 @@ $(function () {
       }
     }
 
+    const mobileToc = {
+      open: () => {
+        $cardTocLayout.addClass('open')
+      },
+
+      close: () => {
+        $cardTocLayout.removeClass('open')
+      }
+    }
+
+    $('#mobile-toc-button').on('click', () => {
+      if ($cardTocLayout.is(':visible')) {
+        mobileToc.close()
+      } else {
+        mobileToc.open()
+      }
+    })
+
+    // toc元素點擊
+    $tocLink.on('click', function (e) {
+      e.preventDefault()
+      btf.scrollToDest(decodeURI($(this).attr('href')))
+      if (window.innerWidth < 900) {
+        mobileToc.close()
+      }
+    })
+
     const autoScrollToc = function (currentTop, item) {
       const activePosition = item.offset().top
-      const $tocContent = $sidebar.find('.sidebar-toc__content')
+      const $tocContent = $cardToc
       const sidebarScrollTop = $tocContent.scrollTop()
       if (activePosition > (currentTop + $(window).height() - 100)) {
         $tocContent.scrollTop(sidebarScrollTop + 100)
@@ -489,7 +392,6 @@ $(function () {
     // DOM Hierarchy:
     // ol.toc > (li.toc-item, ...)
     // li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...))
-    const versionBiggerFive = GLOBAL_CONFIG.hexoversion.split('.')[0] >= 5
     const list = $article.find('h1,h2,h3,h4,h5,h6')
 
     const findHeadPosition = function (top) {
@@ -503,8 +405,7 @@ $(function () {
       list.each(function () {
         const head = $(this)
         if (top > head.offset().top - 70) {
-          if (versionBiggerFive) currentId = '#' + encodeURI($(this).attr('id'))
+          currentId = '#' + encodeURI($(this).attr('id'))
-          else currentId = '#' + $(this).attr('id')
         }
       })
 
@@ -765,9 +666,7 @@ $(function () {
 
   const unRefreshFn = function () {
     $(window).on('resize', function () {
-      if (window.innerWidth < 768) adjustMenu(0)
+      adjustMenu()
-      else if ($('#sidebar').hasClass('tocOpenPc') && $('#nav').hasClass('fixed')) adjustMenu(1)
-      else adjustMenu(2)
     })
 
     clickFnOfSubMenu()
@@ -779,9 +678,7 @@ $(function () {
     initAdjust()
 
     if (GLOBAL_CONFIG_SITE.isPost) {
-      OpenSidebarAuto()
+      GLOBAL_CONFIG_SITE.isToc && tocFn()
-      toggleSidebar()
-      GLOBAL_CONFIG_SITE.isSidebar && tocFn()
       GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
       GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time'))
     } else {

source/js/search/algolia.js

@@ -36,7 +36,7 @@ $(function () {
 
   searchClickFn()
 
-  window.addEventListener('pjax:success', function () {
+  window.addEventListener('pjax:send', function () {
     closeSearch()
     searchClickFn()
   })

source/js/search/local-search.js

@@ -47,7 +47,7 @@ $(function () {
   }
 
   searchClickFn()
-  window.addEventListener('pjax:success', function () {
+  window.addEventListener('pjax:send', function () {
     $('#local-search').is(':visible') && closeSearch()
     searchClickFn()
   })