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

package/scripts/helpers/asset.js

@@ -7,78 +7,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const package_json_1 = __importDefault(require("../../package.json"));
 const hexo_util_1 = require("hexo-util");
 const utils_1 = require("../utils");
+// TODO 弃用函数
 hexo.extend.helper.register('_new_comments', function (mode) {
-    const root = this.config.url.replace(/^(https?:\/\/)?[^\/]*/, '');
-    if (mode === 'twikoo') {
-        return `<script data-pjax type="module">
-            let comments = []
-           twikoo.getRecentComments({
-           envId: "${hexo.theme.config?.twikoo?.envId}",
-           pageSize: 10
-           }).then(function (res) {
-                res.forEach(function (item) {
-                    let cText = item.commentText
-                    if (item.commentText.length > 50) {
-                        cText = item.commentText.substring(0,50)+'...'
-                    }
-                    const siteLink = item.url + "#" + item.id
-                    comments.push({
-                        href: siteLink,
-                        nick: item.nick,
-                        time: item.relativeTime,
-                        text: cText
-                    })
-                });
-                Vue.createApp({
-                  data() {
-                      return {
-                          coms: comments,
-                          root: '${root}'
-                      }
-                  }
-                  }).mount('#new-comment')
-            }).catch(function (err) {
-                console.error(err)
-            })
-        </script>`;
-    }
-    else if (mode === 'waline') {
-        return `
-    <script type="module" data-pjax>
-        let items = []
-        import { RecentComments } from 'https://npm.webcache.cn/@waline/client@v2/dist/waline.mjs'
-        RecentComments({
-          serverURL: '${hexo.theme.config.waline.serverURL.replace(/\/+$/, '')}',
-          count: 10,
-        }).then(({ comments }) => {
-          comments.forEach(function (item) {
-              let cText = (item.orig.length > 50) ? item.orig.substring(0,50)+'...' : item.orig
-              item.url = item.url.startsWith('/') ? item.url : '/' + item.url;
-              const siteLink = item.url + "#" + item.objectId
-              items.push({
-                  href: siteLink,
-                  nick: item.nick,
-                  time: item.insertedAt.split('T').shift(),
-                  text: cText
-              })
-          })
-          Vue.createApp({
-            data() {
-                return {
-                    coms: items,
-                    root: '${root}'
-                }
-            }
-          }).mount('#new-comment')
-        }).catch(function (err) {
-          console.error(err)
-        })
-    </script>
-    `;
-    }
-    else {
-        console.log(`${mode} is not supported recent comment`);
-    }
+    return '';
 });
 hexo.extend.helper.register('_safedump', (source) => {
     return JSON.stringify(source);
@@ -126,7 +57,7 @@ hexo.extend.helper.register('_css', function (...urls) {
 });
 hexo.extend.helper.register('_js', function (...urls) {
     const { statics, js } = hexo.theme.config;
-    return urls.map(url => (0, hexo_util_1.htmlTag)('script', { src: hexo_util_1.url_for.call(this, `${statics}${js}/${url}?v=${package_json_1.default.version}`) }, '')).join('');
+    return urls.map(url => (0, hexo_util_1.htmlTag)('script', { src: hexo_util_1.url_for.call(this, `${statics}${js}/${url}?v=${package_json_1.default.version}`), type: 'module', fetchpriority: 'high' }, '')).join('');
 });
 hexo.extend.helper.register('vendor_js', function () {
     const vendors = hexo.theme.config.vendors;

package/scripts/helpers/list_categories.js

@@ -1,5 +1,3 @@
-'use strict';
-/* global hexo */
 const prepareQuery = (categories, parent) => {
     const query = {
         parent: undefined
@@ -13,7 +11,6 @@ const prepareQuery = (categories, parent) => {
     return categories.find(query).sort('name', 1).filter(cat => cat.length);
 };
 hexo.extend.helper.register('_list_categories', function (depth = 0) {
-    // let hexo = this
     const categories = this.site.categories;
     if (!categories || !categories.length)
         return '';
@@ -48,7 +45,6 @@ hexo.extend.helper.register('_list_categories', function (depth = 0) {
     return hierarchicalList(0);
 });
 hexo.extend.helper.register('_category_prev', function (name) {
-    // let hexo = this
     const categories = this.site.categories;
     if (!categories || !categories.length)
         return '';

package/scripts/plugin/lib/injects.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

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

@@ -0,0 +1,60 @@
+import { CONFIG } from '../globals/globalVars'
+import { init, pageviewCount, RecentComments } from '@waline/client'
+
+import { createApp } from 'vue'
+
+// await import('@waline/client/style')
+// fixme 处理样式引入问题
+
+export const walineComment = function () {
+  init({
+    el: '#comments',
+    serverURL: CONFIG.waline.serverURL,
+    lang: CONFIG.waline.lang,
+    locale: CONFIG.waline.locale,
+    emoji: CONFIG.waline.emoji,
+    meta: CONFIG.waline.meta,
+    requiredMeta: CONFIG.waline.requiredMeta,
+    wordLimit: CONFIG.waline.wordLimit,
+    pageSize: CONFIG.waline.pageSize,
+    pageview: CONFIG.waline.pageview,
+    path: window.location.pathname,
+    dark: 'html[data-theme="dark"]'
+  })
+}
+
+export const walinePageview = function () {
+  pageviewCount({
+    serverURL: CONFIG.waline.serverURL,
+    path: window.location.pathname
+  })
+}
+
+export const walineRecentComments = async function () {
+  const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '')
+  let items = []
+  const { comments } = await RecentComments({
+    serverURL: CONFIG.waline.serverURL.replace(/\/+$/, ''),
+    count: 10
+  })
+  comments.forEach(function (item) {
+    let cText = (item.orig.length > 50) ? item.orig.substring(0, 50) + '...' : item.orig
+    item.url = item.url.startsWith('/') ? item.url : '/' + item.url
+    const siteLink = item.url + '#' + item.objectId
+    items.push({
+      href: siteLink,
+      nick: item.nick,
+      // @ts-ignore
+      time: item.insertedAt.split('T').shift(),
+      text: cText
+    })
+  })
+  createApp({
+    data () {
+      return {
+        coms: items,
+        root
+      }
+    }
+  }).mount('#new-comment')
+}

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

@@ -1,10 +1,12 @@
 /* 边栏分区 */
 
-import { Container, diffY, menuToggle, showContents, sideBar } from '../globals/globalVars'
+import { CONFIG, Container, diffY, menuToggle, showContents, sideBar } from '../globals/globalVars'
 import { clipBoard } from '../globals/tools'
 import { pageScroll, transition } from '../library/anime'
 import { $dom } from '../library/dom'
+import initProto, { child, getHeight, setDisplay } from '../library/proto'
 
+initProto()
 export const sideBarToggleHandle = (event:Event, force?:number) => {
   if (sideBar.hasClass('on')) {
     sideBar.removeClass('on')
@@ -31,7 +33,7 @@ export const sideBarToggleHandle = (event:Event, force?:number) => {
 }
 
 export const sideBarTab = () => {
-  const sideBarInner = sideBar.child('.inner')
+  const sideBarInner = child(sideBar, '.inner')
 
   if (sideBar.child('.tab')) {
     sideBarInner.removeChild(sideBar.child('.tab'))
@@ -45,13 +47,13 @@ export const sideBarTab = () => {
 
     if (element.innerHTML.trim().length < 1) {
       if (item === 'contents') {
-        showContents.display('none')
+        setDisplay(showContents, 'none')
       }
       return
     }
 
     if (item === 'contents') {
-      showContents.display('')
+      setDisplay(showContents, '')
     }
 
     const tab = document.createElement('li')
@@ -212,7 +214,7 @@ export const backToTopHandle = () => {
 }
 
 export const goToBottomHandle = () => {
-  pageScroll(parseInt(String(Container.changeOrGetHeight())))
+  pageScroll(parseInt(String(getHeight(Container))))
 }
 
 export const goToCommentHandle = () => {

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

@@ -0,0 +1,41 @@
+import twikoo from 'twikoo'
+import { CONFIG } from '../globals/globalVars'
+import { createApp } from 'vue'
+
+export const twikooComment = function () {
+  twikoo.init({
+    envId: CONFIG.twikoo.envId,
+    el: '#comments',
+    region: CONFIG.twikoo.region
+  })
+}
+
+export const twikooRecentComments = async function () {
+  let comments = []
+  const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '')
+  const res = await twikoo.getRecentComments({
+    envId: CONFIG.twikoo.envId,
+    pageSize: 10
+  })
+  res.forEach(function (item) {
+    let cText = item.commentText
+    if (item.commentText.length > 50) {
+      cText = item.commentText.substring(0, 50) + '...'
+    }
+    const siteLink = item.url + '#' + item.id
+    comments.push({
+      href: siteLink,
+      nick: item.nick,
+      time: item.relativeTime,
+      text: cText
+    })
+  })
+  createApp({
+    data () {
+      return {
+        coms: comments,
+        root
+      }
+    }
+  }).mount('#new-comment')
+}

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

@@ -2,6 +2,7 @@ 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 }

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

@@ -18,18 +18,19 @@ import {
   setSiteNavHeight,
   setHeaderHightInner,
   setHeaderHight,
-  setOWinHeight, setOWinWidth, setDiffY, setTitleTime
+  setOWinHeight, setOWinWidth, setDiffY, setTitleTime, CONFIG
 } from './globalVars'
 import { changeMetaTheme } from './themeColor'
 import { Loader } from './thirdparty'
+import {getHeight, setWidth} from '../library/proto'
 
 export const resizeHandle = () => {
   // 获取 siteNav 的高度
-  setSiteNavHeight(siteNav.changeOrGetHeight())
+  setSiteNavHeight(getHeight(siteNav))
   // 获取 siteHeader 的高度
-  setHeaderHightInner(siteHeader.changeOrGetHeight())
+  setHeaderHightInner(getHeight(siteHeader))
   // 获取 #waves 的高度
-  setHeaderHight(headerHightInner + $dom('#waves').changeOrGetHeight())
+  setHeaderHight(headerHightInner + getHeight($dom('#waves')))
 
   // 判断窗口宽度是否改变
   if (oWinWidth !== window.innerWidth) {
@@ -90,7 +91,7 @@ export const scrollHandle = () => {
   }
   // 更新百分比进度条的宽度
   if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
-    $dom('.percent').changeOrGetWidth(scrollPercent)
+    setWidth($dom('.percent'), scrollPercent)
   }
 }
 

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

@@ -1,6 +1,6 @@
 import { $storage } from '../library/storage'
 import { $dom } from '../library/dom'
-import { HTML } from './globalVars'
+import { CONFIG, HTML } from './globalVars'
 
 /**
  * 更改日夜模式

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

@@ -1,6 +1,6 @@
 // 与第三方js的交互或第三方嵌入js
 
-import { loadCat } from './globalVars'
+import { CONFIG, loadCat } from './globalVars'
 import { transition } from '../library/anime'
 
 // 加载动画

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

@@ -1,7 +1,8 @@
 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'
+import { BODY, CONFIG, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars'
+import { createChild } from '../library/proto'
 
 // 显示提示(现阶段用于版权及复制结果提示)
 export const showtip = (msg: string): void | never => {
@@ -9,7 +10,7 @@ export const showtip = (msg: string): void | never => {
     return
   }
 
-  const tipbox = BODY.createChild('div', {
+  const tipbox = createChild(BODY, 'div', {
     innerHTML: msg,
     className: 'tip'
   })

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

@@ -1,6 +1,7 @@
 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'
 
 /**
  * 参数  动画效果
@@ -26,7 +27,7 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
     case 'bounceUpIn':
       animation = {
         begin (anim) {
-          target.display('block')
+          setDisplay(target, 'block')
         },
         translateY: [
           { value: -60, duration: 200 },
@@ -41,7 +42,7 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
     case 'shrinkIn':
       animation = {
         begin (anim) {
-          target.display('block')
+          setDisplay(target, 'block')
         },
         scale: [
           { value: 1.1, duration: 300 },
@@ -54,7 +55,7 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
     case 'slideRightIn':
       animation = {
         begin (anim) {
-          target.display('block')
+          setDisplay(target, 'block')
         },
         translateX: ['100%', '0%'],
         opacity: [0, 1]
@@ -82,7 +83,7 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
       begin && begin()
     },
     complete () {
-      target.display(display)
+      setDisplay(target, display)
       complete && complete()
     }
   }, animation)).play()
@@ -100,7 +101,7 @@ export const pageScroll = (target: HTMLElement|number, offset?: number, complete
     // 动画缓动函数
     easing: 'easeInOutQuad',
     // 如果 offset 存在，则滚动到 offset，如果 target 是数字，则滚动到 target，如果 target 是 DOM 元素，则滚动到下述表达式
-    scrollTop: offset || (typeof target === 'number' ? target : (target ? target.getTop() + document.documentElement.scrollTop - siteNavHeight : 0)),
+    scrollTop: offset || (typeof target === 'number' ? target : (target ? getTop(target) + document.documentElement.scrollTop - siteNavHeight : 0)),
     // 完成回调函数
     complete () {
       complete && complete()

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

@@ -27,7 +27,10 @@ declare interface EventTarget {
   hasClass(className: string): boolean;
 }
 
+type walineMeta = 'nick'|'mail'|'link'
+
 declare const LOCAL: {
+  ispost: boolean;
   path: string;
   ignores: Array<(uri:string)=>boolean>;
   audio: string[];
@@ -53,7 +56,7 @@ declare const LOCAL: {
     show: string
   }
 }
-declare const CONFIG: {
+interface configType {
   hostname: string;
   fireworks: any;
   audio: AudioItem[];
@@ -92,20 +95,29 @@ declare const CONFIG: {
     fancybox: string
   }
   search: any,
-  valine: string
+  waline: {
+    serverURL: string
+    lang: string
+    locale: object
+    emoji: boolean
+    meta: walineMeta[]
+    requiredMeta: walineMeta[]
+    wordLimit: number
+    pageSize: number
+    pageview: boolean
+  }
+  twikoo: {
+    envId: string
+    region: string
+  }
+  walinePageView: boolean
   quicklink: {
     ignores: any
     timeout: number
-    priority: string
+    priority: boolean
   }
   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
@@ -115,3 +127,7 @@ 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_twikoo__:boolean
+declare const shokax_CONFIG:configType
+declare const shokax_siteURL:string

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

@@ -1,4 +1,6 @@
 import { getScript } from './scriptPjax'
+import { CONFIG } from '../globals/globalVars'
+import { createChild } from './proto'
 
 /**
  * 用途是根据不同的资源名称和类型生成相应的资源 URL。
@@ -31,7 +33,7 @@ export const vendorCss = (type: string, condition?: string): void => {
   }
 
   if (LOCAL[type]) {
-    document.head.createChild('link', {
+    createChild(document.head, 'link', {
       rel: 'stylesheet',
       href: assetUrl('css', type)
     })

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

@@ -1,84 +1,82 @@
 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.parentNode.insertBefore(box, parent)
+  parent.parentNode.removeChild(parent)
+  box.appendChild(parent)
+}
+
+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, {
-  /**
-   * 创建一个子节点并放置
-   */
-    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选择器的子节点
    */