hexo-theme-shokax 0.4.24 → 0.5.0-beta1

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

@@ -1,9 +1,4 @@
-import { $dom } from '../library/dom'
-import Pjax from 'theme-shokax-pjax'
-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
@@ -19,7 +14,6 @@ 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
@@ -29,7 +23,6 @@ export let oWinHeight = window.innerHeight
 export let oWinWidth = window.innerWidth
 export let LOCAL_HASH = 0
 export let LOCAL_URL = window.location.href
-export let pjax:Pjax
 
 export function setSiteNavHeight (value:number):void {
   siteNavHeight = value
@@ -66,18 +59,10 @@ export function setLocalUrl (value:string):void {
   LOCAL_URL = value
 }
 
-export function setPjax (value:Pjax):void {
-  pjax = value
-}
-
 export function setOriginTitle (value:string):void {
   originTitle = value
 }
 
-export function setToolPlayer (value:any):void {
-  toolPlayer = value
-}
-
 export function setBackToTop (value:HTMLElement):void {
   backToTop = value
 }

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/anime.ts

@@ -89,22 +89,33 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
   }, animation)).play()
 }
 
-export const pageScroll = (target: HTMLElement|number, offset?: number, complete?: Function) => {
-  // target: 滚动到的目标元素或坐标(number)
-  // offset: 可选的偏移量
-  // complete: 可选的回调函数，在动画完成时调用
-  anime({
-    // 动画目标
-    targets: typeof offset === 'number' && typeof target !== 'number' ? target.parentNode : document.scrollingElement,
-    // 动画持续时间
-    duration: 500,
-    // 动画缓动函数
-    easing: 'easeInOutQuad',
-    // 如果 offset 存在，则滚动到 offset，如果 target 是数字，则滚动到 target，如果 target 是 DOM 元素，则滚动到下述表达式
-    scrollTop: offset || (typeof target === 'number' ? target : (target ? getTop(target) + document.documentElement.scrollTop - siteNavHeight : 0)),
-    // 完成回调函数
-    complete () {
-      complete && complete()
-    }
-  }).play()
-}
+export const pageScroll = (target: HTMLElement | number, offset?: number, complete?: Function) => {
+  // 确定滚动容器
+  const scrollContainer = (typeof offset === 'number' && typeof target !== 'number')
+    ? target.parentNode as HTMLElement
+    : document.scrollingElement || document.documentElement;
+
+  // 计算目标滚动位置
+  let scrollTop: number;
+  if (typeof offset !== 'undefined') {
+    scrollTop = offset;
+  } else if (typeof target === 'number') {
+    scrollTop = target;
+  } else if (target) {
+    const rect = target.getBoundingClientRect();
+    scrollTop = rect.top + window.scrollY - siteNavHeight;
+  } else {
+    scrollTop = 0;
+  }
+
+  // 执行平滑滚动
+  scrollContainer.scrollTo({
+    top: scrollTop,
+    behavior: 'smooth'
+  });
+
+  // 处理完成回调（模拟动画持续时间）
+  if (complete) {
+    setTimeout(() => complete(), 500); // 与原动画持续时间保持一致
+  }
+};

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

@@ -109,11 +109,6 @@ interface configType {
     region: string
   }
   walinePageView: boolean
-  quicklink: {
-    ignores: any
-    timeout: number
-    priority: boolean
-  }
   playerAPI: string
   experiments: {
     copyrightLength: number;

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,8 +1,8 @@
-import { $storage } from './storage'
 import { transition } from './anime'
 import { BODY } from '../globals/globalVars'
 import { changeTheme } from '../globals/themeColor'
 import { createChild, setDisplay } from './proto'
+
 export function initVue () {
   function changeThemeByBtn () {
     let c: { (): void; (): void; (): void }
@@ -23,19 +23,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,14 +1,12 @@
-import { $dom } from '../library/dom'
-import { vendorCss, vendorJs } from '../library/loadFile'
 import { insertAfter } from '../library/proto'
 import DOMPurify from 'dompurify';
 
 // TODO 使用PhotoSwipe替换Fancybox
 export const postFancybox = (p:string) => {
   if (document.querySelector(p + ' .md img')) {
-    vendorCss('fancybox')
-    vendorCss('justifiedGallery')
-    $dom.each(p + ' p.gallery', (element) => {
+    // vendorCss('fancybox')
+    // vendorCss('justifiedGallery')
+    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))
@@ -19,9 +17,9 @@ 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 = $(element)
-      const imageLink = DOMPurify.sanitize($image.attr('data-src') || $image.attr('src')) // 替换
+      const imageLink = DOMPurify.sanitize($image.attr('src')) // 替换
       const $imageWrapLink = $image.wrap('<a class="fancybox" href="' + imageLink + '" itemscope itemtype="https://schema.org/ImageObject" itemprop="url"></a>').parent('a')
       let info; let captionClass = 'image-info'
       if (!$image.is('a img')) {
@@ -42,7 +40,7 @@ export const postFancybox = (p:string) => {
       }
     })
 
-    $dom.each(p + ' div.gallery', (el, i) => {
+    document.querySelectorAll(p + ' div.gallery').forEach((el, i) => {
       // @ts-ignore
       $(el).justifiedGallery({
         rowHeight: $(el).data('height') || 120,