From a1f86a15733227c47459687499e9f7c84e889549 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Sun, 10 Jan 2021 22:26:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20aside=20=E2=80=98=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E2=80=99=E6=8C=89=E9=88=95=20=E6=94=B9?=
 =?UTF-8?q?=E7=82=BA=20=E5=9C=96=E6=A8=99=E9=A1=AF=E7=A4=BA=E5=9C=A8?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8A=E8=A7=92=20improvement:=20pangu=20=E6=94=B9?=
 =?UTF-8?q?=E7=82=BA=E5=85=A8=E7=AB=99=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/includes/third-party/pangu.pug      |  4 ++--
 layout/includes/widget/card_archives.pug   |  4 ----
 layout/includes/widget/card_categories.pug |  3 ---
 package.json                               |  2 +-
 scripts/helpers/aside_archives.js          | 17 ++++++++-------
 scripts/helpers/aside_categories.js        | 15 +++++++------
 source/css/_layout/aside.styl              | 25 +++++++++++++---------
 7 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/layout/includes/third-party/pangu.pug b/layout/includes/third-party/pangu.pug
index b5c82c9..7ac1395 100644
--- a/layout/includes/third-party/pangu.pug
+++ b/layout/includes/third-party/pangu.pug
@@ -1,10 +1,10 @@
 script.
   function panguFn () {
-    if (typeof pangu === 'object') pangu.spacingElementById('body-wrap')
+    if (typeof pangu === 'object') pangu.autoSpacingPage()
     else {
       getScript('!{url_for(theme.CDN.pangu)}')
         .then(() => {
-          pangu.spacingElementById('body-wrap')
+          pangu.autoSpacingPage()
         })
     }
   }
diff --git a/layout/includes/widget/card_archives.pug b/layout/includes/widget/card_archives.pug
index 1080e28..bb0e78e 100644
--- a/layout/includes/widget/card_archives.pug
+++ b/layout/includes/widget/card_archives.pug
@@ -1,9 +1,5 @@
 if theme.aside.card_archives.enable
   .card-widget.card-archives
-    .item-headline
-      i.fas.fa-archive
-      span= _p('aside.card_archives')
-    
     - let type = theme.aside.card_archives.type || 'monthly'
     - let format = theme.aside.card_archives.format || 'MMMM YYYY'
     - let order = theme.aside.card_archives.order || -1
diff --git a/layout/includes/widget/card_categories.pug b/layout/includes/widget/card_categories.pug
index 4f69e2f..529ea55 100644
--- a/layout/includes/widget/card_categories.pug
+++ b/layout/includes/widget/card_categories.pug
@@ -1,7 +1,4 @@
 if theme.aside.card_categories.enable
   if site.categories.length
     .card-widget.card-categories
-      .item-headline
-        i.fas.fa-folder-open
-        span= _p('aside.card_categories')
       !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand })
diff --git a/package.json b/package.json
index 1551571..b53bdf7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.6.0-b2",
+  "version": "3.6.0-b3",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/scripts/helpers/aside_archives.js b/scripts/helpers/aside_archives.js
index 9112306..779c1d4 100644
--- a/scripts/helpers/aside_archives.js
+++ b/scripts/helpers/aside_archives.js
@@ -19,7 +19,6 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
     ? (yearA, monthA, yearB, monthB) => yearA === yearB && monthA === monthB
     : (yearA, monthA, yearB, monthB) => yearA === yearB
   const limit = options.limit
-  const moreButton = this._p('aside.more_button')
   let result = ''
 
   if (!format) {
@@ -67,11 +66,18 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
     return this.url_for(url)
   }
 
-  result += '<ul class="card-archive-list">'
-
   const len = data.length
   const Judge = limit === 0 ? len : Math.min(len, limit)
 
+  result += `<div class="item-headline"><i class="fas fa-archive"></i><span>${this._p('aside.card_archives')}</span>`
+
+  if (len > Judge) {
+    result += `<a class="card-more-btn" href="${this.url_for(archiveDir)}/" title="${this._p('aside.more_button')}">
+    <i class="fas fa-angle-right"></i></a>`
+  }
+
+  result += '</div><ul class="card-archive-list">'
+
   for (let i = 0; i < Judge; i++) {
     const item = data[i]
 
@@ -89,11 +95,6 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
     result += '</li>'
   }
 
-  if (len > Judge) {
-    result += '<li class="card-archive-list-item more is-center">'
-    result += `<a class="card-archive-list-link-more" href="${this.url_for(archiveDir)}/">
-              <span>${moreButton}</span><i class="fas fa-angle-right"  ></i></a></li>`
-  }
   result += '</ul>'
   return result
 })
diff --git a/scripts/helpers/aside_categories.js b/scripts/helpers/aside_categories.js
index bb83de5..0e60b8e 100644
--- a/scripts/helpers/aside_categories.js
+++ b/scripts/helpers/aside_categories.js
@@ -25,7 +25,6 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
   const limit = options.limit === 0 ? categories.length : options.limit
   const isExpand = options.expand !== 'none'
   const expandClass = isExpand && options.expand === true ? 'expand' : ''
-
   const buttonLabel = this._p('aside.more_button')
   const prepareQuery = (parent) => {
     const query = {}
@@ -80,17 +79,19 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
   const list = hierarchicalList(limit, 0)
 
   const moreButton = function () {
-    let moreHtml = ''
     if (categories.length <= limit) return ''
-    moreHtml += '<li class="card-category-list-item more is-center">'
-    moreHtml += `<a class="card-category-list-link-more" href="${categoryDir}/">
-                <span>${buttonLabel}</span><i class="fas fa-angle-right"></i></a></li>`
+    const moreHtml = `<a class="card-more-btn" href="${categoryDir}/" title="${buttonLabel}">
+    <i class="fas fa-angle-right"></i></a>`
 
     return moreHtml
   }
 
-  return `<ul class="card-category-list" id="aside-cat-list">
-            ${list[0]}
+  return `<div class="item-headline">
+            <i class="fas fa-folder-open"></i>
+            <span>${this._p('aside.card_categories')}</span>
             ${moreButton()}
+            </div>
+            <ul class="card-category-list" id="aside-cat-list">
+            ${list[0]}
             </ul>`
 })
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index a55880c..db82c1a 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -213,16 +213,6 @@
           width: 20%
           text-align: right
 
-    &.more
-      span
-        padding-right: .3rem
-        width: auto !important
-        transition: .5s
-
-      &:hover
-        span
-          padding-right: .6rem
-
   .card-categories
     .card-category-list
       &.child
@@ -333,6 +323,21 @@
     > .card-widget
       margin-top: 0
 
+  .card-more-btn
+    float: right
+    color: inherit
+
+    &:hover
+      animation: more-btn-move 1s infinite
+
+@keyframes more-btn-move
+  0%,
+  100%
+    transform: translateX(0)
+
+  50%
+    transform: translateX(3px)
+
 @keyframes toc-open
   0%
     transform: scale(.7)