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

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

@@ -0,0 +1,98 @@
+import { $dom } from '../library/dom'
+import Pjax from 'theme-shokax-pjax'
+import initProto from '../library/proto'
+
+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
+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 let toolPlayer
+export let backToTop: HTMLElement
+export let goToComment
+export let showContents
+export let siteSearch = $dom('#search')
+export let siteNavHeight: number, headerHightInner: number, headerHight: number
+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
+}
+export function setHeaderHightInner (value:number):void {
+  headerHightInner = value
+}
+
+export function setHeaderHight (value:number):void {
+  headerHight = value
+}
+
+export function setOWinHeight (value:number):void {
+  oWinHeight = value
+}
+
+export function setOWinWidth (value:number):void {
+  oWinWidth = value
+}
+
+export function setDiffY (value:number):void {
+  diffY = value
+}
+
+export function setTitleTime (value:NodeJS.Timeout):void {
+  titleTime = value
+}
+
+export function setLocalHash (value:number):void {
+  LOCAL_HASH = value
+}
+
+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
+}
+
+export function setGoToComment (value:any):void {
+  goToComment = value
+}
+
+export function setShowContents (value:any):void {
+  showContents = value
+}
+
+export function setToolBtn (value:HTMLElement):void {
+  toolBtn = value
+}
+
+export function setSiteSearch (value:HTMLElement):void {
+  siteSearch = value
+}

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

@@ -0,0 +1,122 @@
+import { sideBarToggleHandle } from '../components/sidebar'
+import { $dom, getDocHeight } from '../library/dom'
+import {
+  backToTop,
+  diffY,
+  headerHight,
+  headerHightInner,
+  oWinWidth,
+  originTitle,
+  scrollAction,
+  sideBar,
+  siteBrand,
+  siteHeader,
+  siteNav,
+  statics,
+  titleTime,
+  toolBtn,
+  setSiteNavHeight,
+  setHeaderHightInner,
+  setHeaderHight,
+  setOWinHeight, setOWinWidth, setDiffY, setTitleTime
+} from './globalVars'
+import { changeMetaTheme } from './themeColor'
+import { Loader } from './thirdparty'
+
+export const resizeHandle = () => {
+  // 获取 siteNav 的高度
+  setSiteNavHeight(siteNav.changeOrGetHeight())
+  // 获取 siteHeader 的高度
+  setHeaderHightInner(siteHeader.changeOrGetHeight())
+  // 获取 #waves 的高度
+  setHeaderHight(headerHightInner + $dom('#waves').changeOrGetHeight())
+
+  // 判断窗口宽度是否改变
+  if (oWinWidth !== window.innerWidth) {
+    sideBarToggleHandle(null, 1)
+  }
+
+  // 记录窗口高度和宽度
+  setOWinHeight(window.innerHeight)
+  setOWinWidth(window.innerWidth)
+}
+
+export const scrollHandle = () => {
+  // 获取窗口高度
+  const winHeight = window.innerHeight
+  // 获取文档高度
+  const docHeight = getDocHeight()
+  // 计算可见内容高度
+  const contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight
+  // 判断页面是否滚动超过 headerHightInner
+  const SHOW = window.scrollY > headerHightInner
+  // 判断页面是否开始滚动
+  const startScroll = window.scrollY > 0
+
+  // 根据条件修改 meta theme
+  if (SHOW) {
+    changeMetaTheme('#FFF')
+  } else {
+    changeMetaTheme('#222')
+  }
+
+  // 控制导航栏的显示隐藏
+  siteNav.toggleClass('show', SHOW)
+  // 控制网站 logo 的显示隐藏
+  toolBtn.toggleClass('affix', startScroll)
+  // 控制侧边栏的显示隐藏，当滚动高度大于 headerHight 且窗口宽度大于 991px 时显示
+  siteBrand.toggleClass('affix', startScroll)
+  sideBar.toggleClass('affix', window.scrollY > headerHight && document.body.offsetWidth > 991)
+  // 初始化滚动时导航栏的显示方向
+  if (typeof scrollAction.y === 'undefined') {
+    scrollAction.y = window.scrollY
+  }
+  setDiffY(scrollAction.y - window.scrollY)
+
+  // 控制滑动时导航栏显示
+  if (diffY < 0) {
+    siteNav.removeClass('up')
+    siteNav.toggleClass('down', SHOW)
+  } else if (diffY > 0) {
+    siteNav.removeClass('down')
+    siteNav.toggleClass('up', SHOW)
+  } else { /* empty */ }
+  scrollAction.y = window.scrollY
+  // 计算滚动百分比
+  const scrollPercent = Math.round(Math.min(100 * window.scrollY / contentVisibilityHeight, 100)) + '%'
+  // 更新回到顶部按钮的文字
+  if (backToTop.child('span').innerText !== scrollPercent) {
+    backToTop.child('span').innerText = scrollPercent
+  }
+  // 更新百分比进度条的宽度
+  if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
+    $dom('.percent').changeOrGetWidth(scrollPercent)
+  }
+}
+
+// 可见度监听(离开页面和返回时更改document的title)
+export const visibilityListener = () => {
+  const iconNode = $dom('[rel="icon"]')
+  document.addEventListener('visibilitychange', () => {
+    switch (document.visibilityState) {
+      case 'hidden':
+        iconNode.setAttribute('href', statics + CONFIG.favicon.hidden)
+        document.title = LOCAL.favicon.hide
+        if (CONFIG.loader.switch) {
+          Loader.show()
+        }
+        clearTimeout(titleTime)
+        break
+      case 'visible':
+        iconNode.setAttribute('href', statics + CONFIG.favicon.normal)
+        document.title = LOCAL.favicon.show
+        if (CONFIG.loader.switch) {
+          Loader.hide(1000)
+        }
+        setTitleTime(setTimeout(() => {
+          document.title = originTitle
+        }, 2000))
+        break
+    }
+  })
+}

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

@@ -0,0 +1,64 @@
+import { $storage } from '../library/storage'
+import { $dom } from '../library/dom'
+import { HTML } from './globalVars'
+
+/**
+ * 更改日夜模式
+ */
+export const changeTheme = (type?: string) => {
+  const btn = <HTMLElement>$dom('.theme .ic')
+  if (type === 'dark') {
+    HTML.setAttribute('data-theme', type)
+    btn.removeClass('i-sun')
+    btn.addClass('i-moon')
+  } else {
+    HTML.removeAttribute('data-theme')
+    btn.removeClass('i-moon')
+    btn.addClass('i-sun')
+  }
+}
+
+/**
+ * 自动调整黑夜白天
+ * 优先级: 手动选择>时间>跟随系统
+ */
+export const autoDarkmode = () => {
+  if (CONFIG.auto_dark.enable) {
+    if (new Date().getHours() >= CONFIG.auto_dark.start || new Date().getHours() <= CONFIG.auto_dark.end) {
+      changeTheme('dark')
+    } else {
+      changeTheme()
+    }
+  }
+}
+
+/**
+ * 更改主题的meta
+ */
+export const changeMetaTheme = (color: string): void => {
+  if (HTML.getAttribute('data-theme') === 'dark') {
+    color = '#222'
+  }
+
+  $dom('meta[name="theme-color"]').setAttribute('content', color)
+}
+
+// 记忆日夜模式切换和系统亮暗模式监听
+export const themeColorListener = () => {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (mediaQueryList) => {
+    if (mediaQueryList.matches) {
+      changeTheme('dark')
+    } else {
+      changeTheme()
+    }
+  })
+
+  const t = $storage.get('theme')
+  if (t) {
+    changeTheme(t)
+  } else {
+    if (CONFIG.darkmode) {
+      changeTheme('dark')
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+// 与第三方js的交互或第三方嵌入js
+
+import { loadCat } from './globalVars'
+import { transition } from '../library/anime'
+
+// 加载动画
+export const Loader = {
+  timer: undefined,
+  lock: false,
+  show () {
+    clearTimeout(this.timer)
+    document.body.removeClass('loaded')
+    loadCat.setAttribute('style', 'display:block')
+    Loader.lock = false
+  },
+  hide (sec?: number) {
+    if (!CONFIG.loader.start) {
+      sec = -1
+    }
+    this.timer = setTimeout(this.vanish, sec || 3000)
+  },
+  vanish (): void {
+    if (Loader.lock) {
+      return
+    }
+    if (CONFIG.loader.start) {
+      transition(loadCat, 0)
+    }
+    document.body.addClass('loaded')
+    Loader.lock = true
+  }
+}
+
+export const isOutime = (): void => {
+  let updateTime: Date
+  const times = document.getElementsByTagName('time')
+  if (times.length === 0) {
+    return
+  }
+  const posts = document.getElementsByClassName('body md')
+  if (posts.length === 0) {
+    return
+  }
+
+  const now = Date.now() // 当前时间戳
+  const pubTime = new Date(times[0].dateTime) // 文章发布时间戳
+  if (times.length === 1) {
+    updateTime = pubTime // 文章发布时间亦是最后更新时间
+  } else {
+    updateTime = new Date(times[1].dateTime) // 文章最后更新时间戳
+  }
+  // @ts-ignore
+  const interval = parseInt(String(now - updateTime)) // 时间差
+  const days = parseInt(String(CONFIG.outime.days)) || 30 // 设置时效，默认硬编码 30 天
+  // 最后一次更新时间超过 days 天（毫秒）
+  if (interval > (days * 86400000)) {
+    // @ts-ignore
+    const publish = parseInt(String((now - pubTime) / 86400000))
+    const updated = parseInt(String(interval / 86400000))
+    const template = LOCAL.template.replace('{{publish}}', String(publish)).replace('{{updated}}', String(updated))
+    posts[0].insertAdjacentHTML('afterbegin', template)
+  }
+}

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

@@ -0,0 +1,74 @@
+import { pageScroll } from '../library/anime'
+import { $dom } from '../library/dom'
+import { $storage } from '../library/storage'
+import { BODY, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars'
+
+// 显示提示(现阶段用于版权及复制结果提示)
+export const showtip = (msg: string): void | never => {
+  if (!msg) {
+    return
+  }
+
+  const tipbox = BODY.createChild('div', {
+    innerHTML: msg,
+    className: 'tip'
+  })
+
+  setTimeout(() => {
+    tipbox.addClass('hide')
+    setTimeout(() => {
+      BODY.removeChild(tipbox)
+    }, 300)
+  }, 3000)
+}
+
+export const pagePosition = () => {
+  // 判断配置项是否开启了自动记录滚动位置
+  if (CONFIG.auto_scroll) {
+    // 将当前页面的滚动位置存入本地缓存
+    $storage.set(LOCAL_URL, String(scrollAction.y))
+  }
+}
+
+export const positionInit = (comment?: boolean) => {
+  // 获取页面锚点
+  const anchor = window.location.hash
+
+  let target = null
+  if (LOCAL_HASH) {
+    $storage.del(LOCAL_URL)
+    return
+  }
+
+  if (anchor) {
+    target = $dom(decodeURI(anchor))
+  } else {
+    target = CONFIG.auto_scroll ? parseInt($storage.get(LOCAL_URL)) : 0
+  }
+
+  if (target) {
+    pageScroll(target)
+    setLocalHash(1)
+  }
+
+  if (comment && anchor && !LOCAL_HASH) {
+    pageScroll(target)
+    setLocalHash(1)
+  }
+}
+
+/*
+基于clipboard API的复制功能，仅在https环境下有效
+*/
+export const clipBoard = (str: string, callback?: (result:boolean) => void) => {
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(str).then(() => {
+      callback && callback(true)
+    }, () => {
+      callback && callback(false)
+    })
+  } else {
+    console.error('Too old browser, clipborad API not supported.')
+    callback && callback(false)
+  }
+}

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