label: 3.2.0

fix: 修復當hexo的_config沒有設置description時，會導致pjax在頁面與文章間切換會無效 close #381
improvement: 當隱藏部分沒配置時，左下角設置按鈕會消失 #353
improvement: 網站背景可配置 （顏色（HEX值/RGB值/顔色單詞/漸變色)/漸變色/圖片鏈接）
improvement: 夜間模式下，背景顔色/top-img/footer-bg 設置為顔色時，不再強制顯示黑色，而是改為遮罩降低亮度

_config.yml

@@ -486,12 +486,10 @@ tag_ui: # 留空或 index
 
 # Website Background (設置網站背景)
 # can set it to color or image (可設置圖片 或者 顔色)
-# The formal of color: '#49B202'
 # The formal of image: url(http://xxxxxx.com/xxx.jpg)
-# White color will be shown as default
 background:
 
-# Show the footer background image (same as top_img)
+# Footer Background
 footer_bg: false
 
 # the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)

layout/404.pug

@@ -13,8 +13,7 @@ html(lang=config.language data-theme=theme.display_mode)
       canvas.fireworks
     
     if theme.background
-      - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
+      #web_bg
-      #web_bg(data-type=is_photo)
 
     #error-wrap
       .error-content

layout/includes/head/darkmode.pug

@@ -1,50 +1,53 @@
 if theme.darkmode.enable
   script.
-    var activateDarkMode = function () {
+    (function () {
-      document.documentElement.setAttribute('data-theme', 'dark')
+      window.activateDarkMode = function () {
-      if (document.querySelector('meta[name="theme-color"]') !== null) {
+        document.documentElement.setAttribute('data-theme', 'dark')
-        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
+        if (document.querySelector('meta[name="theme-color"]') !== null) {
-      }
+          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
-    }
-    var activateLightMode = function () {
-      document.documentElement.setAttribute('data-theme', 'light')
-      if (document.querySelector('meta[name="theme-color"]') !== null) {
-        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
-      }
-    }
-
-    var autoChangeMode = '#{theme.darkmode.autoChangeMode}'
-    var t = saveToLocal.get('theme')
-    if (autoChangeMode === '1') {
-      var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-      var isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
-      var isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
-      var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
-
-      if (t === undefined) {
-        if (isLightMode) activateLightMode()
-        else if (isDarkMode) activateDarkMode()
-        else if (isNotSpecified || hasNoSupport) {
-          var now = new Date()
-          var hour = now.getHours()
-          var isNight = hour <= 6 || hour >= 18
-          isNight ? activateDarkMode() : activateLightMode()
         }
-        window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
+      }
-          if (saveToLocal.get('theme') === undefined) {
+      window.activateLightMode = function () {
-            e.matches ? activateDarkMode() : activateLightMode()
+        document.documentElement.setAttribute('data-theme', 'light')
+        if (document.querySelector('meta[name="theme-color"]') !== null) {
+          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
+        }
+      }
+
+      const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
+      const t = saveToLocal.get('theme')
+      if (autoChangeMode === '1') {
+        const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+        const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+        const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
+        const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+
+        if (t === undefined) {
+          if (isLightMode) activateLightMode()
+          else if (isDarkMode) activateDarkMode()
+          else if (isNotSpecified || hasNoSupport) {
+            const now = new Date()
+            const hour = now.getHours()
+            const isNight = hour <= 6 || hour >= 18
+            isNight ? activateDarkMode() : activateLightMode()
           }
-        })
+          window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
-      } else if (t === 'light') activateLightMode()
+            if (saveToLocal.get('theme') === undefined) {
-      else activateDarkMode()
+              e.matches ? activateDarkMode() : activateLightMode()
-    } else if (autoChangeMode === '2') {
+            }
-      now = new Date()
+          })
-      hour = now.getHours()
+        } else if (t === 'light') activateLightMode()
-      isNight = hour <= 6 || hour >= 18
+        else activateDarkMode()
-      if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
+      } else if (autoChangeMode === '2') {
-      else if (t === 'light') activateLightMode()
+        const now = new Date()
-      else activateDarkMode()
+        const hour = now.getHours()
-    } else {
+        const isNight = hour <= 6 || hour >= 18
-      if (t === 'dark') activateDarkMode()
+        if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
-      else if (t === 'light') activateLightMode()
+        else if (t === 'light') activateLightMode()
-    }
+        else activateDarkMode()
+      } else {
+        if (t === 'dark') activateDarkMode()
+        else if (t === 'light') activateLightMode()
+      }
+    })()
+

layout/includes/layout.pug

@@ -12,8 +12,7 @@ html(lang=config.language data-theme=theme.display_mode)
 
     #body-wrap
       if theme.background
-        - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
+        #web_bg
-        #web_bg(data-type=is_photo)
 
       include ./sidebar.pug
       include ./header/index.pug

layout/includes/rightside.pug

@@ -1,28 +1,31 @@
 section#rightside
   #rightside-config-hide
-    if is_post()
+    if is_post() && theme.readmode
-      if theme.readmode
+      button#readmode(type="button" title=_p('rightside.readmode_title'))
-        button#readmode(type="button" title=_p('rightside.readmode_title'))
+        i.fas.fa-book-open
-          i.fas.fa-book-open
+    if theme.translate.enable
-    if theme.translate && theme.translate.enable
       button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
     if theme.darkmode.enable && theme.darkmode.button
       button#darkmode(type="button" title=_p('rightside.night_mode_title'))
         i.fas.fa-adjust
   #rightside-config-show
-    button#rightside_config(type="button" title=_p("rightside.setting"))
+    if is_post()
-      i.fas.fa-cog
+      if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button))
-    if is_post() && page.comments !== false && theme.comments.use
+        button#rightside_config(type="button" title=_p("rightside.setting"))
-      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+          i.fas.fa-cog
-        i.fas.fa-comments
+      if commentsJsLoad
-    if showToc
+        a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-      button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
+          i.fas.fa-comments
-        i.fas.fa-list-ul
+      if showToc
+        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)
+      button#rightside_config(type="button" title=_p("rightside.setting"))
+        i.fas.fa-cog
+
     if theme.chat_btn
       button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms
 
     button#go-up(type="button" title=_p("rightside.back_to_top"))
       i.fas.fa-arrow-up
-
-

layout/includes/third-party/pjax.pug

@@ -7,7 +7,6 @@ script(src=url_for(theme.CDN.pjax))
 script.
   let pjaxSelectors = [
     'title',
-    'meta[name=description]',
     '#config_change',
     '#body-wrap',
     '#rightside-config-hide',

package.json

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

scripts/filters/random_cover.js

@@ -6,8 +6,13 @@
 'use strict'
 
 hexo.extend.filter.register('before_post_render', function (data) {
-  if (data.top_img && data.top_img.indexOf('/') === -1) data.top_img = data.path + data.top_img
+  if (hexo.theme.config.rootConfig.post_asset_folder) {
-  if (data.cover && data.cover.indexOf('/') === -1) data.cover = data.path + data.cover
+    const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+    const topImg = data.top_img
+    const cover = data.cover
+    if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) data.top_img = data.path + topImg
+    if (cover && cover.indexOf('/') === -1) data.cover = data.path + cover
+  }
 
   if (data.cover === false) {
     data.randomcover = randomCover()
@@ -33,6 +38,7 @@ function randomCover () {
       return cover
     }
   } else {
-    return theme.default_top_img
+    cover = 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg'
+    return cover
   }
 }

source/css/_layout/head.styl

@@ -2,7 +2,6 @@
   position: relative
   width: 100%
   background-color: $light-blue
-  background-attachment: scroll
   background-position: center center
   background-size: cover
   background-repeat: no-repeat

source/css/_mode/darkmode.styl

@@ -28,21 +28,15 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --reward-pop: lighten(#121212, 10)
     --sidebar-icon-color: alpha(#FFFFFF, .7)
 
-    // 網站背景，footer背景
+    #web_bg:before,
-    #web_bg[data-type=color]
+    #footer:before,
-      background: darken(#121212, 2)
+    #page-header:before
-
-    #web_bg[data-type=photo]:before
       position: absolute
       width: 100%
       height: 100%
       background-color: alpha($dark-black, .7)
       content: ''
 
-    #footer
-      &:before
-        background-color: alpha($dark-black, .7)
-
     #article-container
       code
         background: #2c2c2c
@@ -56,16 +50,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     // 頭部
     #page-header
-      &:before
-        position: absolute
-        top: 0
-        left: 0
-        display: block
-        width: 100%
-        height: 100%
-        background-color: alpha($dark-black, .7)
-        content: ''
-
       & > #nav.fixed,
       &.no-top-img #nav
         background: alpha(#121212, .8)
@@ -165,5 +149,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     #artitalk_main #lazy
       background: #121212
+
     #operare_artitalk .c2
       background: #121212

source/css/var.styl

@@ -32,7 +32,7 @@ $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font
 $font-color = #1F2D3D
 $rem = 20px
 $text-line-height = 2
-$web-bg = hexo-config('background') && convert(hexo-config('background'))
+$web-bg = hexo-config('background') && unquote(hexo-config('background'))
 $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
 $index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
 // Global color & SVG