hexo-theme-shokax 0.5.0-dev-f787465 → 0.5.0-dev-5c5076b

package/README.md

@@ -9,6 +9,7 @@
 - [ ] 引入新的 Inject 类技术 (长期)
 - [ ] 引入新的工作流程
 - [ ] 引入 CI 自动测试
+- [ ] 进行组件化重构 & 引入 Vue
 - [ ] 重构 player (暂时移除)
 - [ ] 优化 menu 配置格式
 - [ ] 优化和异步化 Smart Bundle 技术

package/UsageRestrictions.md

@@ -16,7 +16,7 @@
 ## 处理方式
 如果您违反了上述使用限制和AGPLv3的任何规定，ShokaX 项目组保留采取以下措施之一或多个的权利：
 - 发出警告通知并要求立即纠正违规行为；(根据`AGPLv3 八`)
-- 暂停或终止您对 ShokaX 及其子项目的使用权限并取消GPLv3授予您的权利；(根据`AGPLv3 八`)
+- 暂停或终止您对 ShokaX 及其子项目的使用权限并取消AGPLv3授予您的权利；(根据`AGPLv3 八`)
 - 取消您获取 ShokaX 社区支持和进行协作的权利；(社区管理)
 - 追究法律责任，包括要求赔偿因违规行为给 ShokaX 项目组造成的损失。(依照相关法律而定)
 

package/_config.yml

@@ -343,9 +343,6 @@ search:
   hits:
     per_page: 10
 
-# Dependencies: https://github.com/amehime/hexo-renderer-multi-markdown-it
-pangu: false
-
 #! ---------------------------------------------------------------
 #! DO NOT EDIT THE FOLLOWING `vendors` SETTINGS
 #! UNLESS YOU KNOW WHAT YOU ARE DOING

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hexo-theme-shokax",
-    "version": "0.5.0-dev-f787465",
+    "version": "0.5.0-dev-5c5076b",
     "description": "a hexo theme based on shoka",
     "main": "index.js",
     "repository": "https://github.com/theme-shoka-x/hexo-theme-shokaX",

package/source/js/_app/components/comments.ts

@@ -23,7 +23,6 @@ export const walineComment = function () {
 }
 
 export const walinePageview = function () {
-  // TODO waline 上游此模块存在问题
   pageviewCount({
     serverURL: CONFIG.waline.serverURL,
     path: window.location.pathname
@@ -37,7 +36,6 @@ export const walineRecentComments = async function () {
     serverURL: CONFIG.waline.serverURL.replace(/\/+$/, ''),
     count: 10
   })
-  // TODO 疑似 waline API 返回格式与文档不一致，需要确认是否为上游问题
   // @ts-ignore
   comments.data.forEach(function (item) {
     let cText = (item.orig.length > 50) ? item.orig.substring(0, 50) + '...' : item.orig

package/source/js/_app/components/sidebar.ts

@@ -3,14 +3,12 @@
 import { CONFIG, Container, diffY, menuToggle, showContents, sideBar } from '../globals/globalVars'
 import { clipBoard } from '../globals/tools'
 import { pageScroll, transition } from '../library/anime'
-import { $dom } from '../library/dom'
-import initProto, { getHeight, setDisplay } from '../library/proto'
+import { getHeight, setDisplay } from '../library/proto'
 
-initProto()
 export const sideBarToggleHandle = (event:Event, force?:number) => {
-  if (sideBar.hasClass('on')) {
-    sideBar.removeClass('on')
-    menuToggle.removeClass('close')
+  if (sideBar.classList.contains('on')) {
+    sideBar.classList.remove('on')
+    menuToggle.classList.remove('close')
     if (force) {
       // @ts-ignore
       // noinspection JSConstantReassignment
@@ -25,8 +23,8 @@ export const sideBarToggleHandle = (event:Event, force?:number) => {
       sideBar.style = ''
     } else {
       transition(sideBar, 'slideRightIn', () => {
-        sideBar.addClass('on')
-        menuToggle.addClass('close')
+        sideBar.classList.add('on')
+        menuToggle.classList.add('close')
       })
     }
   }
@@ -61,29 +59,29 @@ export const sideBarTab = () => {
     const text = document.createTextNode(element.getAttribute('data-title'))
     span.appendChild(text)
     tab.appendChild(span)
-    tab.addClass(item + ' item')
+    tab.classList.add(item + ' item')
 
     if (active) {
-      element.addClass(active)
-      tab.addClass(active)
+      element.classList.add(active)
+      tab.classList.add(active)
     } else {
-      element.removeClass('active')
+      element.classList.remove('active')
     }
     tab.addEventListener('click', (event) => {
       const target = event.currentTarget as HTMLElement
-      if (target.hasClass('active')) return
+      if (target.classList.contains('active')) return
 
-      sideBar.find('.tab .item').forEach((element) => {
-        element.removeClass('active')
+      sideBar.querySelectorAll('.tab .item').forEach((element) => {
+        element.classList.remove('active')
       })
 
-      sideBar.find('.panel').forEach((element) => {
-        element.removeClass('active')
+      sideBar.querySelectorAll('.panel').forEach((element) => {
+        element.classList.remove('active')
       })
 
-      sideBar.querySelector('.panel.' + target.className.replace(' item', '')).addClass('active')
+      sideBar.querySelector('.panel.' + target.className.replace(' item', '')).classList.add('active')
 
-      target.addClass('active')
+      target.classList.add('active')
     })
 
     list.appendChild(tab)
@@ -104,39 +102,39 @@ export const sidebarTOC = () => {
 
     if (!target) return
 
-    if (target.hasClass('current')) {
+    if (target.classList.contains('current')) {
       return
     }
 
-    $dom.each('.toc .active', (element) => {
-      element && element.removeClass('active current')
+    document.querySelectorAll('.toc .active').forEach((element) => {
+      element && element.classList.remove('active current')
     })
 
     sections.forEach((element) => {
-      element && element.removeClass('active')
+      element && element.classList.remove('active')
     })
 
-    target.addClass('active current')
-    sections[index] && sections[index].addClass('active')
+    target.classList.add('active current')
+    sections[index] && sections[index].classList.add('active')
 
     let parent = <Element> target.parentNode
 
     while (!parent.matches('.contents')) {
       if (parent.matches('li')) {
-        parent.addClass('active')
+        parent.classList.add('active')
         const t = document.getElementById(decodeURIComponent(parent.querySelector('a.toc-link').getAttribute('href').replace('#', '')))
         if (t) {
-          t.addClass('active')
+          t.classList.add('active')
         }
       }
       parent = <Element> parent.parentNode
     }
     // Scrolling to center active TOC element if TOC content is taller than viewport.
-    if (getComputedStyle(sideBar).display !== 'none' && tocElement.hasClass('active')) {
+    if (getComputedStyle(sideBar).display !== 'none' && tocElement.classList.contains('active')) {
       pageScroll((tocElement as HTMLElement), target.offsetTop - ((tocElement as HTMLElement).offsetHeight / 4))
     }
   }
-  const navItems = $dom.all('.contents li')
+  const navItems = document.querySelectorAll<HTMLElement>('.contents li')
 
   if (navItems.length < 1) {
     return
@@ -222,18 +220,19 @@ export const goToCommentHandle = () => {
 }
 
 export const menuActive = () => {
-  $dom.each('.menu .item:not(.title)', (element) => {
+  document.querySelectorAll('.menu .item:not(.title)').forEach((element) => {
     const target = <HTMLAnchorElement> element.querySelector('a[href]')
-    const parentItem = element.parentNode.parentNode
+    const parentItem = element.parentNode.parentNode as HTMLElement
     if (!target) return
     const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '')
     const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname)
     const active = !target.onclick && target.hostname === location.hostname && (isSamePath || isSubPath)
-    element.toggleClass('active', active)
-    if (element.parentNode.querySelector('.active') && parentItem.hasClass('dropdown')) {
-      parentItem.removeClass('active').addClass('expand')
+    element.classList.toggle('active', active)
+    if (element.parentNode.querySelector('.active') && parentItem.classList.contains('dropdown')) {
+      parentItem.classList.remove('active')
+      parentItem.classList.add('expand')
     } else {
-      parentItem.removeClass('expand')
+      parentItem.classList.remove('expand')
     }
   })
 }

package/source/js/_app/globals/globalVars.ts

@@ -1,7 +1,4 @@
-import initProto from '../library/proto'
-
 export const CONFIG = shokax_CONFIG
-initProto()
 export const statics = CONFIG.statics.indexOf('//') > 0 ? CONFIG.statics : CONFIG.root
 export const scrollAction: { x: number, y: number } = { x: 0, y: 0 }
 export let diffY = 0

package/source/js/_app/globals/handles.ts

@@ -63,12 +63,12 @@ export const scrollHandle = () => {
   }
 
   // 控制导航栏的显示隐藏
-  siteNav.toggleClass('show', SHOW)
+  siteNav.classList.toggle('show', SHOW)
   // 控制网站 logo 的显示隐藏
-  toolBtn.toggleClass('affix', startScroll)
+  toolBtn.classList.toggle('affix', startScroll)
   // 控制侧边栏的显示隐藏，当滚动高度大于 headerHight 且窗口宽度大于 991px 时显示
-  siteBrand.toggleClass('affix', startScroll)
-  sideBar.toggleClass('affix', window.scrollY > headerHight && document.body.offsetWidth >= 991)
+  siteBrand.classList.toggle('affix', startScroll)
+  sideBar.classList.toggle('affix', window.scrollY > headerHight && document.body.offsetWidth >= 991)
   // 初始化滚动时导航栏的显示方向
   if (typeof scrollAction.y === 'undefined') {
     scrollAction.y = window.scrollY
@@ -77,11 +77,11 @@ export const scrollHandle = () => {
 
   // 控制滑动时导航栏显示
   if (diffY < 0) {
-    siteNav.removeClass('up')
-    siteNav.toggleClass('down', SHOW)
+    siteNav.classList.remove('up')
+    siteNav.classList.toggle('down', SHOW)
   } else if (diffY > 0) {
-    siteNav.removeClass('down')
-    siteNav.toggleClass('up', SHOW)
+    siteNav.classList.remove('down')
+    siteNav.classList.toggle('up', SHOW)
   } else { /* empty */ }
   scrollAction.y = window.scrollY
   // 计算滚动百分比
@@ -91,7 +91,7 @@ export const scrollHandle = () => {
     backToTop.querySelector('span').innerText = scrollPercent
   }
   // 更新百分比进度条的宽度
-  if (document.getElementById('sidebar').hasClass('affix') || document.getElementById('sidebar').hasClass('on')) {
+  if (document.getElementById('sidebar').classList.contains('affix') || document.getElementById('sidebar').classList.contains('on')) {
     setWidth(document.querySelector('.percent'), scrollPercent)
   }
 }

package/source/js/_app/globals/themeColor.ts

@@ -1,4 +1,3 @@
-import { $storage } from '../library/storage'
 import { CONFIG, HTML } from './globalVars'
 
 /**
@@ -8,12 +7,12 @@ export const changeTheme = (type?: string) => {
   const btn = document.querySelector('.theme .ic')
   if (type === 'dark') {
     HTML.setAttribute('data-theme', type)
-    btn.removeClass('i-sun')
-    btn.addClass('i-moon')
+    btn.classList.remove('i-sun')
+    btn.classList.add('i-moon')
   } else {
     HTML.removeAttribute('data-theme')
-    btn.removeClass('i-moon')
-    btn.addClass('i-sun')
+    btn.classList.remove('i-moon')
+    btn.classList.add('i-sun')
   }
 }
 
@@ -52,7 +51,7 @@ export const themeColorListener = () => {
     }
   })
 
-  const t = $storage.get('theme')
+  const t = localStorage.getItem('theme')
   if (t) {
     changeTheme(t)
   } else {

package/source/js/_app/globals/thirdparty.ts

@@ -9,7 +9,7 @@ export const Loader = {
   lock: false,
   show () {
     clearTimeout(this.timer)
-    document.body.removeClass('loaded')
+    document.body.classList.remove('loaded')
     loadCat.setAttribute('style', 'display:block')
     Loader.lock = false
   },
@@ -26,7 +26,7 @@ export const Loader = {
     if (CONFIG.loader.start) {
       transition(loadCat, 0)
     }
-    document.body.addClass('loaded')
+    document.body.classList.add('loaded')
     Loader.lock = true
   }
 }

package/source/js/_app/globals/tools.ts

@@ -1,6 +1,4 @@
 import { pageScroll } from '../library/anime'
-import { $dom } from '../library/dom'
-import { $storage } from '../library/storage'
 import { BODY, CONFIG, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars'
 import { createChild } from '../library/proto'
 
@@ -16,7 +14,7 @@ export const showtip = (msg: string): void | never => {
   })
 
   setTimeout(() => {
-    tipbox.addClass('hide')
+    tipbox.classList.add('hide')
     setTimeout(() => {
       BODY.removeChild(tipbox)
     }, 300)
@@ -27,7 +25,7 @@ export const pagePosition = () => {
   // 判断配置项是否开启了自动记录滚动位置
   if (CONFIG.auto_scroll) {
     // 将当前页面的滚动位置存入本地缓存
-    $storage.set(LOCAL_URL, String(scrollAction.y))
+    localStorage.setItem(LOCAL_URL, String(scrollAction.y))
   }
 }
 
@@ -37,14 +35,14 @@ export const positionInit = (comment?: boolean) => {
 
   let target = null
   if (LOCAL_HASH) {
-    $storage.del(LOCAL_URL)
+    localStorage.removeItem(LOCAL_URL)
     return
   }
 
   if (anchor) {
     target = document.querySelector(decodeURI(anchor))
   } else {
-    target = CONFIG.auto_scroll ? parseInt($storage.get(LOCAL_URL)) : 0
+    target = CONFIG.auto_scroll ? parseInt(localStorage.getItem(LOCAL_URL)) : 0
   }
 
   if (target) {

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

@@ -1,5 +1,3 @@
-import { $dom } from './dom'
-
 export const insertAfter = function (el: Element, element: HTMLElement): void {
   const parent = el.parentNode
   if (parent.lastChild === el) {
@@ -70,68 +68,3 @@ export const setDisplay = function (el: HTMLElement, d: string): HTMLElement {
   el.style.display = d
   return el
 }
-
-export default function initProto () {
-  Object.assign(HTMLElement.prototype, {
-    /**
-   * 找到此节点所有符合selector选择器的子节点
-     * @deprecated Will be removed in the v0.5
-   */
-    find (selector: string): NodeListOf<HTMLElement> {
-      return $dom.all(selector, this)
-    },
-    /**
-     * 这个方法接受三个参数：
-     * type 表示操作类型（'add'、'remove'、'toggle'），
-     * className 是一个或多个要操作的类名，
-     * display 是一个可选的布尔值，用于在执行切换操作时指定类名是否应显示或隐藏。
-     * 该方法会根据操作类型执行相应的类名操作。
-     * @deprecated Will be removed in the v0.5
-   */
-    _class (type: string, className: string, display?: boolean): void {
-      const classNames = className.indexOf(' ') ? className.split(' ') : [className]
-      classNames.forEach((name) => {
-        if (type === 'toggle') {
-          this.classList.toggle(name, display)
-        } else {
-          this.classList[type](name)
-        }
-      })
-    },
-    /**
-     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'add'，然后执行添加类名的操作。
-     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
-     * @deprecated Will be removed in the v0.5
-     */
-    addClass (className: string): EventTarget {
-      this._class('add', className)
-      return this
-    },
-    /**
-     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'remove'，然后执行移除类名的操作。
-     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
-     * @deprecated Will be removed in the v0.5
-     */
-    removeClass (className: string): EventTarget {
-      this._class('remove', className)
-      return this
-    },
-    /**
-     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'toggle'，然后执行切换类名的操作。
-     * 如果提供了 display 参数，它将根据布尔值决定是否显示或隐藏类名。
-     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
-     * @deprecated Will be removed in the v0.5
-     */
-    toggleClass (className: string, display?: boolean): EventTarget {
-      this._class('toggle', className, display)
-      return this
-    },
-    /**
-     * 这个方法返回一个布尔值，表示元素是否包含指定的类名。
-     * @deprecated Will be removed in the v0.5
-     */
-    hasClass (className: string): boolean {
-      return this.classList.contains(className)
-    }
-  })
-}

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

@@ -1,4 +1,3 @@
-import { $storage } from './storage'
 import { transition } from './anime'
 import { BODY } from '../globals/globalVars'
 import { changeTheme } from '../globals/themeColor'
@@ -23,19 +22,19 @@ export function initVue () {
       })
     }
 
-    if (btn.hasClass('i-sun')) {
+    if (btn.classList.contains('i-sun')) {
       c = () => {
-        neko.addClass('dark')
+        neko.classList.add('dark')
         changeTheme('dark')
-        $storage.set('theme', 'dark')
+        localStorage.setItem('theme', 'dark')
         hideNeko()
       }
     } else {
-      neko.addClass('dark')
+      neko.classList.add('dark')
       c = () => {
-        neko.removeClass('dark')
+        neko.classList.remove('dark')
         changeTheme()
-        $storage.set('theme', 'light')
+        localStorage.setItem('theme', 'light')
         hideNeko()
       }
     }

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

@@ -1,14 +1,12 @@
-import { $dom } from '../library/dom'
-
 export const cardActive = () => {
   if (!document.querySelector('.index.wrap')) { return }
   const io = new IntersectionObserver((entries) => {
     entries.forEach((article) => {
-      if (article.target.hasClass('show')) {
+      if (article.target.classList.contains('show')) {
         io.unobserve(article.target)
       } else {
         if (article.isIntersecting || article.intersectionRatio > 0) {
-          article.target.addClass('show')
+          article.target.classList.add('show')
           io.unobserve(article.target)
         }
       }
@@ -18,25 +16,25 @@ export const cardActive = () => {
     threshold: [0.3]
   })
 
-  $dom.each('.index.wrap article.item, .index.wrap section.item', (article) => {
+  document.querySelectorAll('.index.wrap article.item, .index.wrap section.item').forEach((article) => {
     io.observe(article)
   })
 
-  document.querySelector('.index.wrap .item:first-child').addClass('show')
+  document.querySelector('.index.wrap .item:first-child').classList.add('show')
 
-  $dom.each('.cards .item', (element) => {
+  document.querySelectorAll('.cards .item').forEach((element) => {
     ['mouseenter', 'touchstart'].forEach((item) => {
       element.addEventListener(item, () => {
         const cardEle = document.querySelector('.cards .item.active')
         if (cardEle) {
-          cardEle.removeClass('active')
+          cardEle.classList.remove('active')
         }
-        element.addClass('active')
+        element.classList.add('active')
       }, { passive: true })
     });
     ['mouseleave'].forEach((item) => {
       element.addEventListener(item, () => {
-        element.removeClass('active')
+        element.classList.remove('active')
       }, { passive: true })
     })
   })

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

@@ -1,4 +1,3 @@
-import { $dom } from '../library/dom'
 import { insertAfter } from '../library/proto'
 
 // TODO 使用PhotoSwipe替换Fancybox
@@ -6,7 +5,7 @@ export const postFancybox = (p:string) => {
   if (document.querySelector(p + ' .md img')) {
     const q = jQuery.noConflict()
 
-    $dom.each(p + ' p.gallery', (element) => {
+    document.querySelectorAll(p + ' p.gallery').forEach((element) => {
       const box = document.createElement('div')
       box.className = 'gallery'
       box.setAttribute('data-height', String(element.getAttribute('data-height') || 220))
@@ -17,7 +16,7 @@ export const postFancybox = (p:string) => {
       element.remove()
     })
 
-    $dom.each(p + ' .md img:not(.emoji):not(.vemoji)', (element) => {
+    document.querySelectorAll(p + ' .md img:not(.emoji):not(.vemoji)').forEach((element) => {
       const $image = q(element)
       const imageLink = $image.attr('data-src') || $image.attr('src') // 替换
       const $imageWrapLink = $image.wrap('<a class="fancybox" href="' + imageLink + '" itemscope itemtype="https://schema.org/ImageObject" itemprop="url"></a>').parent('a')
@@ -35,12 +34,12 @@ export const postFancybox = (p:string) => {
         const para = document.createElement('span')
         const txt = document.createTextNode(info)
         para.appendChild(txt)
-        para.addClass(captionClass)
+        para.classList.add(captionClass)
         insertAfter(element, para)
       }
     })
 
-    $dom.each(p + ' div.gallery', (el, i) => {
+    document.querySelectorAll(p + ' div.gallery').forEach((el, i) => {
       // @ts-ignore
       q(el).justifiedGallery({
         rowHeight: q(el).data('height') || 120,

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

@@ -1,9 +1,7 @@
-import { $dom } from '../library/dom'
 import { postFancybox } from './fancybox'
 import { clipBoard, showtip } from '../globals/tools'
 import { CONFIG, BODY } from '../globals/globalVars'
 import { pageScroll, transition } from '../library/anime'
-import { mediaPlayer } from '../player'
 import { getDisplay, setDisplay, wrapObject } from '../library/proto'
 
 export const postBeauty = () => {
@@ -43,31 +41,31 @@ export const postBeauty = () => {
     }
   }
 
-  $dom.each('li ruby', (element) => {
-    let parent = element.parentNode
+  document.querySelectorAll('li ruby').forEach((element) => {
+    let parent = element.parentNode as HTMLElement
     // @ts-ignore
     if (element.parentNode.tagName !== 'LI') {
-      parent = element.parentNode.parentNode
+      parent = element.parentNode.parentNode as HTMLElement
     }
-    parent.addClass('ruby')
+    parent.classList.add('ruby')
   })
 
-  $dom.each('ol[start]', (element) => {
+  document.querySelectorAll('ol[start]').forEach((element) => {
     // @ts-ignore
     element.style.counterReset = 'counter ' + parseInt(element.getAttribute('start') - 1)
   })
 
-  $dom.each('.md table', (element) => {
+  document.querySelectorAll<HTMLElement>('.md table').forEach((element) => {
     wrapObject(element, {
       className: 'table-container'
     })
   })
 
-  $dom.each('.highlight > .table-container', (element) => {
+  document.querySelectorAll('.highlight > .table-container').forEach((element) => {
     element.className = 'code-container'
   })
 
-  $dom.each('figure.highlight', (element) => {
+  document.querySelectorAll<HTMLElement>('figure.highlight').forEach((element) => {
     const code_container = element.querySelector('.code-container') as HTMLElement
     const caption = element.querySelector('figcaption')
 
@@ -80,7 +78,7 @@ export const postBeauty = () => {
       copyBtn.addEventListener('click', (event) => {
         const target = <HTMLElement>event.currentTarget
         let comma = ''; let code = ''
-        code_container.find('pre').forEach((line) => {
+        code_container.querySelectorAll('pre').forEach((line) => {
           code += comma + line.innerText
           comma = '\n'
         })
@@ -101,61 +99,61 @@ export const postBeauty = () => {
     const breakBtn = element.querySelector('.breakline-btn')
     breakBtn.addEventListener('click', (event) => {
       const target = event.currentTarget as HTMLElement
-      if (element.hasClass('breakline')) {
-        element.removeClass('breakline')
+      if (element.classList.contains('breakline')) {
+        element.classList.remove('breakline')
         target.querySelector('.ic').className = 'ic i-align-left'
       } else {
-        element.addClass('breakline')
+        element.classList.add('breakline')
         target.querySelector('.ic').className = 'ic i-align-justify'
       }
     })
 
     const fullscreenBtn = element.querySelector('.fullscreen-btn')
     const removeFullscreen = () => {
-      element.removeClass('fullscreen')
+      element.classList.remove('fullscreen')
       element.scrollTop = 0
-      BODY.removeClass('fullscreen')
+      BODY.classList.remove('fullscreen')
       fullscreenBtn.querySelector('.ic').className = 'ic i-expand'
     }
     const fullscreenHandle = () => {
-      if (element.hasClass('fullscreen')) {
+      if (element.classList.contains('fullscreen')) {
         removeFullscreen()
-        if (code_container && code_container.find('tr').length > 15) {
+        if (code_container && code_container.querySelectorAll('tr').length > 15) {
           const showBtn = code_container.querySelector('.show-btn')
           code_container.style.maxHeight = '300px'
-          showBtn.removeClass('open')
+          showBtn.classList.remove('open')
         }
         pageScroll(element)
       } else {
-        element.addClass('fullscreen')
-        BODY.addClass('fullscreen')
+        element.classList.add('fullscreen')
+        BODY.classList.add('fullscreen')
         fullscreenBtn.querySelector('.ic').className = 'ic i-compress'
-        if (code_container && code_container.find('tr').length > 15) {
+        if (code_container && code_container.querySelectorAll('tr').length > 15) {
           const showBtn = code_container.querySelector('.show-btn')
           code_container.style.maxHeight = ''
-          showBtn.addClass('open')
+          showBtn.classList.add('open')
         }
       }
     }
     fullscreenBtn.addEventListener('click', fullscreenHandle)
     caption && caption.addEventListener('click', fullscreenHandle)
 
-    if (code_container && code_container.find('tr').length > 15) {
+    if (code_container && code_container.querySelectorAll('tr').length > 15) {
       code_container.style.maxHeight = '300px'
       code_container.insertAdjacentHTML('beforeend', '<div class="show-btn"><i class="ic i-angle-down"></i></div>')
       const showBtn = code_container.querySelector('.show-btn')
 
       const hideCode = () => {
         code_container.style.maxHeight = '300px'
-        showBtn.removeClass('open')
+        showBtn.classList.remove('open')
       }
       const showCode = () => {
         code_container.style.maxHeight = ''
-        showBtn.addClass('open')
+        showBtn.classList.add('open')
       }
 
       showBtn.addEventListener('click', () => {
-        if (showBtn.hasClass('open')) {
+        if (showBtn.classList.contains('open')) {
           removeFullscreen()
           hideCode()
           pageScroll(code_container)
@@ -166,12 +164,12 @@ export const postBeauty = () => {
     }
   })
 
-  $dom.each('pre.mermaid > svg', (element) => {
+  document.querySelectorAll('pre.mermaid > svg').forEach((element) => {
     const temp = <SVGAElement><unknown>element
     temp.style.maxWidth = ''
   })
 
-  $dom.each('.reward button', (element) => {
+  document.querySelectorAll('.reward button').forEach((element) => {
     element.addEventListener('click', (event) => {
       event.preventDefault()
       const qr = document.getElementById('qr')
@@ -187,47 +185,47 @@ export const postBeauty = () => {
 
   // quiz
   if (__shokax_quiz__) {
-    $dom.each('.quiz > ul.options li', (element) => {
+    document.querySelectorAll('.quiz > ul.options li').forEach((element) => {
       element.addEventListener('click', () => {
-        if (element.hasClass('correct')) {
-          element.toggleClass('right')
-          element.parentNode.parentNode.addClass('show')
+        if (element.classList.contains('correct')) {
+          element.classList.toggle('right');
+          (element.parentNode.parentNode as HTMLElement).classList.add('show')
         } else {
-          element.toggleClass('wrong')
+          element.classList.toggle('wrong')
         }
       })
     })
 
-    $dom.each('.quiz > p', (element) => {
+    document.querySelectorAll('.quiz > p').forEach((element) => {
       element.addEventListener('click', () => {
-        element.parentNode.toggleClass('show')
+        (element.parentNode as HTMLElement).classList.toggle('show')
       })
     })
 
-    $dom.each('.quiz > p:first-child', (element) => {
-      const quiz = element.parentNode
+    document.querySelectorAll('.quiz > p:first-child').forEach((element) => {
+      const quiz = element.parentNode as HTMLElement
       let type = 'choice'
-      if (quiz.hasClass('true') || quiz.hasClass('false')) {
+      if (quiz.classList.contains('true') || quiz.classList.contains('false')) {
         type = 'true_false'
       }
-      if (quiz.hasClass('multi')) {
+      if (quiz.classList.contains('multi')) {
         type = 'multiple'
       }
-      if (quiz.hasClass('fill')) {
+      if (quiz.classList.contains('fill')) {
         type = 'gap_fill'
       }
-      if (quiz.hasClass('essay')) {
+      if (quiz.classList.contains('essay')) {
         type = 'essay'
       }
       element.setAttribute('data-type', LOCAL.quiz[type])
     })
 
-    $dom.each('.quiz .mistake', (element) => {
+    document.querySelectorAll('.quiz .mistake').forEach((element) => {
       element.setAttribute('data-type', LOCAL.quiz.mistake)
     })
   }
 
-  $dom.each('div.tags a', (element) => {
+  document.querySelectorAll('div.tags a').forEach((element) => {
     element.className = ['primary', 'success', 'info', 'warning', 'danger'][Math.floor(Math.random() * 5)]
   })
 

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

@@ -101,7 +101,6 @@ export function algoliaSearch () {
     }
   })
   document.querySelector('.close-btn').addEventListener('click', onPopupClose)
-  // window.addEventListener('pjax:success', onPopupClose)
   window.addEventListener('keyup', (event) => {
     if (event.key === 'Escape') {
       onPopupClose()

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

@@ -1,11 +1,10 @@
 import { pageScroll } from '../library/anime'
-import { $dom } from '../library/dom'
 import { createChild } from '../library/proto'
 
 export const tabFormat = () => {
   // tab
   let first_tab:boolean
-  $dom.each('div.tab', (element) => {
+  document.querySelectorAll('div.tab').forEach((element) => {
     if (element.getAttribute('data-ready')) { return }
 
     const id = element.getAttribute('data-id')
@@ -41,17 +40,17 @@ export const tabFormat = () => {
     })
 
     if (first_tab) {
-      li.addClass('active')
-      element.addClass('active')
+      li.classList.add('active')
+      element.classList.add('active')
     }
 
     li.addEventListener('click', (event) => {
-      const target = event.currentTarget
-      box.find('.active').forEach((el) => {
-        el.removeClass('active')
+      const target = event.currentTarget as HTMLElement
+      box.querySelectorAll('.active').forEach((el) => {
+        el.classList.remove('active')
       })
-      element.addClass('active')
-      target.addClass('active')
+      element.classList.add('active')
+      target.classList.add('active')
     })
 
     box.appendChild(element)

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

@@ -9,16 +9,13 @@ import {
   showContents,
   siteHeader,
   siteNav,
-  toolBtn,
-  toolPlayer
+  toolBtn
 } from '../globals/globalVars'
 import { Loader } from '../globals/thirdparty'
-import { $dom } from '../library/dom'
-import { mediaPlayer } from '../player'
 import { createChild } from '../library/proto'
 
 export default function domInit () {
-  $dom.each('.overview .menu > .item', (el) => {
+  document.querySelectorAll('.overview .menu > .item').forEach((el) => {
     siteNav.querySelector('.menu').appendChild(el.cloneNode(true))
   })
 

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

@@ -1,14 +1,13 @@
 import domInit from './domInit'
-import { siteRefresh } from './refresh'
-import { cloudflareInit } from '../components/cloudflare'
-import { BODY, CONFIG, setSiteSearch, siteSearch } from '../globals/globalVars'
-import { autoDarkmode, themeColorListener } from '../globals/themeColor'
-import { resizeHandle, scrollHandle, visibilityListener } from '../globals/handles'
-import { pagePosition } from '../globals/tools'
-import { initVue } from '../library/vue'
-import { $dom } from '../library/dom'
-import { createChild } from '../library/proto'
-import { transition } from '../library/anime'
+import {siteRefresh} from './refresh'
+import {cloudflareInit} from '../components/cloudflare'
+import {BODY, CONFIG, setSiteSearch, siteSearch} from '../globals/globalVars'
+import {autoDarkmode, themeColorListener} from '../globals/themeColor'
+import {resizeHandle, scrollHandle, visibilityListener} from '../globals/handles'
+import {pagePosition} from '../globals/tools'
+import {initVue} from '../library/vue'
+import {createChild} from '../library/proto'
+import {transition} from '../library/anime'
 
 const siteInit = async () => {
   initVue()
@@ -39,15 +38,12 @@ const siteInit = async () => {
       })
 
       // Handle and trigger popup window
-      // TODO search 只有一个，不需要 each
-      $dom.each('.search', (element) => {
-        element.addEventListener('click', () => {
+      document.querySelector('.search').addEventListener('click', () => {
           document.body.style.overflow = 'hidden'
           transition(siteSearch, 'shrinkIn', () => {
             (document.querySelector('.search-input') as HTMLInputElement).focus()
           }) // transition.shrinkIn
         })
-      })
     }, {once: true, capture: true})
   }
 

package/source/js/_app/player.ts

@@ -3,7 +3,6 @@
 import { CONFIG, originTitle } from './globals/globalVars'
 import { showtip } from './globals/tools'
 import { pageScroll } from './library/anime'
-import { $storage } from './library/storage'
 import { tabFormat } from './page/tab'
 import { createChild, getLeft, getWidth, setDisplay, setWidth } from './library/proto'
 
@@ -85,7 +84,7 @@ export const mediaPlayer = (t, config?) => {
         }
 
         controller.btns.mode.className = 'mode ' + t.player.options.mode + ' btn'
-        $storage.set('_PlayerMode', t.player.options.mode)
+        localStorage.setItem('_PlayerMode', t.player.options.mode)
       },
       volume (e) {
         e.preventDefault()
@@ -148,7 +147,7 @@ export const mediaPlayer = (t, config?) => {
 
       if (current) {
         if (progress.el) {
-          progress.el.parentNode.removeClass('current')
+          progress.el.parentNode.classList.remove('current')
             .removeEventListener(utils.nameMap.dragStart, progress.drag)
           progress.el.remove()
         }
@@ -163,7 +162,7 @@ export const mediaPlayer = (t, config?) => {
           className: 'bar'
         })
 
-        current.addClass('current')
+        current.classList.add('current')
 
         current.addEventListener(utils.nameMap.dragStart, progress.drag)
 
@@ -175,7 +174,7 @@ export const mediaPlayer = (t, config?) => {
       (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') }
+      if (type) { progress.el.classList.add('seeking') } else { progress.el.classList.remove('seeking') }
     },
     percent (e, el) {
       let percentage = ((e.clientX || e.changedTouches[0].clientX) - getLeft(el)) / getWidth(el)
@@ -301,13 +300,13 @@ export const mediaPlayer = (t, config?) => {
     scroll () {
       const item = this.current()
       let li = this.el.querySelector('li.active')
-      li && li.removeClass('active')
+      li && li.classList.remove('active')
       let tab = this.el.querySelector('.tab.active')
-      tab && tab.removeClass('active')
+      tab && tab.classList.remove('active')
       li = this.el.querySelectorAll('.nav li')[item.group]
-      li && li.addClass('active')
+      li && li.classList.add('active')
       tab = this.el.querySelectorAll('.tab')[item.group]
-      tab && tab.addClass('active')
+      tab && tab.classList.add('active')
 
       pageScroll(item.el, item.el.offsetTop)
 
@@ -321,7 +320,7 @@ export const mediaPlayer = (t, config?) => {
     },
     error () {
       const current = this.current()
-      current.el.removeClass('current').addClass('error')
+      current.el.classList.remove('current').classList.add('error')
       current.error = true
       this.errnum++
     }
@@ -342,9 +341,9 @@ export const mediaPlayer = (t, config?) => {
     },
     hide () {
       const el = this.el
-      el.addClass('hide')
+      el.classList.add('hide')
       window.setTimeout(() => {
-        el.removeClass('show hide')
+        el.classList.remove('show hide')
       }, 300)
     }
   }
@@ -362,10 +361,10 @@ export const mediaPlayer = (t, config?) => {
         }
       },
       music (event) {
-        if (info.el.hasClass('show')) {
+        if (info.el.classList.contains('show')) {
           info.hide()
         } else {
-          info.el.addClass('show')
+          info.el.classList.add('show')
           playlist.scroll().title()
         }
       }
@@ -409,7 +408,7 @@ export const mediaPlayer = (t, config?) => {
           const meta = utils.parse(raw)
           if (meta[0]) {
             const skey = JSON.stringify(meta)
-            const playlist = $storage.get(skey)
+            const playlist = localStorage.getItem(skey)
             if (playlist) {
               // list.push.apply(list, JSON.parse(playlist))
               list.push(...JSON.parse(playlist))
@@ -419,7 +418,7 @@ export const mediaPlayer = (t, config?) => {
                 .then((response) => {
                   return response.json()
                 }).then((json) => {
-                  $storage.set(skey, JSON.stringify(json))
+                  localStorage.setItem(skey, JSON.stringify(json))
                   // list.push.apply(list, json)
                   list.push(...json)
                   resolve(list)
@@ -583,8 +582,8 @@ export const mediaPlayer = (t, config?) => {
 
       source.setAttribute('src', item.url)
       source.setAttribute('title', item.name + ' - ' + item.artist)
-      this.volume($storage.get('_PlayerVolume') || '0.7')
-      this.muted($storage.get('_PlayerMuted'))
+      this.volume(localStorage.getItem('_PlayerVolume') || '0.7')
+      this.muted(localStorage.getItem('_PlayerMuted'))
 
       progress.create()
 
@@ -625,10 +624,10 @@ export const mediaPlayer = (t, config?) => {
     muted (status?) {
       if (status === 'muted') {
         source.muted = status
-        $storage.set('_PlayerMuted', status)
+        localStorage.setItem('_PlayerMuted', status)
         controller.update(0)
       } else {
-        $storage.del('_PlayerMuted')
+        localStorage.removeItem('_PlayerMuted')
         source.muted = false
         controller.update(source.volume)
       }
@@ -636,7 +635,7 @@ export const mediaPlayer = (t, config?) => {
     volume (percentage) {
       if (!isNaN(percentage)) {
         controller.update(percentage)
-        $storage.set('_PlayerVolume', percentage)
+        localStorage.setItem('_PlayerVolume', percentage)
         source.volume = percentage
       }
     },
@@ -684,8 +683,8 @@ export const mediaPlayer = (t, config?) => {
             const y = -(this.index - 1)
             this.el.style.transform = 'translateY(' + y + 'rem)'
             // this.el.style.webkitTransform = 'translateY(' + y + 'rem)';
-            this.el.getElementsByClassName('current')[0].removeClass('current')
-            this.el.getElementsByTagName('p')[i].addClass('current')
+            this.el.getElementsByClassName('current')[0].classList.remove('current')
+            this.el.getElementsByTagName('p')[i].classList.add('current')
           }
         }
       }
@@ -755,12 +754,12 @@ export const mediaPlayer = (t, config?) => {
       progress.el.setAttribute('data-dtime', utils.secondToTime(source.duration))
     },
     onplay () {
-      t.parentNode.addClass('playing')
+      t.parentNode.classList.add('playing')
       showtip(this.getAttribute('title'))
       NOWPLAYING = t
     },
     onpause () {
-      t.parentNode.removeClass('playing')
+      t.parentNode.classList.remove('playing')
       NOWPLAYING = null
     },
     ontimeupdate () {
@@ -779,7 +778,7 @@ export const mediaPlayer = (t, config?) => {
     if (t.player.created) { return }
 
     t.player.options = Object.assign(option, config)
-    t.player.options.mode = $storage.get('_PlayerMode') || t.player.options.mode
+    t.player.options.mode = localStorage.getItem('_PlayerMode') || t.player.options.mode
 
     // 初始化button、controls以及click事件
     buttons.create()
@@ -789,7 +788,7 @@ export const mediaPlayer = (t, config?) => {
     // 初始化播放列表、预览、控件按钮等
     info.create()
 
-    t.parentNode.addClass(t.player.options.type)
+    t.parentNode.classList.add(t.player.options.type)
 
     t.player.created = true
   }

package/toolbox/compiler.mjs

@@ -1,15 +1,13 @@
 /*
 ShokaX ToolBox - Compiler
-compatibility: ShokaX v0.4.x
+compatibility: ShokaX v0.5.x-dev
  */
-import path from "node:path";
 import fs from 'fs/promises'
-import child_process from 'child_process'
 import { buildSync } from 'esbuild'
 import { glob } from 'glob'
 
 const CONFIG = {
-  legacyScript: false,
+
 }
 
 console.log('ShokaX ToolBox - Compiler')
@@ -18,50 +16,24 @@ console.log('Start compiling...')
 const entryPoints = await glob('./scripts/**/*.ts');
 const jsons = await glob('./scripts/**/*.json');
 
-if (CONFIG.legacyScript) {
-    console.log('Simulating legacy script compiler...')
-    let sPath = path.join(import.meta.url, './../../scripts/').trim()
-    if (sPath.startsWith('file:/')) {
-        sPath = sPath.slice(5); // 去除 'file://'
-    } else if (sPath.startsWith('file:\\')) {
-        sPath = sPath.slice(8); // 去除 'file:\'
-    }
-    child_process.exec('npm install',{
-        cwd: path.join(sPath,'./../')
-    }, (code, stdout, stderr) => {
-        child_process.exec('"yes" | npx -p typescript tsc --build'.trim(), {
-            cwd: sPath
-        }, async (code, stdout, stderr) => {
-            console.log('Deleting typescript files...')
-            for (const entry of entryPoints) {
-                await fs.unlink(entry)
-            }
-            for (const entry of jsons) {
-                await fs.unlink(entry)
-            }
-            console.log('Finished compiling.')
-        })
-    })
-} else {
-    console.log('RUN THIS SCRIPT IN YOUR SHOKAX THEME ROOT DIRECTORY!')
-    console.log('Using esbuild compiler...')
-    buildSync({
-        entryPoints: entryPoints,
-        outdir: 'scripts',
-        bundle: false,
-        format: 'cjs',
-        target: ['esnext'],
-        platform: 'node',
-        loader: { '.ts': 'ts' },
-    })
-    entryPoints.forEach(async (entry) => {
-        await fs.unlink(entry)
-    })
-    jsons.forEach(async (entry)=>{
-        await fs.unlink(entry)
-    })
-    console.log('Finished compiling.')
-}
+console.log('RUN THIS SCRIPT IN YOUR SHOKAX THEME ROOT DIRECTORY!')
+console.log('Using esbuild compiler...')
+buildSync({
+    entryPoints: entryPoints,
+    outdir: 'scripts',
+    bundle: false,
+    format: 'cjs',
+    target: ['esnext'],
+    platform: 'node',
+    loader: { '.ts': 'ts' },
+})
+entryPoints.forEach(async (entry) => {
+    await fs.unlink(entry)
+})
+jsons.forEach(async (entry)=>{
+    await fs.unlink(entry)
+})
+console.log('Finished compiling.')
 
 console.log('Done.')
 

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

@@ -1,28 +0,0 @@
-/**
- * 获取一个dom选择器对应的元素
- * @deprecated Will be removed in the v0.5
- */
-const $dom = (selector: string, element: Document = document): HTMLElement => {
-  // 在测试环境中这能优化0.01-0.02ms左右
-  if (selector[0] === '#') {
-    return <HTMLElement> element.getElementById(selector.substring(1))
-  }
-  return <HTMLElement> element.querySelector(selector)
-}
-
-/**
- * 获取具有此选择器的所有dom节点
- * @deprecated Will be removed in the v0.5
- */
-$dom.all = (selector: string, element: Document = document): NodeListOf<HTMLElement> => {
-  return element.querySelectorAll(selector)
-}
-/**
- * 获取具有此选择器的所有dom节点,并依次执行callback函数
- * @deprecated Will be removed in the v0.5
- */
-$dom.each = (selector: string, callback: (value: HTMLElement, key: number, parent: NodeListOf<Element>) => void, element?: Document): void => {
-  $dom.all(selector, element).forEach(callback)
-}
-
-export { $dom }

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

@@ -1,12 +0,0 @@
-// Html5LocalStorage的一个API
-export const $storage = {
-  set (key: string, value: string): void {
-    localStorage.setItem(key, value)
-  },
-  get (key: string): string {
-    return localStorage.getItem(key)
-  },
-  del (key: string): void {
-    localStorage.removeItem(key)
-  }
-}