fix: 修復夜間模式下，閲讀模式代碼塊背景顔色的顯示bug

fix: 修復在 chrome上，進入頁面時，頁面元素會出現模糊到清晰的bug close #479
fix: 修復 文章頁面上滑子菜單圖標文字無法顯示的 bug close #481
improvement: meta description 限制在150字以內 close #480
improvement: pug優化和結構調整

layout/includes/head.pug

@@ -72,6 +72,6 @@ if theme.blog_title_font &&　theme.blog_title_font.font_link
 include ./head/config_site.pug
 include ./head/noscript.pug
 
-!=partial('includes/head/js', {}, {cache: true})
+!=fragment_cache('injectHeadJs', function(){return inject_head_js()})
 
 !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})

layout/includes/head/config.pug

@@ -124,49 +124,4 @@ script.
     isPhotoFigcaption: !{theme.photofigcaption},
     islazyload: !{theme.lazyload.enable},
     isanchor: !{theme.anchor}
-  };
-
-  const saveToLocal = {
-    // ttl 單位是 天
-    set: function setWithExpiry(key, value, ttl) {
-      if (ttl === 0) return
-      const now = new Date()
-      const expiryDay = ttl * 86400000
-      const item = {
-        value: value,
-        expiry: now.getTime() + expiryDay,
-      }
-      localStorage.setItem(key, JSON.stringify(item))
-    },
-
-    get: function getWithExpiry(key) {
-      const itemStr = localStorage.getItem(key)
-
-      if (!itemStr) {
-        return undefined
-      }
-      const item = JSON.parse(itemStr)
-      const now = new Date()
-
-      if (now.getTime() > item.expiry) {
-        localStorage.removeItem(key)
-        return undefined
-      }
-      return item.value
-    }
   }
-
-  // https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript
-  const getScript = url => new Promise((resolve, reject) => {
-    const script = document.createElement('script')
-    script.src = url
-    script.async = true
-    script.onerror = reject
-    script.onload = script.onreadystatechange = function() {
-      const loadState = this.readyState
-      if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-      script.onload = script.onreadystatechange = null
-      resolve()
-    }
-    document.head.appendChild(script)
-  })

layout/includes/head/config_site.pug

@@ -8,7 +8,7 @@
   var showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 
-script#config_change
+script#config-diff
   .
     var GLOBAL_CONFIG_SITE = { 
       isPost: !{is_post()},

layout/includes/head/js.pug

@@ -1,71 +0,0 @@
-script
-  | (function () {
-    
-  if theme.darkmode.enable
-    |   window.activateDarkMode = function () {
-    |     document.documentElement.setAttribute('data-theme', 'dark')
-    |     if (document.querySelector('meta[name="theme-color"]') !== null) {
-    |       document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
-    |     }
-    |   }
-    |   window.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')
-    |     }
-    |   }
-
-    |   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) {
-    |         if (saveToLocal.get('theme') === undefined) {
-    |           e.matches ? activateDarkMode() : activateLightMode()
-    |         }
-    |       })
-    |     } else if (t === 'light') activateLightMode()
-    |     else activateDarkMode()
-    |   } else if (autoChangeMode === '2') {
-    |     const now = new Date()
-    |     const hour = now.getHours()
-    |     const isNight = hour <= 6 || hour >= 18
-    |     if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
-    |     else if (t === 'light') activateLightMode()
-    |     else activateDarkMode()
-    |   } else {
-    |     if (t === 'dark') activateDarkMode()
-    |     else if (t === 'light') activateLightMode()
-    |   }
-
-  if theme.aside.enable && theme.aside.button
-    | const asideStatus = saveToLocal.get('aside-status')
-    | if (asideStatus !== undefined) {
-    |    if (asideStatus === 'hide') {
-    |      document.documentElement.classList.add('hide-aside')
-    |    } else {
-    |      document.documentElement.classList.remove('hide-aside')
-    |    }
-    | }
-  
-  if theme.change_font_size
-    | const fontSizeVal = saveToLocal.get('global-font-size')
-    | if (fontSizeVal !== undefined) {
-    |   document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
-    | }
-
-  | })()
-

layout/includes/third-party/pjax.pug

@@ -7,7 +7,7 @@ script(src=url_for(theme.CDN.pjax))
 script.
   let pjaxSelectors = [
     'title',
-    '#config_change',
+    '#config-diff',
     '#body-wrap',
     '#rightside-config-hide',
     '#rightside-config-show',

package.json

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

scripts/helpers/inject_head_js.js

@@ -0,0 +1,145 @@
+/**
+ * Butterfly
+ * inject js to head
+ */
+
+'use strict'
+
+hexo.extend.helper.register('inject_head_js', function () {
+  const { darkmode, aside, change_font_size } = this.theme
+
+  const localStore = `
+    win.saveToLocal = {
+      set: function setWithExpiry(key, value, ttl) {
+        if (ttl === 0) return
+        const now = new Date()
+        const expiryDay = ttl * 86400000
+        const item = {
+          value: value,
+          expiry: now.getTime() + expiryDay,
+        }
+        localStorage.setItem(key, JSON.stringify(item))
+      },
+
+      get: function getWithExpiry(key) {
+        const itemStr = localStorage.getItem(key)
+
+        if (!itemStr) {
+          return undefined
+        }
+        const item = JSON.parse(itemStr)
+        const now = new Date()
+
+        if (now.getTime() > item.expiry) {
+          localStorage.removeItem(key)
+          return undefined
+        }
+        return item.value
+      }
+    }
+  `
+
+  // https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript
+  const getScript = `
+    win.getScript = url => new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = url
+      script.async = true
+      script.onerror = reject
+      script.onload = script.onreadystatechange = function() {
+        const loadState = this.readyState
+        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+        script.onload = script.onreadystatechange = null
+        resolve()
+      }
+      document.head.appendChild(script)
+    })
+  `
+
+  let darkmodeJs = ''
+  if (darkmode.enable) {
+    darkmodeJs = `
+      win.activateDarkMode = function () {
+        document.documentElement.setAttribute('data-theme', 'dark')
+        if (document.querySelector('meta[name="theme-color"]') !== null) {
+          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
+        }
+      }
+      win.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')
+        }
+      }
+      const t = saveToLocal.get('theme')
+    `
+
+    const autoChangeMode = darkmode.autoChangeMode
+
+    if (autoChangeMode === 1) {
+      darkmodeJs += `
+          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) {
+              if (saveToLocal.get('theme') === undefined) {
+                e.matches ? activateDarkMode() : activateLightMode()
+              }
+            })
+          } else if (t === 'light') activateLightMode()
+          else activateDarkMode()
+        `
+    } else if (autoChangeMode === 2) {
+      darkmodeJs += `
+          const now = new Date()
+          const hour = now.getHours()
+          const isNight = hour <= 6 || hour >= 18
+          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
+          else if (t === 'light') activateLightMode()
+          else activateDarkMode()
+        `
+    } else {
+      darkmodeJs += `
+          if (t === 'dark') activateDarkMode()
+          else if (t === 'light') activateLightMode()
+        `
+    }
+  }
+
+  let asideStatus = ''
+  if (aside.enable && aside.button) {
+    asideStatus = `
+      const asideStatus = saveToLocal.get('aside-status')
+      if (asideStatus !== undefined) {
+        if (asideStatus === 'hide') {
+          document.documentElement.classList.add('hide-aside')
+        } else {
+          document.documentElement.classList.remove('hide-aside')
+        }
+      }
+    `
+  }
+
+  let changFontAside = ''
+  if (change_font_size) {
+    changFontAside = `
+    const fontSizeVal = saveToLocal.get('global-font-size')
+    if (fontSizeVal !== undefined) {
+      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
+    }
+    `
+  }
+
+  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + changFontAside}})(window)</script>`
+})

scripts/helpers/page.js

@@ -15,7 +15,7 @@ hexo.extend.helper.register('page_description', function () {
   let description = page.description || page.content || page.title || config.description
 
   if (description) {
-    description = escapeHTML(stripHTML(description).substring(0, 200)
+    description = escapeHTML(stripHTML(description).substring(0, 150)
       .trim()
     ).replace(/\n/g, ' ')
     return description

source/css/_global/function.styl

@@ -127,6 +127,7 @@ if hexo-config('avatar.effect') == true
     transform: translateY(50px)
 
   100%
+    filter: none
     opacity: 1
     transform: translateY(0)
 

source/css/_layout/head.styl

@@ -348,8 +348,8 @@ _:future,
             display: inline-block
             padding: .3rem .7rem
             width: 100%
-            color: var(--font-color)
+            color: var(--font-color) !important
-            text-shadow: none
+            text-shadow: none !important
 
   &.hide-menu
     #toggle-menu
@@ -376,3 +376,4 @@ _:future,
     padding-bottom: .3rem
     text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
     font-size: .78em
+    cursor: pointer

source/css/_layout/rightside.styl

@@ -24,7 +24,6 @@
       color: var(--btn-color)
       text-align: center
       font-size: 16px
-      cursor: pointer
 
       &:hover
         background-color: var(--btn-hover-color)

source/css/_mode/readmode.styl

@@ -38,9 +38,7 @@ if hexo-config('readmode')
       border-radius: 8px
       background: var(--exit-btn-bg)
       color: var(--exit-btn-color)
-      text-align: center
       font-size: 16px
-      cursor: pointer
       transition: background .3s
 
       &:hover
@@ -86,7 +84,7 @@ if hexo-config('readmode')
 
       pre,
       .highlight:not(.js-file-line-container)
-        background: var(-highlight-bg) !important
+        background: var(--highlight-bg) !important
 
         *
           color: var(--font-color) !important
@@ -193,3 +191,7 @@ if hexo-config('readmode')
         filter: none
         background-color: var(--readmode-light-color) !important
         color: var(--font-color)
+
+        &:before,
+        .note-icon
+          color: var(--font-color)

source/css/_page/common.styl

@@ -46,3 +46,7 @@
 
     & > div
       width: 100% !important
+
+// fix chrome enter animation blur
+.layout
+  filter: blur(0)