feat: aside 可配置隐藏/增加按钮可展开或收缩aside

_config.yml

@@ -600,6 +600,8 @@ preloader: false
 
 aside:
   enable: true
+  hide: false
+  button: true
   mobile: true # display on mobile
   position: right # left or right
   card_author:

layout/includes/layout.pug

@@ -1,7 +1,8 @@
+- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
 
 doctype html
-html(lang=config.language data-theme=theme.display_mode)
+html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
   head
     include ./head.pug
   body

layout/includes/rightside.pug

@@ -23,6 +23,10 @@
       button#rightside_config(type="button" title=_p("rightside.setting"))
         i.fas.fa-cog
 
+    if theme.aside.enable && theme.aside.button
+      button#hide-aside-btn(type="button")
+        i.fas.fa-arrows-alt-h
+
     if theme.chat_btn
       button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms

package.json

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

source/css/_layout/aside.styl

@@ -327,3 +327,14 @@
 
   100%
     transform: scale(.7)
+
++minWidth900()
+  html.hide-aside
+    .layout
+      justify-content: center
+
+      > div:last-child
+        display: none
+
+      > div:first-child
+        width: 80%

source/css/_layout/rightside.styl

@@ -38,3 +38,7 @@
 
     +maxWidth900()
       display: block
+
+  +maxWidth900()
+    #hide-aside-btn
+      display: none

source/css/_page/common.styl

@@ -19,7 +19,6 @@
     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)
@@ -29,6 +28,7 @@
 
   & > div:first-child
     width: 75%
+    transition: all .3s
 
     +maxWidth900()
       width: 100% !important

source/js/main.js

@@ -483,6 +483,11 @@ $(function () {
   // Back to top
   $rightsideEle.on('click', '#go-up', () => btf.scrollToDest('body'))
 
+  $rightsideEle.on('click', '#hide-aside-btn', () => {
+    const $htmlDom = $(document.documentElement)
+    $htmlDom.hasClass('hide-aside') ? $htmlDom.removeClass('hide-aside') : $htmlDom.addClass('hide-aside')
+  })
+
   /**
  * menu
  * 側邊欄sub-menu 展開/收縮