add theme

themes/butterfly/scripts/helpers/aside_archives.js

@@ -0,0 +1,126 @@
+'use strict'
+
+hexo.extend.helper.register('aside_archives', function (options = {}) {
+  const { config, page, site, url_for, _p } = this
+  const { archive_dir: archiveDir, timezone, language } = config
+
+  // Destructure and set default options with object destructuring
+  const {
+    type = 'monthly',
+    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY',
+    show_count: showCount = true,
+    order = -1,
+    limit,
+    transform
+  } = options
+
+  // Optimize locale handling
+  const lang = toMomentLocale(page.lang || page.language || language)
+
+  // Memoize comparison function to improve performance
+  const compareFunc =
+    type === 'monthly'
+      ? (yearA, monthA, yearB, monthB) => yearA === yearB && monthA === monthB
+      : (yearA, yearB) => yearA === yearB
+
+  // Early return if no posts
+  if (!site.posts.length) return ''
+
+  // Use reduce for more efficient data processing
+  const data = site.posts.sort('date', order).reduce((acc, post) => {
+    let date = post.date.clone()
+    if (timezone) date = date.tz(timezone)
+
+    const year = date.year()
+    const month = date.month() + 1
+
+    if (lang) date = date.locale(lang)
+
+    // Find or create archive entry
+    const lastEntry = acc[acc.length - 1]
+
+    if (type === 'yearly') {
+      const existingYearIndex = acc.findIndex(entry => entry.year === year)
+      if (existingYearIndex !== -1) {
+        acc[existingYearIndex].count++
+      } else {
+        // 否則創建新條目
+        acc.push({
+          name: date.format(format),
+          year,
+          month,
+          count: 1
+        })
+      }
+    } else {
+      if (!lastEntry || !compareFunc(lastEntry.year, lastEntry.month, year, month)) {
+        acc.push({
+          name: date.format(format),
+          year,
+          month,
+          count: 1
+        })
+      } else {
+        lastEntry.count++
+      }
+    }
+
+    return acc
+  }, [])
+
+  // Create link generator function
+  const createArchiveLink = item => {
+    let url = `${archiveDir}/${item.year}/`
+    if (type === 'monthly') {
+      url += item.month < 10 ? `0${item.month}/` : `${item.month}/`
+    }
+    return url_for(url)
+  }
+
+  // Limit results efficiently
+  const limitedData = limit > 0 ? data.slice(0, Math.min(data.length, limit)) : data
+
+  // Use template literal for better readability
+  const archiveHeader = `
+    <div class="item-headline">
+      <i class="fas fa-archive"></i>
+      <span>${_p('aside.card_archives')}</span>
+      ${
+        data.length > limitedData.length
+          ? `<a class="card-more-btn" href="${url_for(archiveDir)}/"
+            title="${_p('aside.more_button')}">
+            <i class="fas fa-angle-right"></i>
+          </a>`
+          : ''
+      }
+    </div>
+  `
+
+  // Use map for generating list items, join for performance
+  const archiveList = `
+    <ul class="card-archive-list">
+      ${limitedData
+        .map(
+          item => `
+        <li class="card-archive-list-item">
+          <a class="card-archive-list-link" href="${createArchiveLink(item)}">
+            <span class="card-archive-list-date">
+              ${transform ? transform(item.name) : item.name}
+            </span>
+            ${showCount ? `<span class="card-archive-list-count">${item.count}</span>` : ''}
+          </a>
+        </li>
+      `
+        )
+        .join('')}
+    </ul>
+  `
+
+  return archiveHeader + archiveList
+})
+
+// Improved locale conversion function
+const toMomentLocale = lang => {
+  if (!lang || ['en', 'default'].includes(lang)) return 'en'
+  return lang.toLowerCase().replace('_', '-')
+}

themes/butterfly/scripts/helpers/aside_categories.js

@@ -0,0 +1,81 @@
+'use strict'
+
+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 ''
+
+  const { config } = this
+  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 || 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 = parent ? { parent } : { parent: { $exists: false } }
+    return categories.find(query).sort(orderby, order).filter(cat => cat.length)
+  }
+
+  const hierarchicalList = (remaining, level = 0, parent) => {
+    let result = ''
+    if (remaining > 0) {
+      prepareQuery(parent).forEach(cat => {
+        if (remaining > 0) {
+          remaining -= 1
+          let child = ''
+          if (!depth || level + 1 < depth) {
+            const childList = hierarchicalList(remaining, level + 1, cat._id)
+            child = childList.result
+            remaining = childList.remaining
+          }
+
+          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 && !parent && child) {
+            result += `<i class="fas fa-caret-left ${expandClass}"></i>`
+          }
+
+          result += '</a>'
+
+          if (child) {
+            result += `<ul class="card-category-list child">${child}</ul>`
+          }
+
+          result += '</li>'
+        }
+      })
+    }
+    return { result, remaining }
+  }
+
+  const list = hierarchicalList(limit)
+
+  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${isExpand && list.result ? ' expandBtn' : ''}" id="aside-cat-list">
+            ${list.result}
+          </ul>`
+})

themes/butterfly/scripts/helpers/getArchiveLength.js

@@ -0,0 +1,45 @@
+hexo.extend.helper.register('getArchiveLength', function () {
+  const archiveGenerator = hexo.config.archive_generator
+  const posts = this.site.posts
+
+  const { yearly, monthly, daily } = archiveGenerator
+  const { year, month, day } = this.page
+
+  // Archives Page
+  if (!year) return posts.length
+
+  // Function to generate a unique key based on the granularity
+  const getKey = (post, type) => {
+    const date = post.date.clone()
+    const y = date.year()
+    const m = date.month() + 1
+    const d = date.date()
+    if (type === 'year') return `${y}`
+    if (type === 'month') return `${y}-${m}`
+    if (type === 'day') return `${y}-${m}-${d}`
+  }
+
+  // Create a map to count posts per period
+  const mapData = this.fragment_cache('createArchiveObj', () => {
+    const map = new Map()
+    posts.forEach(post => {
+      const keyYear = getKey(post, 'year')
+      const keyMonth = getKey(post, 'month')
+      const keyDay = getKey(post, 'day')
+
+      if (yearly) map.set(keyYear, (map.get(keyYear) || 0) + 1)
+      if (monthly) map.set(keyMonth, (map.get(keyMonth) || 0) + 1)
+      if (daily) map.set(keyDay, (map.get(keyDay) || 0) + 1)
+    })
+    return map
+  })
+
+  // Determine the appropriate key to fetch based on current page context
+  let key
+  if (yearly && year) key = `${year}`
+  if (monthly && month) key = `${year}-${month}`
+  if (daily && day) key = `${year}-${month}-${day}`
+
+  // Return the count for the current period or default to the total posts
+  return mapData.get(key) || posts.length
+})

themes/butterfly/scripts/helpers/inject_head_js.js

@@ -0,0 +1,155 @@
+'use strict'
+
+hexo.extend.helper.register('inject_head_js', function () {
+  const { darkmode, aside, pjax } = this.theme
+  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 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,
+      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] || {}
+        globalFn[key][name || Object.keys(globalFn[key]).length] = fn
+        parent.globalFn = globalFn
+      }
+    }
+  `
+
+  const createDarkmodeJs = () => {
+    if (!darkmode.enable) return ''
+
+    let darkmodeJs = `
+      const activateDarkMode = () => {
+        document.documentElement.setAttribute('data-theme', 'dark')
+        if (document.querySelector('meta[name="theme-color"]') !== null) {
+          document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorDark}')
+        }
+      }
+      const activateLightMode = () => {
+        document.documentElement.setAttribute('data-theme', 'light')
+        if (document.querySelector('meta[name="theme-color"]') !== null) {
+          document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorLight}')
+        }
+      }
+
+      btf.activateDarkMode = activateDarkMode
+      btf.activateLightMode = activateLightMode
+
+      const theme = saveToLocal.get('theme')
+    `
+
+    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()
+            }
+            mediaQueryDark.addEventListener('change', () => {
+              if (saveToLocal.get('theme') === undefined) {
+                e.matches ? activateDarkMode() : activateLightMode()
+              }
+            })
+          } else {
+            theme === 'light' ? activateLightMode() : activateDarkMode()
+          }
+        `
+        break
+      case 2:
+        darkmodeJs += `
+          const hour = new Date().getHours()
+          const isNight = hour <= ${start} || hour >= ${end}
+          if (theme === undefined) isNight ? activateDarkMode() : activateLightMode()
+          else theme === 'light' ? activateLightMode() : activateDarkMode()
+        `
+        break
+      default:
+        darkmodeJs += `
+          theme === 'dark' ? activateDarkMode() : theme === 'light' ? activateLightMode() : null
+        `
+    }
+
+    return darkmodeJs
+  }
+
+  const createAsideStatusJs = () => {
+    if (!aside.enable || !aside.button) return ''
+    return `
+      const asideStatus = saveToLocal.get('aside-status')
+      if (asideStatus !== undefined) {
+        document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
+      }
+    `
+  }
+
+  const createDetectAppleJs = () => `
+    const detectApple = () => {
+      if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
+        document.documentElement.classList.add('apple')
+      }
+    }
+    detectApple()
+  `
+
+  return `<script>
+    (() => {
+      ${createCustomJs()}
+      ${createDarkmodeJs()}
+      ${createAsideStatusJs()}
+      ${createDetectAppleJs()}
+    })()
+  </script>`
+})

themes/butterfly/scripts/helpers/page.js

@@ -0,0 +1,152 @@
+'use strict'
+
+const { truncateContent, postDesc } = require('../common/postDesc')
+const { prettyUrls } = require('hexo-util')
+const crypto = require('crypto')
+const moment = require('moment-timezone')
+
+hexo.extend.helper.register('truncate', truncateContent)
+
+hexo.extend.helper.register('postDesc', data => {
+  return postDesc(data, hexo)
+})
+
+hexo.extend.helper.register('cloudTags', function (options = {}) {
+  const env = this
+  let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order } = options
+
+  if (limit > 0) {
+    source = source.limit(limit)
+  }
+
+  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) =>
+    `font-size: ${parseFloat(size.toFixed(2)) + unit}; color: ${getRandomColor()};`
+
+  const length = sizes.length - 1
+  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)
+    return `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+  }).join('')
+
+  return result
+})
+
+hexo.extend.helper.register('urlNoIndex', function (url = null, trailingIndex = false, trailingHtml = false) {
+  return prettyUrls(url || this.url, { trailing_index: trailingIndex, trailing_html: trailingHtml })
+})
+
+hexo.extend.helper.register('md5', function (path) {
+  return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
+})
+
+hexo.extend.helper.register('injectHtml', data => {
+  return data ? data.join('') : ''
+})
+
+hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
+  if (page.year) {
+    const dateStr = page.month ? `${page.year}-${page.month}` : `${page.year}`
+    const dateFormat = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
+    return date(dateStr, dateFormat)
+  }
+
+  const defaultTitle = this._p('page.archives')
+  if (!menu) return defaultTitle
+
+  const loop = (m) => {
+    for (const key in m) {
+      if (typeof m[key] === 'object') {
+        const result = loop(m[key])
+        if (result) return result
+      }
+
+      if (/\/archives\//.test(m[key])) {
+        return key
+      }
+    }
+  }
+
+  return loop(menu) || defaultTitle
+})
+
+hexo.extend.helper.register('getBgPath', function(path) {
+  if (!path) return ''
+
+  const absoluteUrlPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i
+  const relativeUrlPattern = /^(\.\/|\.\.\/|\/|[^/]+\/).*$/
+  const colorPattern = /^(#|rgb|rgba|hsl|hsla)/i
+
+  if (colorPattern.test(path)) {
+    return `background-color: ${path};`
+  } else if (absoluteUrlPattern.test(path) || relativeUrlPattern.test(path)) {
+    return `background-image: url(${this.url_for(path)});`
+  } else {
+    return `background: ${path};`
+  }
+})
+
+hexo.extend.helper.register('shuoshuoFN', (data, page) => {
+  const { limit } = page
+  let finalResult = ''
+
+  // Check if limit.value is a valid date
+  const isValidDate = date => !isNaN(Date.parse(date))
+
+  // order by date
+  const orderByDate = data => data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
+
+  // Apply number limit or time limit conditionally
+  const limitData = data => {
+    if (limit && limit.type === 'num' && limit.value > 0) {
+      return data.slice(0, limit.value)
+    } else if (limit && limit.type === 'date' && isValidDate(limit.value)) {
+      const limitDate = Date.parse(limit.value)
+      return data.filter(item => Date.parse(item.date) >= limitDate)
+    }
+
+    return data
+  }
+
+  orderByDate(data)
+  finalResult = limitData(data)
+
+  // This is a hack method, because hexo treats time as UTC time
+  // so you need to manually convert the time zone
+  finalResult.forEach(item => {
+    const utcDate = moment.utc(item.date).format('YYYY-MM-DD HH:mm:ss')
+    item.date = moment.tz(utcDate, hexo.config.timezone).format('YYYY-MM-DD HH:mm:ss')
+  })
+
+  return finalResult
+})
+
+hexo.extend.helper.register('getPageType', (page, isHome) => {
+  const { layout, tag, category, type, archive } = page
+  if (layout) return layout
+  if (tag) return 'tag'
+  if (category) return 'category'
+  if (archive) return 'archive'
+  if (type) {
+    if (type === 'tags' || type === 'categories') return type
+    else return 'page'
+  }
+  if (isHome) return 'home'
+  return 'post'
+})
+
+hexo.extend.helper.register('getVersion', () => {
+  const { version } = require('../../package.json')
+  return { hexo: hexo.version, theme: version }
+})

themes/butterfly/scripts/helpers/related_post.js

@@ -0,0 +1,97 @@
+/* eslint-disable camelcase */
+/**
+ * Butterfly
+ * Related Posts
+ * According the tag
+ */
+
+'use strict'
+
+const { postDesc } = require('../common/postDesc')
+
+hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
+  let relatedPosts = []
+  const tagsData = currentPost.tags
+  tagsData.length && tagsData.forEach(function (tag) {
+    allPosts.forEach(function (post) {
+      if (currentPost.path !== post.path && isTagRelated(tag.name, post.tags)) {
+        const getPostDesc = post.postDesc || postDesc(post, hexo)
+        const relatedPost = {
+          title: post.title,
+          path: post.path,
+          cover: post.cover,
+          cover_type: post.cover_type,
+          weight: 1,
+          updated: post.updated,
+          created: post.date,
+          postDesc: getPostDesc
+        }
+        const index = findItem(relatedPosts, 'path', post.path)
+        if (index !== -1) {
+          relatedPosts[index].weight += 1
+        } else {
+          relatedPosts.push(relatedPost)
+        }
+      }
+    })
+  })
+
+  if (relatedPosts.length === 0) {
+    return ''
+  }
+  let result = ''
+  const hexoConfig = hexo.config
+  const config = hexo.theme.config
+
+  const limitNum = config.related_post.limit || 6
+  const dateType = config.related_post.date_type || 'created'
+  const headlineLang = this._p('post.recommend')
+
+  relatedPosts = relatedPosts.sort(compare('weight'))
+
+  if (relatedPosts.length > 0) {
+    result += '<div class="relatedPosts">'
+    result += `<div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>${headlineLang}</span></div>`
+    result += '<div class="relatedPosts-list">'
+
+    for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
+      let { cover, title, path, cover_type, created, updated, postDesc } = relatedPosts[i]
+      const { escape_html, url_for, date } = this
+      cover = cover || 'var(--default-bg-color)'
+      title = escape_html(title)
+      const className = postDesc ? 'pagination-related' : 'pagination-related no-desc'
+      result += `<a class="${className}" href="${url_for(path)}" title="${title}">`
+      if (cover_type === 'img') {
+        result += `<img class="cover" src="${url_for(cover)}" alt="cover">`
+      } else {
+        result += `<div class="cover" style="background: ${cover}"></div>`
+      }
+      if (dateType === 'created') {
+        result += `<div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> ${date(created, hexoConfig.date_format)}</div>`
+      } else {
+        result += `<div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="fas fa-history fa-fw"></i> ${date(updated, hexoConfig.date_format)}</div>`
+      }
+      result += `<div class="info-item-2">${title}</div></div>`
+
+      if (postDesc) {
+        result += `<div class="info-2"><div class="info-item-1">${postDesc}</div></div>`
+      }
+      result += '</div></a>'
+    }
+
+    result += '</div></div>'
+    return result
+  }
+})
+
+function isTagRelated (tagName, tags) {
+  return tags.some(tag => tag.name === tagName)
+}
+
+function findItem (arrayToSearch, attr, val) {
+  return arrayToSearch.findIndex(item => item[attr] === val)
+}
+
+function compare (attr) {
+  return (a, b) => b[attr] - a[attr]
+}

themes/butterfly/scripts/helpers/series.js

@@ -0,0 +1,22 @@
+'use strict'
+
+hexo.extend.helper.register('groupPosts', function () {
+  const getGroupArray = array => {
+    return array.reduce((groups, item) => {
+      const key = item.series
+      if (key) {
+        groups[key] = groups[key] || []
+        groups[key].push(item)
+      }
+      return groups
+    }, {})
+  }
+
+  const sortPosts = posts => {
+    const { orderBy = 'date', order = 1 } = this.theme.aside.card_post_series
+    if (orderBy === 'title') return posts.sort('title', order)
+    return posts.sort('date', order)
+  }
+
+  return getGroupArray(sortPosts(this.site.posts))
+})