hexo-theme-shokax 0.3.13 → 0.4.0-alpha.2

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

@@ -0,0 +1,110 @@
+import anime from 'theme-shokax-anime'
+import { siteNavHeight } from '../globals/globalVars'
+import type { AnimeOptions } from 'theme-shokax-anime/dist/types'
+import {getTop, setDisplay} from './proto'
+
+/**
+ * 参数  动画效果
+ * 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) {
+          setDisplay(target, '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) {
+          setDisplay(target, 'block')
+        },
+        scale: [
+          { value: 1.1, duration: 300 },
+          { value: 1, duration: 200 }
+        ],
+        opacity: 1
+      }
+      display = 'block'
+      break
+    case 'slideRightIn':
+      animation = {
+        begin (anim) {
+          setDisplay(target, '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 () {
+      setDisplay(target, 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 ? getTop(target) + document.documentElement.scrollTop - siteNavHeight : 0)),
+    // 完成回调函数
+    complete () {
+      complete && complete()
+    }
+  }).play()
+}

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

@@ -0,0 +1,126 @@
+/*
+对注释的说明: 部分注释为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;
+}
+
+type walineMeta = 'nick'|'mail'|'link'
+
+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
+  }
+}
+interface configType {
+  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,
+  waline: {
+    serverURL: string
+    lang: string
+    locale: object
+    emoji: boolean
+    meta: walineMeta[]
+    requiredMeta: walineMeta[]
+    wordLimit: number
+    pageSize: number
+    pageview: boolean
+  }
+  walinePageView: boolean
+  quicklink: {
+    ignores: any
+    timeout: number
+    priority: boolean
+  }
+  playerAPI: string
+}
+// 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
+declare const __shokax_waline__:boolean
+declare const shokax_CONFIG:configType

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

@@ -0,0 +1,43 @@
+import { getScript } from './scriptPjax'
+import { CONFIG } from '../globals/globalVars'
+import { createChild } from './proto'
+
+/**
+ * 用途是根据不同的资源名称和类型生成相应的资源 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]) {
+    createChild(document.head, 'link', {
+      rel: 'stylesheet',
+      href: assetUrl('css', type)
+    })
+
+    window['css' + type] = true
+  }
+}

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

@@ -0,0 +1,141 @@
+import { $dom } from './dom'
+
+export const insertAfter = function (el: HTMLElement, element: HTMLElement): void {
+  const parent = el.parentNode
+  if (parent.lastChild === el) {
+    parent.appendChild(element)
+  } else {
+    parent.insertBefore(element, el.nextSibling)
+  }
+}
+
+/**
+ * 创建一个子节点并放置
+ */
+export const createChild = function (parent: HTMLElement, tag: string, obj: object, positon?: string): HTMLElement {
+  const child = document.createElement(tag)
+  Object.assign(child, obj)
+  switch (positon) {
+    case 'after':
+      insertAfter(parent, child)
+      break
+    case 'replace':
+      parent.innerHTML = ''
+      parent.appendChild(child)
+      break
+    default:
+      parent.appendChild(child)
+  }
+  return child
+}
+
+/**
+ *  此方法使用`<div>`包装一个 DOM 元素
+ * @param parent
+ * @param obj 需要被包装的对象
+ */
+export const wrapObject = function (parent: HTMLElement, obj: any): void {
+  const box = document.createElement('div')
+  Object.assign(box, obj)
+  parent.insertBefore(box, obj)
+  parent.removeChild(obj)
+  box.appendChild(obj)
+}
+
+export const getHeight = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().height
+}
+
+export const setWidth = function (el: HTMLElement, w: number|string): void {
+  el.style.width = typeof w === 'number' ? w + 'rem' : w
+}
+
+export const getWidth = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().width
+}
+
+export const getTop = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().top
+}
+
+export const getLeft = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().left
+}
+
+export const getDisplay = function (el: HTMLElement): string {
+  return el.style.display
+}
+
+export const setDisplay = function (el: HTMLElement, d: string): HTMLElement {
+  el.style.display = d
+  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选择器的子节点
+   */
+    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,50 @@
+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'
+export function initVue () {
+  function changeThemeByBtn () {
+    let c: { (): void; (): void; (): void }
+    const btn = child($dom('.theme'), '.ic')
+
+    const neko = createChild(BODY, 'div', {
+      id: 'neko',
+      innerHTML: '<div class="planet"><div class="sun"></div><div class="moon"></div></div><div class="body"><div class="face"><section class="eyes left"><span class="pupil"></span></section><section class="eyes right"><span class="pupil"></span></section><span class="nose"></span></div></div>'
+    })
+
+    const hideNeko = () => {
+      transition(neko, {
+        // @ts-ignore
+        delay: 2500,
+        opacity: 0
+      }, () => {
+        BODY.removeChild(neko)
+      })
+    }
+
+    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)
+    }, () => {
+      setDisplay(neko, 'block')
+    })
+  }
+  child($dom('#rightNav'), '.theme .ic').addEventListener('click', changeThemeByBtn)
+}

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 })
+    })
+  })
+}

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

@@ -0,0 +1,71 @@
+import { $dom } from '../library/dom'
+import { vendorCss, vendorJs } from '../library/loadFile'
+import { insertAfter } from '../library/proto'
+
+export const postFancybox = (p:string) => {
+  if ($dom(p + ' .md img')) {
+    vendorCss('fancybox')
+    vendorCss('justifiedGallery')
+    vendorJs('fancybox', () => {
+      const q = jQuery.noConflict()
+
+      $dom.each(p + ' p.gallery', (element) => {
+        const box = document.createElement('div')
+        box.className = 'gallery'
+        box.setAttribute('data-height', String(element.getAttribute('data-height') || 220))
+
+        box.innerHTML = element.innerHTML.replace(/<br>/g, '')
+
+        element.parentNode.insertBefore(box, element)
+        element.remove()
+      })
+
+      $dom.each(p + ' .md img:not(.emoji):not(.vemoji)', (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')
+        let info; let captionClass = 'image-info'
+        if (!$image.is('a img')) {
+          $image.data('safe-src', imageLink)
+          if (!$image.is('.gallery img')) {
+            $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default')
+          } else {
+            captionClass = 'jg-caption'
+          }
+        }
+        if ((info = element.getAttribute('title'))) {
+          $imageWrapLink.attr('data-caption', info)
+          const para = document.createElement('span')
+          const txt = document.createTextNode(info)
+          para.appendChild(txt)
+          para.addClass(captionClass)
+          insertAfter(element, para)
+        }
+      })
+
+      $dom.each(p + ' div.gallery', (el, i) => {
+        // @ts-ignore
+        q(el).justifiedGallery({
+          rowHeight: q(el).data('height') || 120,
+          rel: 'gallery-' + i
+        }).on('jg.complete', function () {
+          q(this).find('a').each((k, ele) => {
+            ele.setAttribute('data-fancybox', 'gallery-' + i)
+          })
+        })
+      })
+
+      q.fancybox.defaults.hash = false
+      q(p + ' .fancybox').fancybox({
+        loop: true,
+        // @ts-ignore
+        helpers: {
+          overlay: {
+            locked: false
+          }
+        }
+      })
+      // @ts-ignore
+    }, window.jQuery)
+  }
+}