breaking change:

1. 部分配置更改

feat:
1. 移除 messenger 聊天插件
2. 更新 fackbook 版本號
3. 增加 香港繁體、日文和韓語
4. 使用的新的複製api 代替舊的
5. 增加 umami 分析
6. 增加 umami 獲取訪問量/訪客數
7. snackbar 增加透明度
8. 文章頁下， nav fixed 下 顯示文章標題

improvement:
1. 代碼優化
2. 修改部分用語
3. 回復之前的相對時間邏輯
4. timeline tag 樣式優化
5. 優化 seo
6. 優化 artalk 的最新評論

fix:
1. tag-hide toggle 圓角問題
2. lazyload 為 false 時，artalk 無法正常加載評論的 bug
3. 修復 gallery 出現抖動的 bug

scripts/helpers/aside_archives.js

@@ -1,98 +1,68 @@
-/**
- * Butterfly
- * for aside archives
- */
-
 'use strict'
 
 hexo.extend.helper.register('aside_archives', function (options = {}) {
-  const { config } = this
+  const { config, page, site, url_for, _p } = this
   const archiveDir = config.archive_dir
   const { timezone } = config
-  const lang = toMomentLocale(this.page.lang || this.page.language || config.language)
-  let { format } = options
+  const lang = toMomentLocale(page.lang || page.language || config.language)
   const type = options.type || 'monthly'
-  const { transform } = options
+  const format = options.format || (type === 'monthly' ? 'MMMM YYYY' : 'YYYY')
   const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
   const order = options.order || -1
+  const limit = options.limit
   const compareFunc = type === 'monthly'
     ? (yearA, monthA, yearB, monthB) => yearA === yearB && monthA === monthB
     : (yearA, monthA, yearB, monthB) => yearA === yearB
-  const limit = options.limit
-  let result = ''
 
-  if (!format) {
-    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY'
-  }
-
-  const posts = this.site.posts.sort('date', order)
-  if (!posts.length) return result
+  const posts = site.posts.sort('date', order)
+  if (!posts.length) return ''
 
   const data = []
-  let length = 0
-
   posts.forEach(post => {
-    // Clone the date object to avoid pollution
     let date = post.date.clone()
-
     if (timezone) date = date.tz(timezone)
 
     const year = date.year()
     const month = date.month() + 1
-    const lastData = data[length - 1]
 
-    if (!lastData || !compareFunc(lastData.year, lastData.month, year, month)) {
+    if (!data.length || !compareFunc(data[data.length - 1].year, data[data.length - 1].month, year, month)) {
       if (lang) date = date.locale(lang)
-      const name = date.format(format)
-      length = data.push({
-        name,
-        year,
-        month,
-        count: 1
-      })
+      data.push({ name: date.format(format), year, month, count: 1 })
     } else {
-      lastData.count++
+      data[data.length - 1].count++
     }
   })
 
   const link = item => {
     let url = `${archiveDir}/${item.year}/`
-
     if (type === 'monthly') {
-      if (item.month < 10) url += '0'
-      url += `${item.month}/`
+      url += item.month < 10 ? `0${item.month}/` : `${item.month}/`
     }
-
-    return this.url_for(url)
+    return url_for(url)
   }
 
   const len = data.length
-  const Judge = limit === 0 ? len : Math.min(len, limit)
+  const limitLength = 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>`
+  let result = `
+    <div class="item-headline">
+      <i class="fas fa-archive"></i>
+      <span>${_p('aside.card_archives')}</span>
+      ${len > limitLength ? `<a class="card-more-btn" href="${url_for(archiveDir)}/" title="${_p('aside.more_button')}"><i class="fas fa-angle-right"></i></a>` : ''}
+    </div>
+    <ul class="card-archive-list">
+  `
 
-  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++) {
+  for (let i = 0; i < limitLength; i++) {
     const item = data[i]
-
-    result += '<li class="card-archive-list-item">'
-
-    result += `<a class="card-archive-list-link" href="${link(item)}">`
-    result += '<span class="card-archive-list-date">'
-    result += transform ? transform(item.name) : item.name
-    result += '</span>'
-
-    if (showCount) {
-      result += `<span class="card-archive-list-count">${item.count}</span>`
-    }
-    result += '</a>'
-    result += '</li>'
+    result += `
+      <li class="card-archive-list-item">
+        <a class="card-archive-list-link" href="${link(item)}">
+          <span class="card-archive-list-date">${options.transform ? options.transform(item.name) : item.name}</span>
+          ${showCount ? `<span class="card-archive-list-count">${item.count}</span>` : ''}
+        </a>
+      </li>
+    `
   }
 
   result += '</ul>'
@@ -100,12 +70,6 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
 })
 
 const toMomentLocale = function (lang) {
-  if (lang === undefined) {
-    return undefined
-  }
-
-  // moment.locale('') equals moment.locale('en')
-  // moment.locale(null) equals moment.locale('en')
   if (!lang || lang === 'en' || lang === 'default') {
     return 'en'
   }

scripts/helpers/aside_categories.js

@@ -1,66 +1,52 @@
-/**
- * Butterfly
- * for aside categories
- */
-
 'use strict'
 
-hexo.extend.helper.register('aside_categories', function (categories, options) {
-  if (!options && (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length'))
-  ) {
-    options = categories
+hexo.extend.helper.register('aside_categories', function (categories, options = {}) {
+  if (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length')) {
+    options = categories || {}
     categories = this.site.categories
   }
 
   if (!categories || !categories.length) return ''
-  options = options || {}
+
   const { config } = this
-  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count')
-    ? options.show_count
-    : true
+  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
   const depth = options.depth ? parseInt(options.depth, 10) : 0
   const orderby = options.orderby || 'name'
   const order = options.order || 1
   const categoryDir = this.url_for(config.category_dir)
-  const limit = options.limit === 0 ? categories.length : options.limit
+  const limit = options.limit === 0 ? categories.length : (options.limit || categories.length)
   const isExpand = options.expand !== 'none'
   const expandClass = isExpand && options.expand === true ? 'expand' : ''
   const buttonLabel = this._p('aside.more_button')
-  const prepareQuery = (parent) => {
-    const query = {}
-    if (parent) { query.parent = parent } else { query.parent = { $exists: false } }
-    return categories.find(query).sort(orderby, order).filter((cat) => cat.length)
-  }
-  let expandBtn = ''
 
-  const hierarchicalList = (t, level, parent, topparent = true) => {
+  const prepareQuery = parent => {
+    const query = parent ? { parent } : { parent: { $exists: false } }
+    return categories.find(query).sort(orderby, order).filter(cat => cat.length)
+  }
+
+  const hierarchicalList = (remaining, level = 0, parent) => {
     let result = ''
-    const isTopParent = topparent
-    if (t > 0) {
-      prepareQuery(parent).forEach((cat, i) => {
-        if (t > 0) {
-          t = t - 1
-          let child
+    if (remaining > 0) {
+      prepareQuery(parent).forEach(cat => {
+        if (remaining > 0) {
+          remaining -= 1
+          let child = ''
           if (!depth || level + 1 < depth) {
-            const childList = hierarchicalList(t, level + 1, cat._id, false)
-            child = childList[0]
-            t = childList[1]
+            const childList = hierarchicalList(remaining, level + 1, cat._id)
+            child = childList.result
+            remaining = childList.remaining
           }
 
-          const parentClass = isExpand && isTopParent && child ? 'parent' : ''
-
+          const parentClass = isExpand && !parent && child ? 'parent' : ''
           result += `<li class="card-category-list-item ${parentClass}">`
-
           result += `<a class="card-category-list-link" href="${this.url_for(cat.path)}">`
-
           result += `<span class="card-category-list-name">${cat.name}</span>`
 
           if (showCount) {
             result += `<span class="card-category-list-count">${cat.length}</span>`
           }
 
-          if (isExpand && isTopParent && child) {
-            expandBtn = ' expandBtn'
+          if (isExpand && !parent && child) {
             result += `<i class="fas fa-caret-left ${expandClass}"></i>`
           }
 
@@ -74,26 +60,22 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
         }
       })
     }
-
-    return [result, t]
+    return { result, remaining }
   }
 
-  const list = hierarchicalList(limit, 0)
+  const list = hierarchicalList(limit)
 
-  const moreButton = function () {
-    if (categories.length <= limit) return ''
-    const moreHtml = `<a class="card-more-btn" href="${categoryDir}/" title="${buttonLabel}">
-    <i class="fas fa-angle-right"></i></a>`
-
-    return moreHtml
-  }
+  const moreButton = categories.length > limit
+    ? `<a class="card-more-btn" href="${categoryDir}/" title="${buttonLabel}">
+      <i class="fas fa-angle-right"></i></a>`
+    : ''
 
   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${expandBtn}" id="aside-cat-list">
-            ${list[0]}
-            </ul>`
+            ${moreButton}
+          </div>
+          <ul class="card-category-list${isExpand && list.result ? ' expandBtn' : ''}" id="aside-cat-list">
+            ${list.result}
+          </ul>`
 })

scripts/helpers/inject_head_js.js

@@ -1,14 +1,3 @@
-/**
- * Butterfly
- * inject js to head
- *
- * addGlobalFn
- *  pjaxSendOnce - remove in pjaxSend
- *  pjaxCompleteOnce - remove in pjaxComplete
- *  pjaxSend - run in pjaxSend
- *  pjaxComplete - run in pjaxComplete
- */
-
 'use strict'
 
 hexo.extend.helper.register('inject_head_js', function () {
@@ -16,93 +5,62 @@ hexo.extend.helper.register('inject_head_js', function () {
   const start = darkmode.start || 6
   const end = darkmode.end || 18
   const { theme_color } = hexo.theme.config
-  const themeColorLight = (theme_color && theme_color.enable && theme_color.meta_theme_color_light) || '#ffffff'
-  const themeColorDark = (theme_color && theme_color.enable && theme_color.meta_theme_color_dark) || '#0d0d0d'
+  const themeColorLight = theme_color && theme_color.enable ? theme_color.meta_theme_color_light : '#ffffff'
+  const themeColorDark = theme_color && theme_color.enable ? theme_color.meta_theme_color_dark : '#0d0d0d'
 
-  const createCustonJs = () => {
-    return `
-      const saveToLocal = {
-        set: (key, value, ttl) => {
-          if (ttl === 0) return
-          const now = Date.now()
-          const expiry = now + ttl * 86400000
-          const item = {
-            value,
-            expiry
-          }
-          localStorage.setItem(key, JSON.stringify(item))
-        },
-      
-        get: key => {
-          const itemStr = localStorage.getItem(key)
-      
-          if (!itemStr) {
-            return undefined
-          }
-          const item = JSON.parse(itemStr)
-          const now = Date.now()
-      
-          if (now > item.expiry) {
-            localStorage.removeItem(key)
-            return undefined
-          }
-          return item.value
+  const createCustomJs = () => `
+    const saveToLocal = {
+      set: (key, value, ttl) => {
+        if (!ttl) return
+        const expiry = Date.now() + ttl * 86400000
+        localStorage.setItem(key, JSON.stringify({ value, expiry }))
+      },
+      get: key => {
+        const itemStr = localStorage.getItem(key)
+        if (!itemStr) return undefined
+        const { value, expiry } = JSON.parse(itemStr)
+        if (Date.now() > expiry) {
+          localStorage.removeItem(key)
+          return undefined
         }
+        return value
       }
-      
-      window.btf = {
-        saveToLocal: saveToLocal,
-        getScript: (url, attr = {}) => 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()
-          }
+    }
 
-          Object.keys(attr).forEach(key => {
-            script.setAttribute(key, attr[key])
-          })
-
-          document.head.appendChild(script)
-        }),
-
-        getCSS: (url, id = false) => new Promise((resolve, reject) => {
-          const link = document.createElement('link')
-          link.rel = 'stylesheet'
-          link.href = url
-          if (id) link.id = id
-          link.onerror = reject
-          link.onload = link.onreadystatechange = function() {
-            const loadState = this.readyState
-            if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-            link.onload = link.onreadystatechange = null
-            resolve()
-          }
-          document.head.appendChild(link)
-        }),
-
-        addGlobalFn: (key, fn, name = false, parent = window) => {
-          const pjaxEnable = ${pjax.enable}
-          if (!pjaxEnable && key.startsWith('pjax')) return
-
-          const globalFn = parent.globalFn || {}
-          const keyObj = globalFn[key] || {}
-    
-          if (name && keyObj[name]) return
-    
-          name = name || Object.keys(keyObj).length
-          keyObj[name] = fn
-          globalFn[key] = keyObj
-          parent.globalFn = globalFn
+    window.btf = {
+      saveToLocal,
+      getScript: (url, attr = {}) => new Promise((resolve, reject) => {
+        const script = document.createElement('script')
+        script.src = url
+        script.async = true
+        Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
+        script.onload = script.onreadystatechange = () => {
+          if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
         }
+        script.onerror = reject
+        document.head.appendChild(script)
+      }),
+      getCSS: (url, id) => new Promise((resolve, reject) => {
+        const link = document.createElement('link')
+        link.rel = 'stylesheet'
+        link.href = url
+        if (id) link.id = id
+        link.onload = link.onreadystatechange = () => {
+          if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
+        }
+        link.onerror = reject
+        document.head.appendChild(link)
+      }),
+      addGlobalFn: (key, fn, name = false, parent = window) => {
+        if (!${pjax.enable} && key.startsWith('pjax')) return
+        const globalFn = parent.globalFn || {}
+        globalFn[key] = globalFn[key] || {}
+        if (name && globalFn[key][name]) return
+        globalFn[key][name || Object.keys(globalFn[key]).length] = fn
+        parent.globalFn = globalFn
       }
-    `
-  }
+    }
+  `
 
   const createDarkmodeJs = () => {
     if (!darkmode.enable) return ''
@@ -123,80 +81,76 @@ hexo.extend.helper.register('inject_head_js', function () {
 
       btf.activateDarkMode = activateDarkMode
       btf.activateLightMode = activateLightMode
-      
-      const t = saveToLocal.get('theme')
+
+      const theme = 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()
+    switch (darkmode.autoChangeMode) {
+      case 1:
+        darkmodeJs += `
+          const mediaQueryDark = window.matchMedia('(prefers-color-scheme: dark)')
+          const mediaQueryLight = window.matchMedia('(prefers-color-scheme: light)')
+          
+          if (theme === undefined) {
+            if (mediaQueryLight.matches) activateLightMode()
+            else if (mediaQueryDark.matches) activateDarkMode()
+            else {
+              const hour = new Date().getHours()
               const isNight = hour <= ${start} || hour >= ${end}
               isNight ? activateDarkMode() : activateLightMode()
             }
-            window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
+            mediaQueryDark.addEventListener('change', () => {
               if (saveToLocal.get('theme') === undefined) {
                 e.matches ? activateDarkMode() : activateLightMode()
               }
             })
-          } else if (t === 'light') activateLightMode()
-          else activateDarkMode()
+          } else {
+            theme === 'light' ? activateLightMode() : activateDarkMode()
+          }
         `
-    } else if (autoChangeMode === 2) {
-      darkmodeJs += `
-          const now = new Date()
-          const hour = now.getHours()
+        break
+      case 2:
+        darkmodeJs += `
+          const hour = new Date().getHours()
           const isNight = hour <= ${start} || hour >= ${end}
-          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
-          else if (t === 'light') activateLightMode()
-          else activateDarkMode()
+          if (theme === undefined) isNight ? activateDarkMode() : activateLightMode()
+          else theme === 'light' ? activateLightMode() : activateDarkMode()
+        `
+        break
+      default:
+        darkmodeJs += `
+          theme === 'dark' ? activateDarkMode() : theme === 'light' ? activateLightMode() : null
         `
-    } else {
-      darkmodeJs += `
-        if (t === 'dark') activateDarkMode()
-        else if (t === 'light') activateLightMode()
-      `
     }
 
     return darkmodeJs
   }
 
-  const createAsideStatus = () => {
+  const createAsideStatusJs = () => {
     if (!aside.enable || !aside.button) return ''
-
     return `
       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')
-        }
+        document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
       }
     `
   }
 
-  const createDetectApple = () => {
-    return `
-      const detectApple = () => {
-        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
-          document.documentElement.classList.add('apple')
-        }
+  const createDetectAppleJs = () => `
+    const detectApple = () => {
+      if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
+        document.documentElement.classList.add('apple')
       }
-      detectApple()
-    `
-  }
+    }
+    detectApple()
+  `
 
-  return `<script>(()=>{${createCustonJs() + createDarkmodeJs() + createAsideStatus() + createDetectApple()}})()</script>`
+  return `<script>
+    (() => {
+      ${createCustomJs()}
+      ${createDarkmodeJs()}
+      ${createAsideStatusJs()}
+      ${createDetectAppleJs()}
+    })()
+  </script>`
 })

scripts/helpers/page.js

@@ -9,43 +9,33 @@ hexo.extend.helper.register('truncate', (content, length) => {
 
 hexo.extend.helper.register('cloudTags', function (options = {}) {
   const env = this
-  let { source, minfontsize, maxfontsize, limit, unit, orderby, order } = options
-  unit = unit || 'px'
+  let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order } = options
 
-  let result = ''
   if (limit > 0) {
     source = source.limit(limit)
   }
 
-  const sizes = []
-  source.sort('length').forEach(tag => {
-    const { length } = tag
-    if (sizes.includes(length)) return
-    sizes.push(length)
-  })
+  const sizes = [...new Set(source.map(tag => tag.length).sort((a, b) => a - b))]
 
   const getRandomColor = () => {
     const randomColor = () => Math.floor(Math.random() * 201)
     const r = randomColor()
     const g = randomColor()
     const b = randomColor()
-    // 確保顏色不是太暗，通過增加一個最低值
     return `rgb(${Math.max(r, 50)}, ${Math.max(g, 50)}, ${Math.max(b, 50)})`
   }
 
-  const generateStyle = (size, unit) => {
-    const fontSize = parseFloat(size.toFixed(2)) + unit
-    const color = getRandomColor()
-    return `font-size: ${fontSize}; color: ${color};`
-  }
+  const generateStyle = (size, unit) =>
+    `font-size: ${parseFloat(size.toFixed(2)) + unit}; color: ${getRandomColor()};`
 
   const length = sizes.length - 1
-  source.sort(orderby, order).forEach(tag => {
+  const result = source.sort(orderby, order).map(tag => {
     const ratio = length ? sizes.indexOf(tag.length) / length : 0
     const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
     const style = generateStyle(size, unit)
-    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
-  })
+    return `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+  }).join('')
+
   return result
 })
 
@@ -57,9 +47,8 @@ hexo.extend.helper.register('md5', function (path) {
   return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
 })
 
-hexo.extend.helper.register('injectHtml', function (data) {
-  if (!data) return ''
-  return data.join('')
+hexo.extend.helper.register('injectHtml', data => {
+  return data ? data.join('') : ''
 })
 
 hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
@@ -75,7 +64,8 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   const loop = (m) => {
     for (const key in m) {
       if (typeof m[key] === 'object') {
-        loop(m[key])
+        const result = loop(m[key])
+        if (result) return result
       }
 
       if (/\/archives\//.test(m[key])) {
@@ -87,7 +77,7 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   return loop(menu) || defaultTitle
 })
 
-hexo.extend.helper.register('getBgPath', function (path) {
+hexo.extend.helper.register('getBgPath', path => {
   if (!path) return ''
 
   const absoluteUrlPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i

scripts/helpers/series.js

@@ -2,14 +2,14 @@
 
 hexo.extend.helper.register('groupPosts', function () {
   const getGroupArray = array => {
-    const groups = {}
-    array.forEach(item => {
-      const Key = item.series
-      if (!Key) return
-      groups[Key] = groups[Key] || []
-      groups[Key].push(item)
-    })
-    return groups
+    return array.reduce((groups, item) => {
+      const key = item.series
+      if (key) {
+        groups[key] = groups[key] || []
+        groups[key].push(item)
+      }
+      return groups
+    }, {})
   }
 
   const sortPosts = posts => {