hexo-theme-shokax 0.4.0-alpha.1 → 0.4.0-alpha.3

package/source/js/_app/library/vue.ts

@@ -3,58 +3,48 @@ import { transition } from './anime'
 import { $dom } from './dom'
 import { BODY } from '../globals/globalVars'
 import { changeTheme } from '../globals/themeColor'
-
+import { child, createChild, setDisplay } from './proto'
 export function initVue () {
-  Vue.createApp(
-    {
-      data () {
-        return {
-
-        }
-      },
-      methods: {
-        changeThemeByBtn () {
-          let c: { (): void; (): void; (): void }
-          const btn = $dom('.theme').child('.ic')
+  function changeThemeByBtn () {
+    let c: { (): void; (): void; (): void }
+    const btn = child($dom('.theme'), '.ic')
 
-          const neko = BODY.createChild('div', {
-            id: 'neko',
-            innerHTML: '<div class="planet"><div class="sun"></div><div class="moon"></div></div><div class="body"><div class="face"><section class="eyes left"><span class="pupil"></span></section><section class="eyes right"><span class="pupil"></span></section><span class="nose"></span></div></div>'
-          })
+    const neko = createChild(BODY, 'div', {
+      id: 'neko',
+      innerHTML: '<div class="planet"><div class="sun"></div><div class="moon"></div></div><div class="body"><div class="face"><section class="eyes left"><span class="pupil"></span></section><section class="eyes right"><span class="pupil"></span></section><span class="nose"></span></div></div>'
+    })
 
-          const hideNeko = () => {
-            transition(neko, {
-            // @ts-ignore
-              delay: 2500,
-              opacity: 0
-            }, () => {
-              BODY.removeChild(neko)
-            })
-          }
+    const hideNeko = () => {
+      transition(neko, {
+        // @ts-ignore
+        delay: 2500,
+        opacity: 0
+      }, () => {
+        BODY.removeChild(neko)
+      })
+    }
 
-          if (btn.hasClass('i-sun')) {
-            c = () => {
-              neko.addClass('dark')
-              changeTheme('dark')
-              $storage.set('theme', 'dark')
-              hideNeko()
-            }
-          } else {
-            neko.addClass('dark')
-            c = () => {
-              neko.removeClass('dark')
-              changeTheme()
-              $storage.set('theme', 'light')
-              hideNeko()
-            }
-          }
-          transition(neko, 1, () => {
-            setTimeout(c, 210)
-          }, () => {
-            neko.display('block')
-          })
-        }
+    if (btn.hasClass('i-sun')) {
+      c = () => {
+        neko.addClass('dark')
+        changeTheme('dark')
+        $storage.set('theme', 'dark')
+        hideNeko()
+      }
+    } else {
+      neko.addClass('dark')
+      c = () => {
+        neko.removeClass('dark')
+        changeTheme()
+        $storage.set('theme', 'light')
+        hideNeko()
       }
     }
-  ).mount('#rightNav')
+    transition(neko, 1, () => {
+      setTimeout(c, 210)
+    }, () => {
+      setDisplay(neko, 'block')
+    })
+  }
+  child($dom('#rightNav'), '.theme .ic').addEventListener('click', changeThemeByBtn)
 }

package/source/js/_app/page/fancybox.ts

@@ -1,5 +1,6 @@
 import { $dom } from '../library/dom'
 import { vendorCss, vendorJs } from '../library/loadFile'
+import { insertAfter } from '../library/proto'
 
 export const postFancybox = (p:string) => {
   if ($dom(p + ' .md img')) {
@@ -38,7 +39,7 @@ export const postFancybox = (p:string) => {
           const txt = document.createTextNode(info)
           para.appendChild(txt)
           para.addClass(captionClass)
-          element.insertAfter(para)
+          insertAfter(element, para)
         }
       })
 

package/source/js/_app/page/post.ts

@@ -4,6 +4,7 @@ import { clipBoard, showtip } from '../globals/tools'
 import { BODY } from '../globals/globalVars'
 import { pageScroll, transition } from '../library/anime'
 import { mediaPlayer } from '../player'
+import { getDisplay, setDisplay, wrapObject } from '../library/proto'
 
 export const postBeauty = () => {
   if (!$dom('.md')) { return }
@@ -57,7 +58,7 @@ export const postBeauty = () => {
   })
 
   $dom.each('.md table', (element) => {
-    element.wrapObject({
+    wrapObject(element, {
       className: 'table-container'
     })
   })
@@ -174,11 +175,11 @@ export const postBeauty = () => {
     element.addEventListener('click', (event) => {
       event.preventDefault()
       const qr = $dom('#qr')
-      if (qr.display() === 'inline-flex') {
+      if (getDisplay(qr) === 'inline-flex') {
         transition(qr, 0)
       } else {
         transition(qr, 1, () => {
-          qr.display('inline-flex')
+          setDisplay(qr, 'inline-flex')
         }) // slideUpBigIn
       }
     })

package/source/js/_app/page/search.ts

@@ -1,12 +1,17 @@
-import { BODY, setSiteSearch, siteSearch } from '../globals/globalVars'
+import { BODY, CONFIG, setSiteSearch, siteSearch } from '../globals/globalVars'
 import { transition } from '../library/anime'
 import { $dom } from '../library/dom'
+import { searchBox, configure, stats, hits, pagination } from 'instantsearch.js/es/widgets'
+import type { HitHighlightResult } from 'instantsearch.js/es/types/results'
+import instantsearch from 'instantsearch.js'
+import algoliasearch from 'algoliasearch/lite'
+import {createChild} from "../library/proto";
 
 export function algoliaSearch (pjax) {
   if (CONFIG.search === null) { return }
 
   if (!siteSearch) {
-    setSiteSearch(BODY.createChild('div', {
+    setSiteSearch(createChild(BODY, 'div', {
       id: 'search',
       innerHTML: '<div class="inner"><div class="header"><span class="icon"><i class="ic i-search"></i></span><div class="search-input-container"></div><span class="close-btn"><i class="ic i-times-circle"></i></span></div><div class="results"><div class="inner"><div id="search-stats"></div><div id="search-hits"></div><div id="search-pagination"></div></div></div></div>'
     }))
@@ -15,8 +20,9 @@ export function algoliaSearch (pjax) {
   const search = instantsearch({
     indexName: CONFIG.search.indexName,
     searchClient: algoliasearch(CONFIG.search.appID, CONFIG.search.apiKey),
+    // TODO 移除弃用函数
     searchFunction (helper) {
-      const searchInput = <HTMLInputElement><unknown>$dom('.search-input')
+      const searchInput = $dom('.search-input') as HTMLInputElement
       if (searchInput.value) {
         helper.search()
       }
@@ -29,11 +35,11 @@ export function algoliaSearch (pjax) {
 
   // Registering Widgets
   search.addWidgets([
-    instantsearch.widgets.configure({
+    configure({
       hitsPerPage: CONFIG.search.hits.per_page || 10
     }),
 
-    instantsearch.widgets.searchBox({
+    searchBox({
       container: '.search-input-container',
       placeholder: LOCAL.search.placeholder,
       // Hide default icons of algolia search
@@ -45,24 +51,24 @@ export function algoliaSearch (pjax) {
       }
     }),
 
-    instantsearch.widgets.stats({
+    stats({
       container: '#search-stats',
       templates: {
         text (data) {
           const stats = LOCAL.search.stats
-            .replace(/\$\{hits}/, data.nbHits)
-            .replace(/\$\{time}/, data.processingTimeMS)
+            .replace(/\$\{hits}/, data.nbHits.toString())
+            .replace(/\$\{time}/, data.processingTimeMS.toString())
           return stats + '<span class="algolia-powered"></span><hr>'
         }
       }
     }),
 
-    instantsearch.widgets.hits({
+    hits({
       container: '#search-hits',
       templates: {
         item (data) {
           const cats = data.categories ? '<span>' + data.categories.join('<i class="ic i-angle-right"></i>') + '</span>' : ''
-          return '<a href="' + CONFIG.root + data.path + '">' + cats + data._highlightResult.title.value + '</a>'
+          return '<a href="' + CONFIG.root + data.path + '">' + cats + (data._highlightResult.title as HitHighlightResult).value + '</a>'
         },
         empty (data) {
           return '<div id="hits-empty">' +
@@ -75,7 +81,7 @@ export function algoliaSearch (pjax) {
       }
     }),
 
-    instantsearch.widgets.pagination({
+    pagination({
       container: '#search-pagination',
       scrollTo: false,
       showFirst: false,

package/source/js/_app/page/tab.ts

@@ -1,5 +1,6 @@
 import { pageScroll } from '../library/anime'
 import { $dom } from '../library/dom'
+import { createChild } from '../library/proto'
 
 export const tabFormat = () => {
   // tab
@@ -29,13 +30,13 @@ export const tabFormat = () => {
 
     let ul = box.child('.nav ul')
     if (!ul) {
-      ul = box.createChild('div', {
+      ul = createChild(box, 'div', {
         className: 'nav',
         innerHTML: '<ul></ul>'
       }).child('ul')
     }
 
-    const li = ul.createChild('li', {
+    const li = createChild(ul, 'li', {
       innerHTML: title
     })
 

package/source/js/_app/pjax/domInit.ts

@@ -15,21 +15,22 @@ import {
 import { Loader } from '../globals/thirdparty'
 import { $dom } from '../library/dom'
 import { mediaPlayer } from '../player'
+import { child, createChild } from '../library/proto'
 
 export default function domInit () {
   $dom.each('.overview .menu > .item', (el) => {
-    siteNav.child('.menu').appendChild(el.cloneNode(true))
+    child(siteNav, '.menu').appendChild(el.cloneNode(true))
   })
 
   loadCat.addEventListener('click', Loader.vanish)
   menuToggle.addEventListener('click', sideBarToggleHandle)
   $dom('.dimmer').addEventListener('click', sideBarToggleHandle)
 
-  quickBtn.child('.down').addEventListener('click', goToBottomHandle)
-  quickBtn.child('.up').addEventListener('click', backToTopHandle)
+  child(quickBtn, '.down').addEventListener('click', goToBottomHandle)
+  child(quickBtn, '.up').addEventListener('click', backToTopHandle)
 
   if (!toolBtn) {
-    setToolBtn(siteHeader.createChild('div', {
+    setToolBtn(createChild(siteHeader, 'div', {
       id: 'tool',
       innerHTML: '<div class="item player"></div><div class="item contents"><i class="ic i-list-ol"></i></div><div class="item chat"><i class="ic i-comments"></i></div><div class="item back-to-top"><i class="ic i-arrow-up"></i><span>0%</span></div>'
     }))

package/source/js/_app/pjax/refresh.ts

@@ -1,11 +1,11 @@
 import { $dom } from '../library/dom'
 import { cardActive } from '../page/common'
-import { postBeauty } from '../page/post'
 import { pageScroll, transition } from '../library/anime'
 import { vendorCss, vendorJs } from '../library/loadFile'
 import { pjaxScript } from '../library/scriptPjax'
 import { resizeHandle } from '../globals/handles'
 import {
+  CONFIG,
   loadCat,
   menuToggle,
   setLocalHash, setLocalUrl, setOriginTitle,
@@ -53,7 +53,25 @@ export const siteRefresh = (reload) => {
   sideBarTab()
   sidebarTOC()
 
-  postBeauty()
+  import('../page/post').then(({ postBeauty }) => {
+    postBeauty()
+  })
+
+  if (__shokax_waline__ && LOCAL.ispost) {
+    import('../components/comments').then(async ({ walineComment, walinePageview, walineRecentComments }) => {
+      walineComment()
+      walinePageview()
+      await walineRecentComments()
+    })
+  }
+
+  if (__shokax_twikoo__ && LOCAL.ispost) {
+    import('../components/tcomments').then(async ({ twikooComment, twikooRecentComments }) => {
+      twikooComment()
+      await twikooRecentComments()
+    })
+  }
+
   if (__shokax_tabs__) {
     tabFormat()
   }

package/source/js/_app/pjax/siteInit.ts

@@ -1,19 +1,17 @@
 import domInit from './domInit'
 import { pjaxReload, siteRefresh } from './refresh'
 import { cloudflareInit } from '../library/scriptPjax'
-import { algoliaSearch } from '../page/search'
-import { pjax, setPjax } from '../globals/globalVars'
+import { CONFIG, pjax, setPjax } from '../globals/globalVars'
 import { autoDarkmode, themeColorListener } from '../globals/themeColor'
 import { resizeHandle, scrollHandle, visibilityListener } from '../globals/handles'
 import { pagePosition } from '../globals/tools'
 import Pjax from 'theme-shokax-pjax'
 import { initVue } from '../library/vue'
 import { lazyLoad } from 'unlazy'
-import firework from 'mouse-firework'
 
 const siteInit = () => {
-  domInit()
   initVue()
+  domInit()
 
   setPjax(new Pjax({
     selectors: [
@@ -28,7 +26,10 @@ const siteInit = () => {
   }))
 
   CONFIG.quicklink.ignores = LOCAL.ignores
-  quicklink.listen(CONFIG.quicklink)
+  import('quicklink').then(({ listen }) => {
+    listen(CONFIG.quicklink)
+  })
+
   autoDarkmode()
 
   if (__shokax_VL__) {
@@ -36,11 +37,15 @@ const siteInit = () => {
   }
   themeColorListener()
   if (__shokax_search__) {
-    algoliaSearch(pjax)
+    import('../page/search').then(({ algoliaSearch }) => {
+      algoliaSearch(pjax)
+    })
   }
 
   if (__shokax_fireworks__) {
-    firework(CONFIG.fireworks)
+    import('mouse-firework').then((firework) => {
+      firework.default(CONFIG.fireworks)
+    })
   }
   lazyLoad()
 

package/source/js/_app/player.ts

@@ -1,9 +1,10 @@
-import { originTitle } from './globals/globalVars'
+import { CONFIG, originTitle } from './globals/globalVars'
 import { showtip } from './globals/tools'
 import { pageScroll } from './library/anime'
 import { $dom } from './library/dom'
 import { $storage } from './library/storage'
 import { tabFormat } from './page/tab'
+import { createChild, getLeft, getWidth, setDisplay, setWidth } from './library/proto'
 
 let NOWPLAYING = null
 
@@ -16,7 +17,7 @@ export const mediaPlayer = (t, config?) => {
       t.player.options.btns.forEach((item) => {
         if (buttons.el[item]) { return }
 
-        buttons.el[item] = t.createChild('div', {
+        buttons.el[item] = createChild(t, 'div', {
           className: item + ' btn',
           onclick (event) {
             t.player.fetch().then(() => {
@@ -64,7 +65,7 @@ export const mediaPlayer = (t, config?) => {
 
         opt.className = item + opt.className + ' btn'
 
-        that.btns[item] = that.el.createChild('div', opt)
+        that.btns[item] = createChild(that.el, 'div', opt)
       })
 
       that.btns.volume.bar = that.btns.volume.child('.bar')
@@ -130,10 +131,10 @@ export const mediaPlayer = (t, config?) => {
     },
     update (percent) {
       controller.btns.volume.className = 'volume ' + (!source.muted && percent > 0 ? 'on' : 'off') + ' btn'
-      controller.btns.volume.bar.changeOrGetWidth(Math.floor(percent * 100) + '%')
+      setWidth(controller.btns.volume.bar, Math.floor(percent * 100) + '%')
     },
     percent (e, el) {
-      let percentage = ((e.clientX || e.changedTouches[0].clientX) - el.left()) / el.changeOrGetWidth()
+      let percentage = ((e.clientX || e.changedTouches[0].clientX) - getLeft(el)) / getWidth(el)
       percentage = Math.max(percentage, 0)
       return Math.min(percentage, 1)
     }
@@ -151,13 +152,13 @@ export const mediaPlayer = (t, config?) => {
           progress.el.remove()
         }
 
-        progress.el = current.createChild('div', {
+        progress.el = createChild(current, 'div', {
           className: 'progress'
         });
 
         (progress.el as HTMLElement).setAttribute('data-dtime', utils.secondToTime(0))
 
-        progress.bar = progress.el.createChild('div', {
+        progress.bar = createChild(progress.el, 'div', {
           className: 'bar'
         })
 
@@ -169,14 +170,14 @@ export const mediaPlayer = (t, config?) => {
       }
     },
     update (percent) {
-      progress.bar.changeOrGetWidth(Math.floor(percent * 100) + '%');
+      setWidth(progress.bar, Math.floor(percent * 100) + '%');
       (progress.el as HTMLElement).setAttribute('data-ptime', utils.secondToTime(percent * source.duration))
     },
     seeking (type) {
       if (type) { progress.el.addClass('seeking') } else { progress.el.removeClass('seeking') }
     },
     percent (e, el) {
-      let percentage = ((e.clientX || e.changedTouches[0].clientX) - el.left()) / el.changeOrGetWidth()
+      let percentage = ((e.clientX || e.changedTouches[0].clientX) - getLeft(el)) / getWidth(el)
       percentage = Math.max(percentage, 0)
       return Math.min(percentage, 1)
     },
@@ -258,7 +259,7 @@ export const mediaPlayer = (t, config?) => {
         const id = 'list-' + t.player._id + '-' + item.group
         let tab = $dom('#' + id)
         if (!tab) {
-          tab = el.createChild('div', {
+          tab = createChild(el, 'div', {
             id,
             className: t.player.group ? 'tab' : '',
             innerHTML: '<ol></ol>'
@@ -269,7 +270,7 @@ export const mediaPlayer = (t, config?) => {
           }
         }
 
-        item.el = tab.child('ol').createChild('li', {
+        item.el = createChild(tab.child('ol'), 'li', {
           title: item.name + ' - ' + item.artist,
           innerHTML: '<span class="info"><span>' + item.name + '</span><span>' + item.artist + '</span></span>',
           onclick (event) {
@@ -329,7 +330,7 @@ export const mediaPlayer = (t, config?) => {
     create () {
       if (this.el) { return }
 
-      this.el = t.createChild('div', {
+      this.el = createChild(t, 'div', {
         className: 'player-info',
         innerHTML: (t.player.options.type === 'audio' ? '<div class="preview"></div>' : '') + '<div class="controller"></div><div class="playlist"></div>'
       }, 'after')
@@ -469,7 +470,7 @@ export const mediaPlayer = (t, config?) => {
         this.pause()
       }
       for (const el in buttons.el) {
-        buttons.el[el].display(d)
+        setDisplay(buttons.el[el], d)
       }
       return this
     },
@@ -662,7 +663,7 @@ export const mediaPlayer = (t, config?) => {
           lrc += '<p' + (index === 0 ? ' class="current"' : '') + '>' + line[1] + '</p>'
         })
 
-        this.el = box.createChild('div', {
+        this.el = createChild(box, 'div', {
           className: 'inner',
           innerHTML: lrc
         }, 'replace')
@@ -783,7 +784,7 @@ export const mediaPlayer = (t, config?) => {
     buttons.create()
 
     // 初始化audio or video
-    source = t.createChild(t.player.options.type, events)
+    source = createChild(t, t.player.options.type, events)
     // 初始化播放列表、预览、控件按钮等
     info.create()
 

package/scripts/filters/locals.d.ts

@@ -1 +0,0 @@
-declare const fmtNum: (num: any) => any;

package/scripts/filters/locals.ts

@@ -1,59 +0,0 @@
-
-// @ts-ignore
-const fmtNum = (num) => {
-  return num < 10 ? '0' + num : num
-}
-
-hexo.extend.filter.register('template_locals', (locals:localsPlus) => {
-  const { config } = hexo
-  const { __, theme } = locals
-  // @ts-ignore
-  const { i18n } = hexo.theme
-
-  const pangu = {
-    spacing: (data) => {
-      return data
-    }
-  }
-
-  // Language & Config
-  // 根据主题配置的 Creative Commons 许可证生成链接
-  locals.alternate = theme.alternate
-  locals.title = pangu.spacing(__('title') !== 'title' ? __('title') : config.title)
-  locals.subtitle = pangu.spacing(__('subtitle') !== 'subtitle' ? __('subtitle') : config.subtitle)
-  locals.author = __('author') !== 'author' ? __('author') : config.author
-  locals.description = pangu.spacing(__('description') !== 'description' ? __('description') : config.description)
-  locals.languages = [...i18n.languages]
-  locals.languages.splice(locals.languages.indexOf('default'), 1)
-  locals.page.lang = locals.page.lang || locals.page.language
-  locals.hostname = new URL(config.url).hostname || config.url
-
-  // Creative Commons
-  // 根据主题配置的 Creative Commons 许可证生成链接
-  if (theme.creative_commons.license === 'zero') {
-    locals.ccURL = 'https://creativecommons.org/' + 'publicdomain/zero/1.0/' + (theme.creative_commons.language || '')
-  } else {
-    locals.ccURL = 'https://creativecommons.org/' + 'licenses/' + theme.creative_commons.license + '/4.0/' + (theme.creative_commons.language || '')
-  }
-
-  if (locals.page.title) {
-    locals.page.title = pangu.spacing(locals.page.title)
-  }
-  locals.page.lastcat = ''
-  if (locals.page.categories) {
-    locals.page.categories.map((cat) => {
-      if (cat.name) {
-        cat.name = locals.page.lastcat = pangu.spacing(cat.name)
-      }
-      return cat
-    })
-  }
-
-  if (locals.page.category) {
-    locals.page.title = pangu.spacing(locals.page.category)
-  }
-
-  if (locals.page.month) {
-    locals.page.month = fmtNum(locals.page.month)
-  }
-})

package/scripts/filters/post.ts

@@ -1,6 +0,0 @@
-/* global hexo */
-
-hexo.extend.filter.register('after_post_render', (data) => {
-  // 使用正则表达式将<img>标签的src属性替换为data-src属性
-  data.content = data.content.replace(/(<img[^>]*) src=/img, '$1 loading="lazy" data-src=')
-}, 0)

package/scripts/generaters/archive.d.ts

@@ -1 +0,0 @@
-export {};