hexo-theme-shokax 0.4.4 → 0.4.5

package/layout/_partials/layout.pug

@@ -130,7 +130,7 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
 
         != vendor_js()
         if theme.polyfill.enable
-            script(src=`https://polyfill.io/v3/polyfill.min.js?features=${theme.polyfill.features}` defer)
+            script(src=`https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=${theme.polyfill.features}` defer)
 
         != _js('siteInit.js')
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hexo-theme-shokax",
-    "version": "0.4.4",
+    "version": "0.4.5",
     "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

@@ -85,5 +85,5 @@ export const walineRecentComments = async function () {
     newComments.appendChild(commentEl)
   })
 
-  $dom('#new-comment').appendChild(newComments)
+  document.getElementById("new-comment").appendChild(newComments)
 }

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

@@ -4,7 +4,7 @@ import { CONFIG, Container, diffY, menuToggle, showContents, sideBar } from '../
 import { clipBoard } from '../globals/tools'
 import { pageScroll, transition } from '../library/anime'
 import { $dom } from '../library/dom'
-import initProto, { child, getHeight, setDisplay } from '../library/proto'
+import initProto, { getHeight, setDisplay } from '../library/proto'
 
 initProto()
 export const sideBarToggleHandle = (event:Event, force?:number) => {
@@ -33,17 +33,17 @@ export const sideBarToggleHandle = (event:Event, force?:number) => {
 }
 
 export const sideBarTab = () => {
-  const sideBarInner = child(sideBar, '.inner')
+  const sideBarInner = sideBar.querySelector('.inner')
 
-  if (sideBar.child('.tab')) {
-    sideBarInner.removeChild(sideBar.child('.tab'))
+  if (sideBar.querySelector('.tab')) {
+    sideBarInner.removeChild(sideBar.querySelector('.tab'))
   }
 
   const list = document.createElement('ul'); let active = 'active'
   list.className = 'tab';
 
   ['contents', 'related', 'overview'].forEach((item) => {
-    const element = sideBar.child('.panel.' + item)
+    const element = sideBar.querySelector('.panel.' + item)
 
     if (element.innerHTML.trim().length < 1) {
       if (item === 'contents') {
@@ -81,7 +81,7 @@ export const sideBarTab = () => {
         element.removeClass('active')
       })
 
-      sideBar.child('.panel.' + target.className.replace(' item', '')).addClass('active')
+      sideBar.querySelector('.panel.' + target.className.replace(' item', '')).addClass('active')
 
       target.addClass('active')
     })
@@ -91,10 +91,10 @@ export const sideBarTab = () => {
   })
 
   if (list.childNodes.length > 1) {
-    sideBarInner.insertBefore(list, sideBarInner.childNodes[0])
-    sideBar.child('.panels').style.paddingTop = ''
+    sideBarInner.insertBefore(list, sideBarInner.childNodes[0]);
+    (sideBar.querySelector('.panels') as HTMLElement).style.paddingTop = ''
   } else {
-    sideBar.child('.panels').style.paddingTop = '.625rem'
+    (sideBar.querySelector('.panels') as HTMLElement).style.paddingTop = '.625rem'
   }
 }
 
@@ -124,7 +124,7 @@ export const sidebarTOC = () => {
     while (!parent.matches('.contents')) {
       if (parent.matches('li')) {
         parent.addClass('active')
-        const t = $dom(parent.child('a.toc-link').getAttribute('href'))
+        const t = document.querySelector(parent.querySelector('a.toc-link').getAttribute('href'))
         if (t) {
           t.addClass('active')
         }
@@ -133,7 +133,7 @@ export const sidebarTOC = () => {
     }
     // Scrolling to center active TOC element if TOC content is taller than viewport.
     if (getComputedStyle(sideBar).display !== 'none' && tocElement.hasClass('active')) {
-      pageScroll(tocElement, target.offsetTop - (tocElement.offsetHeight / 4))
+      pageScroll((tocElement as HTMLElement), target.offsetTop - ((tocElement as HTMLElement).offsetHeight / 4))
     }
   }
   const navItems = $dom.all('.contents li')
@@ -142,21 +142,21 @@ export const sidebarTOC = () => {
     return
   }
 
-  let sections = [...navItems]
+  let sections = [...navItems] as HTMLElement[]
   let activeLock = null
 
   sections = sections.map((element, index) => {
-    const link = element.child('a.toc-link')
-    const anchor = $dom(decodeURI(link.getAttribute('href')))
+    const link = element.querySelector('a.toc-link')
+    const anchor = document.querySelector(decodeURI(link.getAttribute('href')))
     if (!anchor) return null
-    const alink = anchor.child('a.anchor')
+    const alink = anchor.querySelector('a.anchor')
 
     const anchorScroll = (event:MouseEvent) => {
       event.preventDefault()
-      const target = $dom(decodeURI((event.currentTarget as HTMLElement).getAttribute('href')))
+      const target = document.querySelector(decodeURI((event.currentTarget as HTMLElement).getAttribute('href')))
 
       activeLock = index
-      pageScroll(target, null, () => {
+      pageScroll((target as HTMLElement), null, () => {
         activateNavByIndex(index)
         activeLock = null
       })
@@ -165,13 +165,13 @@ export const sidebarTOC = () => {
     // TOC item animation navigate.
     link.addEventListener('click', anchorScroll)
     alink && alink.addEventListener('click', (event) => {
-      anchorScroll(event)
+      anchorScroll(<MouseEvent>event)
       clipBoard(CONFIG.hostname + '/' + LOCAL.path + (event.currentTarget as HTMLElement).getAttribute('href'))
     })
-    return anchor
+    return (anchor as HTMLElement)
   })
 
-  const tocElement = sideBar.child('.contents.panel')
+  const tocElement = sideBar.querySelector('.contents.panel')
 
   const findIndex = (entries: IntersectionObserverEntry[]) => {
     let index = 0
@@ -218,19 +218,19 @@ export const goToBottomHandle = () => {
 }
 
 export const goToCommentHandle = () => {
-  pageScroll($dom('#comments'))
+  pageScroll(document.getElementById('comments'))
 }
 
 export const menuActive = () => {
   $dom.each('.menu .item:not(.title)', (element) => {
-    const target = <HTMLAnchorElement> element.child('a[href]')
+    const target = <HTMLAnchorElement> element.querySelector('a[href]')
     const parentItem = element.parentNode.parentNode
     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.child('.active') && parentItem.hasClass('dropdown')) {
+    if (element.parentNode.querySelector('.active') && parentItem.hasClass('dropdown')) {
       parentItem.removeClass('active').addClass('expand')
     } else {
       parentItem.removeClass('expand')

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

@@ -1,6 +1,5 @@
 import * as twikoo from 'twikoo'
 import { CONFIG } from '../globals/globalVars'
-import { $dom } from '../library/dom'
 
 export const twikooComment = function () {
   twikoo.init({
@@ -51,5 +50,5 @@ export const twikooRecentComments = async function () {
     newComments.appendChild(commentEl)
   })
 
-  $dom('#new-comment').appendChild(newComments)
+  document.getElementById('new-comment').appendChild(newComments)
 }

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

@@ -10,20 +10,20 @@ export let diffY = 0
 export let originTitle: string, titleTime: NodeJS.Timeout
 export const BODY = document.getElementsByTagName('body')[0]
 export const HTML = document.documentElement
-export const Container = $dom('#container')
-export const loadCat = $dom('#loading')
-export const siteNav = $dom('#nav')
-export const siteHeader = $dom('#header')
-export const menuToggle = siteNav.child('.toggle')
-export const quickBtn = $dom('#quick')
-export const sideBar = $dom('#sidebar')
-export const siteBrand = $dom('#brand')
-export let toolBtn = $dom('#tool')
+export const Container = document.getElementById('container')
+export const loadCat = document.getElementById('loading')
+export const siteNav = document.getElementById('nav')
+export const siteHeader = document.getElementById('header')
+export const menuToggle = siteNav.querySelector('.toggle')
+export const quickBtn = document.getElementById('quick')
+export const sideBar = document.getElementById('sidebar')
+export const siteBrand = document.getElementById('brand')
+export let toolBtn = document.getElementById('tool')
 export let toolPlayer
 export let backToTop: HTMLElement
 export let goToComment
 export let showContents
-export let siteSearch = $dom('#search')
+export let siteSearch = document.getElementById('search')
 export let siteNavHeight: number, headerHightInner: number, headerHight: number
 export let oWinHeight = window.innerHeight
 export let oWinWidth = window.innerWidth

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

@@ -1,5 +1,4 @@
 import { sideBarToggleHandle } from '../components/sidebar'
-import { $dom, getDocHeight } from '../library/dom'
 import {
   backToTop,
   diffY,
@@ -24,13 +23,15 @@ import { changeMetaTheme } from './themeColor'
 import { Loader } from './thirdparty'
 import { getHeight, setWidth } from '../library/proto'
 
+const wavesEle = document.getElementById('waves')
+
 export const resizeHandle = () => {
   // 获取 siteNav 的高度
   setSiteNavHeight(getHeight(siteNav))
   // 获取 siteHeader 的高度
   setHeaderHightInner(getHeight(siteHeader))
   // 获取 #waves 的高度
-  setHeaderHight(headerHightInner + getHeight($dom('#waves')))
+  setHeaderHight(headerHightInner + getHeight(wavesEle))
 
   // 判断窗口宽度是否改变
   if (oWinWidth !== window.innerWidth) {
@@ -46,7 +47,7 @@ export const scrollHandle = () => {
   // 获取窗口高度
   const winHeight = window.innerHeight
   // 获取文档高度
-  const docHeight = getDocHeight()
+  const docHeight = (document.querySelector('main > .inner') as HTMLElement).offsetHeight
   // 计算可见内容高度
   const contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight
   // 判断页面是否滚动超过 headerHightInner
@@ -86,18 +87,18 @@ export const scrollHandle = () => {
   // 计算滚动百分比
   const scrollPercent = Math.round(Math.min(100 * window.scrollY / contentVisibilityHeight, 100)) + '%'
   // 更新回到顶部按钮的文字
-  if (backToTop.child('span').innerText !== scrollPercent) {
-    backToTop.child('span').innerText = scrollPercent
+  if (backToTop.querySelector('span').innerText !== scrollPercent) {
+    backToTop.querySelector('span').innerText = scrollPercent
   }
   // 更新百分比进度条的宽度
-  if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
-    setWidth($dom('.percent'), scrollPercent)
+  if (document.getElementById('sidebar').hasClass('affix') || document.getElementById('sidebar').hasClass('on')) {
+    setWidth(document.querySelector('.percent'), scrollPercent)
   }
 }
 
 // 可见度监听(离开页面和返回时更改document的title)
 export const visibilityListener = () => {
-  const iconNode = $dom('[rel="icon"]')
+  const iconNode = document.querySelector('[rel="icon"]')
   document.addEventListener('visibilitychange', () => {
     switch (document.visibilityState) {
       case 'hidden':

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

@@ -1,12 +1,11 @@
 import { $storage } from '../library/storage'
-import { $dom } from '../library/dom'
 import { CONFIG, HTML } from './globalVars'
 
 /**
  * 更改日夜模式
  */
 export const changeTheme = (type?: string) => {
-  const btn = <HTMLElement>$dom('.theme .ic')
+  const btn = document.querySelector('.theme .ic')
   if (type === 'dark') {
     HTML.setAttribute('data-theme', type)
     btn.removeClass('i-sun')
@@ -40,7 +39,7 @@ export const changeMetaTheme = (color: string): void => {
     color = '#222'
   }
 
-  $dom('meta[name="theme-color"]').setAttribute('content', color)
+  document.querySelector('meta[name="theme-color"]').setAttribute('content', color)
 }
 
 // 记忆日夜模式切换和系统亮暗模式监听

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

@@ -42,7 +42,7 @@ export const positionInit = (comment?: boolean) => {
   }
 
   if (anchor) {
-    target = $dom(decodeURI(anchor))
+    target = document.querySelector(decodeURI(anchor))
   } else {
     target = CONFIG.auto_scroll ? parseInt($storage.get(LOCAL_URL)) : 0
   }

package/source/js/_app/library/declare.d.ts

@@ -7,8 +7,6 @@ interface AudioItem {
 }
 
 declare interface EventTarget {
-  createChild(tag: string, obj: Object, positon?: string): HTMLElement;
-  wrapObject(obj: Object): void;
   changeOrGetHeight(h: number | string): void;
   changeOrGetHeight(): number;
   changeOrGetWidth(w: number | string): void;
@@ -18,7 +16,6 @@ declare interface EventTarget {
   insertAfter(element: HTMLElement): void;
   display(d: string): EventTarget;
   display():string
-  child(selector: string): HTMLElement;
   find(selector: string): NodeListOf<HTMLElement>;
   _class(type: string, className: string, display?: boolean): void;
   addClass(className: string): EventTarget;

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

@@ -1,6 +1,6 @@
-const getDocHeight = () => $dom('main > .inner').offsetHeight
 /**
  * 获取一个dom选择器对应的元素
+ * @deprecated Will be removed in the v0.5
  */
 const $dom = (selector: string, element: Document = document): HTMLElement => {
   // 在测试环境中这能优化0.01-0.02ms左右
@@ -12,15 +12,17 @@ const $dom = (selector: string, element: Document = document): HTMLElement => {
 
 /**
  * 获取具有此选择器的所有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, getDocHeight }
+export { $dom }

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

@@ -4,6 +4,7 @@ import { createChild } from './proto'
 
 /**
  * 用途是根据不同的资源名称和类型生成相应的资源 URL。
+ * @deprecated Use smart bundle and import() instead. Will be removed in the v0.5
  */
 const assetUrl = (asset: string, type: string): string => {
   const str = CONFIG[asset][type]
@@ -19,6 +20,9 @@ const assetUrl = (asset: string, type: string): string => {
   return `/${str}`
 }
 
+/**
+ @deprecated Use smart bundle and import() instead. Will be removed in the v0.5
+ */
 export const vendorJs = (type: string, callback?: Function, condition?: string) => {
   if (LOCAL[type]) {
     getScript(assetUrl('js', type), callback || function () {
@@ -27,6 +31,9 @@ export const vendorJs = (type: string, callback?: Function, condition?: string)
   }
 }
 
+/**
+ @deprecated Use smart bundle and import() instead. Will be removed in the v0.5
+ */
 export const vendorCss = (type: string, condition?: string): void => {
   if (window['css' + type]) {
     return

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

@@ -1,6 +1,6 @@
 import { $dom } from './dom'
 
-export const insertAfter = function (el: HTMLElement, element: HTMLElement): void {
+export const insertAfter = function (el: Element, element: HTMLElement): void {
   const parent = el.parentNode
   if (parent.lastChild === el) {
     parent.appendChild(element)
@@ -12,7 +12,7 @@ export const insertAfter = function (el: HTMLElement, element: HTMLElement): voi
 /**
  * 创建一个子节点并放置
  */
-export const createChild = function (parent: HTMLElement, tag: string, obj: object, positon?: string): HTMLElement {
+export const createChild = function (parent: Element, tag: string, obj: object, positon?: string): HTMLElement {
   const child = document.createElement(tag)
   Object.assign(child, obj)
   switch (positon) {
@@ -71,20 +71,11 @@ export const setDisplay = function (el: HTMLElement, d: string): HTMLElement {
   return el
 }
 
-// TODO 未完成迁移
-export const child = function (el: HTMLElement, selector: string): HTMLElement {
-  return $dom(selector, (el as unknown as Document))
-}
 export default function initProto () {
   Object.assign(HTMLElement.prototype, {
     /**
-   * 找到此节点第一个符合selector选择器的子节点
-   */
-    child (selector: string): HTMLElement {
-      return $dom(selector, this)
-    },
-    /**
    * 找到此节点所有符合selector选择器的子节点
+     * @deprecated Will be removed in the v0.5
    */
     find (selector: string): NodeListOf<HTMLElement> {
       return $dom.all(selector, this)
@@ -95,6 +86,7 @@ export default function initProto () {
      * 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]
@@ -109,6 +101,7 @@ export default function initProto () {
     /**
      * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'add'，然后执行添加类名的操作。
      * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     * @deprecated Will be removed in the v0.5
      */
     addClass (className: string): EventTarget {
       this._class('add', className)
@@ -117,6 +110,7 @@ export default function initProto () {
     /**
      * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'remove'，然后执行移除类名的操作。
      * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     * @deprecated Will be removed in the v0.5
      */
     removeClass (className: string): EventTarget {
       this._class('remove', className)
@@ -126,6 +120,7 @@ export default function initProto () {
      * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'toggle'，然后执行切换类名的操作。
      * 如果提供了 display 参数，它将根据布尔值决定是否显示或隐藏类名。
      * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     * @deprecated Will be removed in the v0.5
      */
     toggleClass (className: string, display?: boolean): EventTarget {
       this._class('toggle', className, display)
@@ -133,6 +128,7 @@ export default function initProto () {
     },
     /**
      * 这个方法返回一个布尔值，表示元素是否包含指定的类名。
+     * @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,13 +1,12 @@
 import { $storage } from './storage'
 import { transition } from './anime'
-import { $dom } from './dom'
 import { BODY } from '../globals/globalVars'
 import { changeTheme } from '../globals/themeColor'
-import { child, createChild, setDisplay } from './proto'
+import { createChild, setDisplay } from './proto'
 export function initVue () {
   function changeThemeByBtn () {
     let c: { (): void; (): void; (): void }
-    const btn = child($dom('.theme'), '.ic')
+    const btn = document.querySelector('.theme').querySelector('.ic')
 
     const neko = createChild(BODY, 'div', {
       id: 'neko',
@@ -46,5 +45,5 @@ export function initVue () {
       setDisplay(neko, 'block')
     })
   }
-  child($dom('#rightNav'), '.theme .ic').addEventListener('click', changeThemeByBtn)
+  document.getElementById('rightNav').querySelector('.theme .ic').addEventListener('click', changeThemeByBtn)
 }

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

@@ -1,7 +1,7 @@
 import { $dom } from '../library/dom'
 
 export const cardActive = () => {
-  if (!$dom('.index.wrap')) { return }
+  if (!document.querySelector('.index.wrap')) { return }
   const io = new IntersectionObserver((entries) => {
     entries.forEach((article) => {
       if (article.target.hasClass('show')) {
@@ -22,13 +22,14 @@ export const cardActive = () => {
     io.observe(article)
   })
 
-  $dom('.index.wrap .item:first-child').addClass('show')
+  document.querySelector('.index.wrap .item:first-child').addClass('show')
 
   $dom.each('.cards .item', (element) => {
     ['mouseenter', 'touchstart'].forEach((item) => {
       element.addEventListener(item, () => {
-        if ($dom('.cards .item.active')) {
-          $dom('.cards .item.active').removeClass('active')
+        const cardEle = document.querySelector('.cards .item.active')
+        if (cardEle) {
+          cardEle.removeClass('active')
         }
         element.addClass('active')
       }, { passive: true })

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

@@ -2,8 +2,9 @@ import { $dom } from '../library/dom'
 import { vendorCss, vendorJs } from '../library/loadFile'
 import { insertAfter } from '../library/proto'
 
+// TODO 使用PhotoSwipe替换Fancybox
 export const postFancybox = (p:string) => {
-  if ($dom(p + ' .md img')) {
+  if (document.querySelector(p + ' .md img')) {
     vendorCss('fancybox')
     vendorCss('justifiedGallery')
     vendorJs('fancybox', () => {

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

@@ -7,13 +7,13 @@ import { mediaPlayer } from '../player'
 import { getDisplay, setDisplay, wrapObject } from '../library/proto'
 
 export const postBeauty = () => {
-  if (!$dom('.md')) { return }
+  if (!document.querySelector('.md')) { return }
 
   if (__shokax_fancybox__) {
     postFancybox('.post.block')
   }
 
-  $dom('.post.block').oncopy = (event) => {
+  (document.querySelector('.post.block') as HTMLTextAreaElement).oncopy = (event) => {
     showtip(LOCAL.copyright)
 
     if (LOCAL.nocopy) {
@@ -21,12 +21,12 @@ export const postBeauty = () => {
       return
     }
 
-    const copyright = $dom('#copyright')
+    const copyright = document.getElementById('copyright')
     if (window.getSelection().toString().length > 30 && copyright) {
       event.preventDefault()
-      const author = '# ' + copyright.child('.author').innerText
-      const link = '# ' + copyright.child('.link').innerText
-      const license = '# ' + copyright.child('.license').innerText
+      const author = '# ' + (copyright.querySelector('.author') as HTMLElement).innerText
+      const link = '# ' + (copyright.querySelector('.link') as HTMLElement).innerText
+      const license = '# ' + (copyright.querySelector('.license') as HTMLElement).innerText
       const htmlData = author + '<br>' + link + '<br>' + license + '<br><br>' + window.getSelection().toString().replace(/\r\n/g, '<br>')
 
       const textData = author + '\n' + link + '\n' + license + '\n\n' + window.getSelection().toString().replace(/\r\n/g, '\n')
@@ -68,12 +68,12 @@ export const postBeauty = () => {
   })
 
   $dom.each('figure.highlight', (element) => {
-    const code_container = element.child('.code-container')
-    const caption = element.child('figcaption')
+    const code_container = element.querySelector('.code-container') as HTMLElement
+    const caption = element.querySelector('figcaption')
 
     element.insertAdjacentHTML('beforeend', '<div class="operation"><span class="breakline-btn"><i class="ic i-align-left"></i></span><span class="copy-btn"><i class="ic i-clipboard"></i></span><span class="fullscreen-btn"><i class="ic i-expand"></i></span></div>')
 
-    const copyBtn = element.child('.copy-btn')
+    const copyBtn = element.querySelector('.copy-btn')
     if (LOCAL.nocopy) {
       copyBtn.remove()
     } else {
@@ -86,42 +86,42 @@ export const postBeauty = () => {
         })
 
         clipBoard(code, (result) => {
-          target.child('.ic').className = result ? 'ic i-check' : 'ic i-times'
+          target.querySelector('.ic').className = result ? 'ic i-check' : 'ic i-times'
           target.blur()
           showtip(LOCAL.copyright)
         })
       }, { passive: true })
       copyBtn.addEventListener('mouseleave', (event) => {
         setTimeout(() => {
-          event.target.child('.ic').className = 'ic i-clipboard'
+          (event.target as HTMLElement).querySelector('.ic').className = 'ic i-clipboard'
         }, 1000)
       })
     }
 
-    const breakBtn = element.child('.breakline-btn')
+    const breakBtn = element.querySelector('.breakline-btn')
     breakBtn.addEventListener('click', (event) => {
-      const target = event.currentTarget
+      const target = event.currentTarget as HTMLElement
       if (element.hasClass('breakline')) {
         element.removeClass('breakline')
-        target.child('.ic').className = 'ic i-align-left'
+        target.querySelector('.ic').className = 'ic i-align-left'
       } else {
         element.addClass('breakline')
-        target.child('.ic').className = 'ic i-align-justify'
+        target.querySelector('.ic').className = 'ic i-align-justify'
       }
     })
 
-    const fullscreenBtn = element.child('.fullscreen-btn')
+    const fullscreenBtn = element.querySelector('.fullscreen-btn')
     const removeFullscreen = () => {
       element.removeClass('fullscreen')
       element.scrollTop = 0
       BODY.removeClass('fullscreen')
-      fullscreenBtn.child('.ic').className = 'ic i-expand'
+      fullscreenBtn.querySelector('.ic').className = 'ic i-expand'
     }
     const fullscreenHandle = () => {
       if (element.hasClass('fullscreen')) {
         removeFullscreen()
         if (code_container && code_container.find('tr').length > 15) {
-          const showBtn = code_container.child('.show-btn')
+          const showBtn = code_container.querySelector('.show-btn')
           code_container.style.maxHeight = '300px'
           showBtn.removeClass('open')
         }
@@ -129,9 +129,9 @@ export const postBeauty = () => {
       } else {
         element.addClass('fullscreen')
         BODY.addClass('fullscreen')
-        fullscreenBtn.child('.ic').className = 'ic i-compress'
+        fullscreenBtn.querySelector('.ic').className = 'ic i-compress'
         if (code_container && code_container.find('tr').length > 15) {
-          const showBtn = code_container.child('.show-btn')
+          const showBtn = code_container.querySelector('.show-btn')
           code_container.style.maxHeight = ''
           showBtn.addClass('open')
         }
@@ -143,7 +143,7 @@ export const postBeauty = () => {
     if (code_container && code_container.find('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.child('.show-btn')
+      const showBtn = code_container.querySelector('.show-btn')
 
       const hideCode = () => {
         code_container.style.maxHeight = '300px'
@@ -174,7 +174,7 @@ export const postBeauty = () => {
   $dom.each('.reward button', (element) => {
     element.addEventListener('click', (event) => {
       event.preventDefault()
-      const qr = $dom('#qr')
+      const qr = document.getElementById('qr')
       if (getDisplay(qr) === 'inline-flex') {
         transition(qr, 0)
       } else {

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

@@ -12,7 +12,7 @@ export function algoliaSearch (pjax) {
     searchClient: algoliasearch(CONFIG.search.appID, CONFIG.search.apiKey),
     // TODO 移除弃用函数
     searchFunction (helper) {
-      const searchInput = $dom('.search-input') as HTMLInputElement
+      const searchInput = document.querySelector('.search-input') as HTMLInputElement
       if (searchInput.value) {
         helper.search()
       }
@@ -20,7 +20,7 @@ export function algoliaSearch (pjax) {
   })
 
   search.on('render', () => {
-    pjax.refresh($dom('#search-hits'))
+    pjax.refresh(document.getElementById("search-hits"))
   })
 
   // Registering Widgets
@@ -105,7 +105,7 @@ export function algoliaSearch (pjax) {
       onPopupClose()
     }
   })
-  $dom('.close-btn').addEventListener('click', onPopupClose)
+  document.querySelector('.close-btn').addEventListener('click', onPopupClose)
   window.addEventListener('pjax:success', onPopupClose)
   window.addEventListener('keyup', (event) => {
     if (event.key === 'Escape') {

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

@@ -10,14 +10,14 @@ export const tabFormat = () => {
 
     const id = element.getAttribute('data-id')
     const title = element.getAttribute('data-title')
-    let box = $dom('#' + id)
+    let box = document.getElementById(id)
     if (!box) {
       box = document.createElement('div')
       box.className = 'tabs'
       box.id = id
       box.innerHTML = '<div class="show-btn"></div>'
 
-      const showBtn = box.child('.show-btn')
+      const showBtn = box.querySelector('.show-btn')
       showBtn.addEventListener('click', () => {
         pageScroll(box)
       })
@@ -28,12 +28,12 @@ export const tabFormat = () => {
       first_tab = false
     }
 
-    let ul = box.child('.nav ul')
+    let ul = box.querySelector('.nav ul')
     if (!ul) {
       ul = createChild(box, 'div', {
         className: 'nav',
         innerHTML: '<ul></ul>'
-      }).child('ul')
+      }).querySelector('ul')
     }
 
     const li = createChild(ul, 'li', {

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

@@ -15,19 +15,19 @@ import {
 import { Loader } from '../globals/thirdparty'
 import { $dom } from '../library/dom'
 import { mediaPlayer } from '../player'
-import { child, createChild } from '../library/proto'
+import { createChild } from '../library/proto'
 
 export default function domInit () {
   $dom.each('.overview .menu > .item', (el) => {
-    child(siteNav, '.menu').appendChild(el.cloneNode(true))
+    siteNav.querySelector('.menu').appendChild(el.cloneNode(true))
   })
 
   loadCat.addEventListener('click', Loader.vanish)
   menuToggle.addEventListener('click', sideBarToggleHandle)
-  $dom('.dimmer').addEventListener('click', sideBarToggleHandle)
+  document.querySelector('.dimmer').addEventListener('click', sideBarToggleHandle)
 
-  child(quickBtn, '.down').addEventListener('click', goToBottomHandle)
-  child(quickBtn, '.up').addEventListener('click', backToTopHandle)
+  quickBtn.querySelector('.down').addEventListener('click', goToBottomHandle)
+  quickBtn.querySelector('.up').addEventListener('click', backToTopHandle)
 
   if (!toolBtn) {
     setToolBtn(createChild(siteHeader, 'div', {
@@ -36,10 +36,10 @@ export default function domInit () {
     }))
   }
 
-  setToolPlayer(toolBtn.child('.player'))
-  setBackToTop(toolBtn.child('.back-to-top'))
-  setGoToComment(toolBtn.child('.chat'))
-  setShowContents(toolBtn.child('.contents'))
+  setToolPlayer(toolBtn.querySelector('.player'))
+  setBackToTop(toolBtn.querySelector('.back-to-top'))
+  setGoToComment(toolBtn.querySelector('.chat'))
+  setShowContents(toolBtn.querySelector('.contents'))
 
   backToTop.addEventListener('click', backToTopHandle)
   goToComment.addEventListener('click', goToCommentHandle)
@@ -48,7 +48,7 @@ export default function domInit () {
   if (__shokax_player__) {
     mediaPlayer(toolPlayer)
 
-    $dom('main').addEventListener('click', () => {
+    document.querySelector('main').addEventListener('click', () => {
       toolPlayer.player.mini()
     })
   }

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

@@ -27,7 +27,7 @@ export const pjaxReload = () => {
       menuToggle.removeClass('close')
     }) // 'transition.slideRightOut'
   }
-  const mainNode = $dom('#main')
+  const mainNode = document.getElementById('main')
   mainNode.innerHTML = ''
   mainNode.appendChild(loadCat.lastChild.cloneNode(true))
   pageScroll(0)
@@ -76,7 +76,7 @@ export const siteRefresh = (reload) => {
     postBeauty()
   })
 
-  const cpel = $dom('#copyright')
+  const cpel = document.getElementById('copyright')
   if (cpel) {
     const comment = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {

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

@@ -40,7 +40,7 @@ const siteInit = () => {
   themeColorListener()
 
   if (__shokax_search__) {
-    $dom('li.item.search > i').addEventListener('click', () => {
+    document.querySelector('li.item.search > i').addEventListener('click', () => {
       if (CONFIG.search === null) { return }
 
       if (!siteSearch) {
@@ -55,12 +55,12 @@ const siteInit = () => {
       })
 
       // Handle and trigger popup window
-      // search 只有一个，不需要 each
+      // TODO search 只有一个，不需要 each
       $dom.each('.search', (element) => {
         element.addEventListener('click', () => {
           document.body.style.overflow = 'hidden'
           transition(siteSearch, 'shrinkIn', () => {
-            $dom('.search-input').focus()
+            (document.querySelector('.search-input') as HTMLInputElement).focus()
           }) // transition.shrinkIn
         })
       })

package/source/js/_app/player.ts

@@ -1,7 +1,6 @@
 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'
@@ -68,7 +67,7 @@ export const mediaPlayer = (t, config?) => {
         that.btns[item] = createChild(that.el, 'div', opt)
       })
 
-      that.btns.volume.bar = that.btns.volume.child('.bar')
+      that.btns.volume.bar = that.btns.volume.querySelector('.bar')
     },
     events: {
       mode (e) {
@@ -217,11 +216,11 @@ export const mediaPlayer = (t, config?) => {
 
       preview.el.innerHTML = '<div class="cover"><div class="disc"><img src="' + (current.cover) + '" class="blur"  alt="music cover"/></div></div>' +
                 '<div class="info"><h4 class="title">' + current.name + '</h4><span>' + current.artist + '</span>' +
-                '<div class="lrc"></div></div>'
+                '<div class="lrc"></div></div>';
 
-      preview.el.child('.cover').addEventListener('click', t.player.options.events['play-pause'])
+      (preview.el as HTMLElement).querySelector('.cover').addEventListener('click', t.player.options.events['play-pause'])
 
-      lyrics.create(preview.el.child('.lrc'))
+      lyrics.create((preview.el as HTMLElement).querySelector('.lrc'))
     }
   }
   let source
@@ -257,7 +256,7 @@ export const mediaPlayer = (t, config?) => {
         if (item.el) { return null }
 
         const id = 'list-' + t.player._id + '-' + item.group
-        let tab = $dom('#' + id)
+        let tab = document.getElementById(id)
         if (!tab) {
           tab = createChild(el, 'div', {
             id,
@@ -270,7 +269,7 @@ export const mediaPlayer = (t, config?) => {
           }
         }
 
-        item.el = createChild(tab.child('ol'), 'li', {
+        item.el = createChild(tab.querySelector('ol'), 'li', {
           title: item.name + ' - ' + item.artist,
           innerHTML: '<span class="info"><span>' + item.name + '</span><span>' + item.artist + '</span></span>',
           onclick (event) {
@@ -299,13 +298,13 @@ export const mediaPlayer = (t, config?) => {
     },
     scroll () {
       const item = this.current()
-      let li = this.el.child('li.active')
+      let li = this.el.querySelector('li.active')
       li && li.removeClass('active')
-      let tab = this.el.child('.tab.active')
+      let tab = this.el.querySelector('.tab.active')
       tab && tab.removeClass('active')
-      li = this.el.find('.nav li')[item.group]
+      li = this.el.querySelectorAll('.nav li')[item.group]
       li && li.addClass('active')
-      tab = this.el.find('.tab')[item.group]
+      tab = this.el.querySelectorAll('.tab')[item.group]
       tab && tab.addClass('active')
 
       pageScroll(item.el, item.el.offsetTop)
@@ -335,9 +334,9 @@ export const mediaPlayer = (t, config?) => {
         innerHTML: (t.player.options.type === 'audio' ? '<div class="preview"></div>' : '') + '<div class="controller"></div><div class="playlist"></div>'
       }, 'after')
 
-      preview.el = this.el.child('.preview')
-      playlist.el = this.el.child('.playlist')
-      controller.el = this.el.child('.controller')
+      preview.el = this.el.querySelector('.preview')
+      playlist.el = this.el.querySelector('.playlist')
+      controller.el = this.el.querySelector('.controller')
     },
     hide () {
       const el = this.el