feat: aside ‘查看更多’按鈕 改為 圖標顯示在右上角

improvement: pangu 改為全站渲染

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

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

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

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": {

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

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

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)