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

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

@@ -0,0 +1,109 @@
+import anime from 'theme-shokax-anime'
+import { siteNavHeight } from '../globals/globalVars'
+import type { AnimeOptions } from 'theme-shokax-anime/dist/types'
+
+/**
+ * 参数  动画效果
+ * 0  元素逐渐消失
+ * 1  元素逐渐出现
+ * bounceUpIn  元素从下方弹跳出现
+ * shrinkIn  元素从放大到正常大小出现
+ * slideRightIn  元素从右侧滑入
+ * slideRightOut  元素向右侧滑出
+ * TODO 函数功能过于复杂，需要拆分
+ */
+export const transition = (target: HTMLElement, type: number|string|Function, complete?: Function, begin?: Function): void => {
+  let animation:Partial<AnimeOptions>
+  let display = 'none'
+  switch (type) {
+    case 0:
+      animation = { opacity: [1, 0] }
+      break
+    case 1:
+      animation = { opacity: [0, 1] }
+      display = 'block'
+      break
+    case 'bounceUpIn':
+      animation = {
+        begin (anim) {
+          target.display('block')
+        },
+        translateY: [
+          { value: -60, duration: 200 },
+          { value: 10, duration: 200 },
+          { value: -5, duration: 200 },
+          { value: 0, duration: 200 }
+        ],
+        opacity: [0, 1]
+      }
+      display = 'block'
+      break
+    case 'shrinkIn':
+      animation = {
+        begin (anim) {
+          target.display('block')
+        },
+        scale: [
+          { value: 1.1, duration: 300 },
+          { value: 1, duration: 200 }
+        ],
+        opacity: 1
+      }
+      display = 'block'
+      break
+    case 'slideRightIn':
+      animation = {
+        begin (anim) {
+          target.display('block')
+        },
+        translateX: ['100%', '0%'],
+        opacity: [0, 1]
+      }
+      display = 'block'
+      break
+    case 'slideRightOut':
+      animation = {
+        translateX: ['0%', '100%'],
+        opacity: [1, 0]
+      }
+      break
+    default:
+      // @ts-ignore
+      animation = type
+      // @ts-ignore
+      display = type.display
+      break
+  }
+  anime(Object.assign({
+    targets: target,
+    duration: 200,
+    easing: 'linear',
+    begin () {
+      begin && begin()
+    },
+    complete () {
+      target.display(display)
+      complete && complete()
+    }
+  }, 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 ? target.getTop() + document.documentElement.scrollTop - siteNavHeight : 0)),
+    // 完成回调函数
+    complete () {
+      complete && complete()
+    }
+  }).play()
+}

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

@@ -0,0 +1,117 @@
+/*
+对注释的说明: 部分注释为openai-chatgpt生成的注释,可能存在描述或语义的问题
+ */
+interface AudioItem {
+  title: string;
+  list: string[];
+}
+
+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;
+  changeOrGetWidth(): number;
+  getTop(): number;
+  left(): number;
+  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;
+  removeClass(className: string): EventTarget;
+  toggleClass(className: string, display?: boolean): EventTarget;
+  hasClass(className: string): boolean;
+}
+
+declare const LOCAL: {
+  path: string;
+  ignores: Array<(uri:string)=>boolean>;
+  audio: string[];
+  search: {
+    placeholder: string,
+    empty: string,
+    stats: string
+  };
+  quiz: {
+    choice: string,
+    multiple: string,
+    true_false: string,
+    essay: string,
+    gap_fill: string,
+    mistake: string
+  };
+  nocopy: boolean;
+  copyright: string;
+  outime: boolean
+  template: string
+  favicon: {
+    hide: string
+    show: string
+  }
+}
+declare const CONFIG: {
+  hostname: string;
+  fireworks: any;
+  audio: AudioItem[];
+  version: number
+  root: string
+  statics: string
+  outime: {
+    enable: boolean
+    days: number
+  }
+  favicon: {
+    normal: string,
+    hidden: string
+  }
+  darkmode: boolean
+  auto_dark: {
+    enable: boolean
+    start: number
+    end: number
+  }
+  auto_scroll: boolean
+  loader: {
+    start: boolean
+    switch: boolean
+  }
+  js: {
+    chart: string
+    copy_tex: string
+    fancybox: string
+    echarts: string
+  }
+  css: {
+    valine: string
+    katex: string
+    mermaid: string
+    fancybox: string
+  }
+  search: any,
+  valine: string
+  quicklink: {
+    ignores: any
+    timeout: number
+    priority: string
+  }
+  playerAPI: string
+}
+declare const instantsearch: any
+
+declare function algoliasearch(appID: string, apiKey: string): any;
+
+declare const quicklink: any
+
+// esbuild 静态常量
+declare const __shokax_player__:boolean
+declare const __shokax_fireworks__:boolean
+declare const __shokax_search__:boolean
+declare const __shokax_VL__:boolean
+declare const __shokax_outime__:boolean
+declare const __shokax_tabs__: boolean
+declare const __shokax_quiz__: boolean
+declare const __shokax_fancybox__: boolean

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

@@ -0,0 +1,26 @@
+const getDocHeight = () => $dom('main > .inner').offsetHeight
+/**
+ * 获取一个dom选择器对应的元素
+ */
+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节点
+ */
+$dom.all = (selector: string, element: Document = document): NodeListOf<HTMLElement> => {
+  return element.querySelectorAll(selector)
+}
+/**
+ * 获取具有此选择器的所有dom节点,并依次执行callback函数
+ */
+$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 }

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

@@ -0,0 +1,4 @@
+export {}
+declare global {
+  const Vue: typeof import('vue')
+}

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

@@ -0,0 +1,41 @@
+import { getScript } from './scriptPjax'
+
+/**
+ * 用途是根据不同的资源名称和类型生成相应的资源 URL。
+ */
+const assetUrl = (asset: string, type: string): string => {
+  const str = CONFIG[asset][type]
+  if (str.includes('http')) {
+    return str
+  }
+  if (str.includes('gh') || str.includes('combine')) {
+    return `https://cdn.jsdelivr.net/${str}`
+  }
+  if (str.includes('npm')) {
+    return `https://cdn.jsdelivr.net/${str}`
+  }
+  return `/${str}`
+}
+
+export const vendorJs = (type: string, callback?: Function, condition?: string) => {
+  if (LOCAL[type]) {
+    getScript(assetUrl('js', type), callback || function () {
+      window[type] = true
+    }, condition || window[type])
+  }
+}
+
+export const vendorCss = (type: string, condition?: string): void => {
+  if (window['css' + type]) {
+    return
+  }
+
+  if (LOCAL[type]) {
+    document.head.createChild('link', {
+      rel: 'stylesheet',
+      href: assetUrl('css', type)
+    })
+
+    window['css' + type] = true
+  }
+}

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

@@ -0,0 +1,143 @@
+import { $dom } from './dom'
+
+export default function initProto () {
+  Object.assign(HTMLElement.prototype, {
+  /**
+   * 创建一个子节点并放置
+   */
+    createChild (tag: string, obj: ElementCreationOptions, positon?: string): HTMLElement {
+      const child = document.createElement(tag)
+      Object.assign(child, obj)
+      switch (positon) {
+        case 'after':
+          this.insertAfter(child)
+          break
+        case 'replace':
+          this.innerHTML = ''
+          this.appendChild(child)
+          break
+        default:
+          this.appendChild(child)
+      }
+      return child
+    },
+    /**
+     *  此方法使用`<div>`包装一个 DOM 元素
+     * @param obj 需要被包装的对象
+     */
+    wrapObject (obj: HTMLElement) {
+      const box = document.createElement('div')
+      Object.assign(box, obj)
+      this.parentNode.insertBefore(box, this)
+      this.parentNode.removeChild(this)
+      box.appendChild(this)
+    },
+    changeOrGetHeight (h?: number | string): number {
+      if (h) {
+      // TODO 0rem是期望的值吗?
+        this.style.height = typeof h === 'number' ? h + 'rem' : h
+      }
+      return this.getBoundingClientRect().height
+    },
+    /**
+   此函数将元素的宽度设置为指定值,如果未提供值,则返回元素的宽度.<br />
+   宽度可以作为数字提供(假定它以`rem`为单位).作为字符串提供则直接设置为元素宽度
+   */
+    changeOrGetWidth (w?: number | string): number {
+      if (w) {
+      // TODO 0rem是期望的值吗?
+        this.style.width = typeof w === 'number' ? w + 'rem' : w
+      }
+      return this.getBoundingClientRect().width
+    },
+    getTop (): number {
+      return this.getBoundingClientRect().top
+    },
+    left (): number {
+      return this.getBoundingClientRect().left
+    },
+    /**
+   * 将此节点插入父节点的下一个节点之前
+   */
+    insertAfter (element: HTMLElement): void {
+      const parent = this.parentNode
+      if (parent.lastChild === this) {
+        parent.appendChild(element)
+      } else {
+        parent.insertBefore(element, this.nextSibling)
+      }
+    },
+    /**
+   * 当d为空时返回此节点的CSSStyle display属性 <br />
+   * 反之,将d设置为此节点的CSSStyle display属性
+   */
+    display (d?: string): string | EventTarget {
+      if (d == null) {
+        return this.style.display
+      } else {
+        this.style.display = d
+        return this
+      }
+    },
+    /**
+   * 找到此节点第一个符合selector选择器的子节点
+   */
+    child (selector: string): HTMLElement {
+      return $dom(selector, this)
+    },
+    /**
+   * 找到此节点所有符合selector选择器的子节点
+   */
+    find (selector: string): NodeListOf<HTMLElement> {
+      return $dom.all(selector, this)
+    },
+    /**
+     * 这个方法接受三个参数：
+     * type 表示操作类型（'add'、'remove'、'toggle'），
+     * className 是一个或多个要操作的类名，
+     * display 是一个可选的布尔值，用于在执行切换操作时指定类名是否应显示或隐藏。
+     * 该方法会根据操作类型执行相应的类名操作。
+   */
+    _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 元素本身，以支持链式调用。
+     */
+    addClass (className: string): EventTarget {
+      this._class('add', className)
+      return this
+    },
+    /**
+     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'remove'，然后执行移除类名的操作。
+     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     */
+    removeClass (className: string): EventTarget {
+      this._class('remove', className)
+      return this
+    },
+    /**
+     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'toggle'，然后执行切换类名的操作。
+     * 如果提供了 display 参数，它将根据布尔值决定是否显示或隐藏类名。
+     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     */
+    toggleClass (className: string, display?: boolean): EventTarget {
+      this._class('toggle', className, display)
+      return this
+    },
+    /**
+     * 这个方法返回一个布尔值，表示元素是否包含指定的类名。
+     */
+    hasClass (className: string): boolean {
+      return this.classList.contains(className)
+    }
+  })
+}

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

@@ -0,0 +1,72 @@
+// rocket-loader & Auto minify(cloudflare) 补丁
+// cloudflare 的上述功能会导致DOMContentLoaded事件无法触发，此补丁会将DOMContentLoaded重定向为load事件
+export function cloudflareInit () {
+  let inCloudFlare = true
+  window.addEventListener('DOMContentLoaded', function () {
+    inCloudFlare = false
+  })
+
+  if (document.readyState === 'loading') {
+    window.addEventListener('load', function () {
+      if (inCloudFlare) {
+        window.dispatchEvent(new Event('DOMContentLoaded'))
+        console.log('%c ☁️cloudflare patch ' + '%c running(rocket & minify)', 'color: white; background: #ff8c00; padding: 5px 3px;', 'padding: 4px;border:1px solid #ff8c00')
+      }
+    })
+  }
+}
+
+export const getScript = (url: string, callback?: Function, condition?: string): void => {
+  // url: 脚本文件的URL地址
+  // callback: 当脚本加载完成时要执行的回调函数
+  // condition: 可选的条件参数，如果存在，则执行callback
+  if (condition) {
+    // 如果条件存在，则执行回调函数
+    callback()
+  } else {
+    let script = document.createElement('script')
+
+    // @ts-ignore
+    script.onload = function (_, isAbort: boolean) {
+      // _: 事件对象
+      // isAbort: 是否中止
+      // @ts-ignore
+      if (isAbort || !script.readyState) {
+        console.log('abort!')
+        script.onload = null
+        script = undefined
+        if (!isAbort && callback) setTimeout(callback, 0)
+      }
+    }
+    script.src = url
+    document.head.appendChild(script)
+  }
+}
+
+export const pjaxScript = (element: HTMLScriptElement) => {
+  const { text, parentNode, id, className, type, src, dataset } = element
+  const code = text || element.textContent || element.innerHTML || ''
+  parentNode.removeChild(element)
+  const script = document.createElement('script')
+  if (id) {
+    script.id = id
+  }
+  if (className) {
+    script.className = className
+  }
+  if (type) {
+    script.type = type
+  }
+  if (src) {
+    // Force synchronous loading of peripheral JS.
+    script.src = src
+    script.async = false
+  }
+  if (dataset.pjax !== undefined) {
+    script.dataset.pjax = ''
+  }
+  if (code !== '') {
+    script.appendChild(document.createTextNode(code))
+  }
+  parentNode.appendChild(script)
+}

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

@@ -0,0 +1,12 @@
+// 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)
+  }
+}

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

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

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

@@ -0,0 +1,42 @@
+import { $dom } from '../library/dom'
+
+export const cardActive = () => {
+  if (!$dom('.index.wrap')) { return }
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach((article) => {
+      if (article.target.hasClass('show')) {
+        io.unobserve(article.target)
+      } else {
+        if (article.isIntersecting || article.intersectionRatio > 0) {
+          article.target.addClass('show')
+          io.unobserve(article.target)
+        }
+      }
+    })
+  }, {
+    root: null,
+    threshold: [0.3]
+  })
+
+  $dom.each('.index.wrap article.item, .index.wrap section.item', (article) => {
+    io.observe(article)
+  })
+
+  $dom('.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')
+        }
+        element.addClass('active')
+      }, { passive: true })
+    });
+    ['mouseleave'].forEach((item) => {
+      element.addEventListener(item, () => {
+        element.removeClass('active')
+      }, { passive: true })
+    })
+  })
+}