hexo-theme-shokax 0.3.10 → 0.3.12

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

@@ -1,25 +1,24 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isOutime = exports.Loader = exports.lazyload = void 0;
-const lozad_1 = __importDefault(require("lozad"));
-const globalVars_1 = require("./globalVars");
-const anime_1 = require("../library/anime");
-exports.lazyload = (0, lozad_1.default)('img, [data-background-image]', {
+// 与第三方js的交互或第三方嵌入js
+import lozad from 'lozad';
+import { loadCat } from './globalVars';
+import { transition } from '../library/anime';
+/**
+ * 懒加载图片
+ */
+export const lazyload = lozad('img, [data-background-image]', {
     loaded(el) {
         el.addClass('lozaded');
     }
 });
-exports.Loader = {
+// 加载动画
+export const Loader = {
     timer: undefined,
     lock: false,
     show() {
         clearTimeout(this.timer);
         document.body.removeClass('loaded');
-        globalVars_1.loadCat.attr('style', 'display:block');
-        exports.Loader.lock = false;
+        loadCat.attr('style', 'display:block');
+        Loader.lock = false;
     },
     hide(sec) {
         if (!CONFIG.loader.start) {
@@ -28,17 +27,17 @@ exports.Loader = {
         this.timer = setTimeout(this.vanish, sec || 3000);
     },
     vanish() {
-        if (exports.Loader.lock) {
+        if (Loader.lock) {
             return;
         }
         if (CONFIG.loader.start) {
-            (0, anime_1.transition)(globalVars_1.loadCat, 0);
+            transition(loadCat, 0);
         }
         document.body.addClass('loaded');
-        exports.Loader.lock = true;
+        Loader.lock = true;
     }
 };
-const isOutime = () => {
+export const isOutime = () => {
     let updateTime;
     if (CONFIG.outime.enable && LOCAL.outime) {
         const times = document.getElementsByTagName('time');
@@ -49,17 +48,20 @@ const isOutime = () => {
         if (posts.length === 0) {
             return;
         }
-        const now = Date.now();
-        const pubTime = new Date(times[0].dateTime);
+        const now = Date.now(); // 当前时间戳
+        const pubTime = new Date(times[0].dateTime); // 文章发布时间戳
         if (times.length === 1) {
-            updateTime = pubTime;
+            updateTime = pubTime; // 文章发布时间亦是最后更新时间
         }
         else {
-            updateTime = new Date(times[1].dateTime);
+            updateTime = new Date(times[1].dateTime); // 文章最后更新时间戳
         }
-        const interval = parseInt(String(now - updateTime));
-        const days = parseInt(String(CONFIG.outime.days)) || 30;
+        // @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));
@@ -67,4 +69,3 @@ const isOutime = () => {
         }
     }
 };
-exports.isOutime = isOutime;

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

@@ -1,65 +1,71 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.clipBoard = exports.positionInit = exports.pagePosition = exports.showtip = void 0;
-const anime_1 = require("../library/anime");
-const dom_1 = require("../library/dom");
-const storage_1 = require("../library/storage");
-const globalVars_1 = require("./globalVars");
-const showtip = (msg) => {
+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) => {
     if (!msg) {
         return;
     }
-    const tipbox = globalVars_1.BODY.createChild('div', {
+    const tipbox = BODY.createChild('div', {
         innerHTML: msg,
         className: 'tip'
     });
     setTimeout(() => {
         tipbox.addClass('hide');
         setTimeout(() => {
-            globalVars_1.BODY.removeChild(tipbox);
+            BODY.removeChild(tipbox);
         }, 300);
     }, 3000);
 };
-exports.showtip = showtip;
-const pagePosition = () => {
+export const pagePosition = () => {
+    // 判断配置项是否开启了自动记录滚动位置
     if (CONFIG.auto_scroll) {
-        storage_1.$storage.set(globalVars_1.LOCAL_URL, String(globalVars_1.scrollAction.y));
+        // 将当前页面的滚动位置存入本地缓存
+        $storage.set(LOCAL_URL, String(scrollAction.y));
     }
 };
-exports.pagePosition = pagePosition;
-const positionInit = (comment) => {
+export const positionInit = (comment) => {
+    // 获取页面锚点
     const anchor = window.location.hash;
     let target = null;
-    if (globalVars_1.LOCAL_HASH) {
-        storage_1.$storage.del(globalVars_1.LOCAL_URL);
+    if (LOCAL_HASH) {
+        $storage.del(LOCAL_URL);
         return;
     }
     if (anchor) {
-        target = (0, dom_1.$dom)(decodeURI(anchor));
+        target = $dom(decodeURI(anchor));
     }
     else {
-        target = CONFIG.auto_scroll ? parseInt(storage_1.$storage.get(globalVars_1.LOCAL_URL)) : 0;
+        target = CONFIG.auto_scroll ? parseInt($storage.get(LOCAL_URL)) : 0;
     }
     if (target) {
-        (0, anime_1.pageScroll)(target);
-        (0, globalVars_1.setLocalHash)(1);
+        pageScroll(target);
+        setLocalHash(1);
     }
-    if (comment && anchor && !globalVars_1.LOCAL_HASH) {
-        (0, anime_1.pageScroll)(target);
-        (0, globalVars_1.setLocalHash)(1);
+    if (comment && anchor && !LOCAL_HASH) {
+        pageScroll(target);
+        setLocalHash(1);
     }
 };
-exports.positionInit = positionInit;
-const clipBoard = (str, callback) => {
+/*
+这段代码是用来复制文本的。它使用了浏览器的 Clipboard API，如果浏览器支持该 API 并且当前页面是安全协议 (https)，
+它将使用 Clipboard API 将文本复制到剪贴板。如果不支持，它会创建一个隐藏的文本区域并使用 document.execCommand('copy') 将文本复制到剪贴板。
+最后，它会回调传入的函数并传入一个布尔值表示是否成功复制。
+*/
+export const clipBoard = (str, callback) => {
     if (navigator.clipboard && window.isSecureContext) {
         navigator.clipboard.writeText(str).then(() => {
+            // eslint-disable-next-line chai-friendly/no-unused-expressions
             callback && callback(true);
         }, () => {
+            // eslint-disable-next-line chai-friendly/no-unused-expressions
             callback && callback(false);
         });
     }
     else {
-        const ta = globalVars_1.BODY.createChild('textarea', {
+        // TODO 根据caniuse，需要此polyfill的设备不足5%，应考虑删除
+        const ta = BODY.createChild('textarea', {
             style: {
                 top: window.scrollY + 'px',
                 position: 'absolute',
@@ -74,13 +80,13 @@ const clipBoard = (str, callback) => {
         ta.setSelectionRange(0, str.length);
         ta.readOnly = false;
         const result = document.execCommand('copy');
+        // eslint-disable-next-line chai-friendly/no-unused-expressions
         callback && callback(result);
-        ta.blur();
+        ta.blur(); // For iOS
         if (selected) {
             selection.removeAllRanges();
             selection.addRange(selected);
         }
-        globalVars_1.BODY.removeChild(ta);
+        BODY.removeChild(ta);
     }
 };
-exports.clipBoard = clipBoard;

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

@@ -1,12 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageScroll = exports.transition = void 0;
-const theme_shokax_anime_1 = __importDefault(require("theme-shokax-anime"));
-const globalVars_1 = require("../globals/globalVars");
-const transition = (target, type, complete, begin) => {
+import anime from 'theme-shokax-anime';
+import { siteNavHeight } from '../globals/globalVars';
+/**
+ * 参数  动画效果
+ * 0  元素逐渐消失
+ * 1  元素逐渐出现
+ * bounceUpIn  元素从下方弹跳出现
+ * shrinkIn  元素从放大到正常大小出现
+ * slideRightIn  元素从右侧滑入
+ * slideRightOut  元素向右侧滑出
+ * TODO 函数功能过于复杂，需要拆分
+ */
+export const transition = (target, type, complete, begin) => {
     let animation;
     let display = 'none';
     switch (type) {
@@ -63,32 +67,43 @@ const transition = (target, type, complete, begin) => {
             break;
         default:
             animation = type;
+            // @ts-ignore
             display = type.display;
             break;
     }
-    (0, theme_shokax_anime_1.default)(Object.assign({
+    anime(Object.assign({
         targets: target,
         duration: 200,
         easing: 'linear',
         begin() {
+            // eslint-disable-next-line chai-friendly/no-unused-expressions
             begin && begin();
         },
         complete() {
             target.display(display);
+            // eslint-disable-next-line chai-friendly/no-unused-expressions
             complete && complete();
         }
     }, animation)).play();
 };
-exports.transition = transition;
-const pageScroll = (target, offset, complete) => {
-    (0, theme_shokax_anime_1.default)({
+export const pageScroll = (target, offset, complete) => {
+    // target: 滚动到的目标元素或坐标(number)
+    // offset: 可选的偏移量
+    // complete: 可选的回调函数，在动画完成时调用
+    anime({
+        // 动画目标
         targets: typeof offset === 'number' && typeof target !== 'number' ? target.parentNode : document.scrollingElement,
+        // 动画持续时间
         duration: 500,
+        // 动画缓动函数
         easing: 'easeInOutQuad',
-        scrollTop: offset || (typeof target === 'number' ? target : (target ? target.getTop() + document.documentElement.scrollTop - globalVars_1.siteNavHeight : 0)),
+        // 如果 offset 存在，则滚动到 offset，如果 target 是数字，则滚动到 target，如果 target 是 DOM 元素，则滚动到下述表达式
+        scrollTop: offset || (typeof target === 'number' ? target : (target ? target.getTop() + document.documentElement.scrollTop - siteNavHeight : 0)),
+        // 完成回调函数
         complete() {
+            // eslint-disable-next-line chai-friendly/no-unused-expressions
             complete && complete();
         }
     }).play();
+    // 调用 anime.js 函数，并传入参数
 };
-exports.pageScroll = pageScroll;

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

@@ -1,21 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDocHeight = exports.$dom = void 0;
 const getDocHeight = () => $dom('main > .inner').offsetHeight;
-exports.getDocHeight = getDocHeight;
+/**
+ * 获取一个dom选择器对应的元素
+ */
 const $dom = (selector, element = document) => {
+    // 在测试环境中这能优化0.01-0.02ms左右
     if (selector[0] === '#') {
         return element.getElementById(selector.substring(1));
     }
     return element.querySelector(selector);
 };
-exports.$dom = $dom;
+/**
+ * 获取具有此选择器的所有dom节点
+ */
 $dom.all = (selector, element = document) => {
     return element.querySelectorAll(selector);
 };
+/**
+ * 获取具有此选择器的所有dom节点,并依次执行callback函数
+ */
 $dom.each = (selector, callback, element) => {
     $dom.all(selector, element).forEach(callback);
 };
+// TODO 异步化意义不明确，代码实现存在问题
 $dom.asyncify = async (selector, element = document) => {
     if (selector[0] === '#') {
         return element.getElementById(selector.substring(1));
@@ -25,3 +31,4 @@ $dom.asyncify = async (selector, element = document) => {
 $dom.asyncifyEach = (selector, callback, element) => {
     $dom.all(selector, element).forEach(callback);
 };
+export { $dom, getDocHeight };

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

@@ -1,29 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.vendorCss = exports.vendorJs = void 0;
-const scriptPjax_1 = require("./scriptPjax");
+import { getScript } from './scriptPjax';
+/**
+ * 用途是根据不同的资源名称和类型生成相应的资源 URL。
+ */
 const assetUrl = (asset, type) => {
     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}`;
     }
-    if (str.includes('http')) {
-        return str;
-    }
     return `/${str}`;
 };
-const vendorJs = (type, callback, condition) => {
+export const vendorJs = (type, callback, condition) => {
     if (LOCAL[type]) {
-        (0, scriptPjax_1.getScript)(assetUrl('js', type), callback || function () {
+        getScript(assetUrl('js', type), callback || function () {
             window[type] = true;
         }, condition || window[type]);
     }
 };
-exports.vendorJs = vendorJs;
-const vendorCss = (type, condition) => {
+export const vendorCss = (type, condition) => {
     if (window['css' + type]) {
         return;
     }
@@ -35,4 +34,3 @@ const vendorCss = (type, condition) => {
         window['css' + type] = true;
     }
 };
-exports.vendorCss = vendorCss;

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

@@ -1,8 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const dom_1 = require("./dom");
-function initProto() {
+import { $dom } from './dom';
+export default function initProto() {
     Object.assign(HTMLElement.prototype, {
+        /**
+         * 创建一个子节点并放置
+         */
         createChild(tag, obj, positon) {
             const child = document.createElement(tag);
             Object.assign(child, obj);
@@ -19,6 +20,10 @@ function initProto() {
             }
             return child;
         },
+        /**
+         *  此方法使用`<div>`包装一个 DOM 元素
+         * @param obj 需要被包装的对象
+         */
         wrapObject(obj) {
             const box = document.createElement('div');
             Object.assign(box, obj);
@@ -28,12 +33,18 @@ function initProto() {
         },
         changeOrGetHeight(h) {
             if (h) {
+                // TODO 0rem是期望的值吗?
                 this.style.height = typeof h === 'number' ? h + 'rem' : h;
             }
             return this.getBoundingClientRect().height;
         },
+        /**
+       此函数将元素的宽度设置为指定值,如果未提供值,则返回元素的宽度.<br />
+       宽度可以作为数字提供(假定它以`rem`为单位).作为字符串提供则直接设置为元素宽度
+       */
         changeOrGetWidth(w) {
             if (w) {
+                // TODO 0rem是期望的值吗?
                 this.style.width = typeof w === 'number' ? w + 'rem' : w;
             }
             return this.getBoundingClientRect().width;
@@ -44,6 +55,12 @@ function initProto() {
         left() {
             return this.getBoundingClientRect().left;
         },
+        /**
+       * 该函数接受两个参数：`type`字符串和 `value`字符串的可选参数。该函数具有基于参数值的三个主要逻辑分支。 <br />
+       * 1. `value`如果是`null`，则该函数从当前上下文中删除具有`type`函数名称的属性。 <br />
+       * 2. `value`如果为真，则该函数将使用`type`参数指定的名称将属性设置为当前上下文中`value`参数的值。然后，该函数返回当前上下文。 <br />
+       * 3. `value`如果不是真，则该函数返回属性的值，该值具有当前上下文中的参数指定的名称。
+       */
         attr(type, value) {
             if (value === null) {
                 return this.removeAttribute(type);
@@ -56,6 +73,9 @@ function initProto() {
                 return this.getAttribute(type);
             }
         },
+        /**
+       * 将此节点插入父节点的下一个节点之前
+       */
         insertAfter(element) {
             const parent = this.parentNode;
             if (parent.lastChild === this) {
@@ -65,6 +85,10 @@ function initProto() {
                 parent.insertBefore(element, this.nextSibling);
             }
         },
+        /**
+       * 当d为空时返回此节点的CSSStyle display属性 <br />
+       * 反之,将d设置为此节点的CSSStyle display属性
+       */
         display(d) {
             if (d == null) {
                 return this.style.display;
@@ -74,12 +98,25 @@ function initProto() {
                 return this;
             }
         },
+        /**
+       * 找到此节点第一个符合selector选择器的子节点
+       */
         child(selector) {
-            return (0, dom_1.$dom)(selector, this);
+            return $dom(selector, this);
         },
+        /**
+       * 找到此节点所有符合selector选择器的子节点
+       */
         find(selector) {
-            return dom_1.$dom.all(selector, this);
+            return $dom.all(selector, this);
         },
+        /**
+         * 这个方法接受三个参数：
+         * type 表示操作类型（'add'、'remove'、'toggle'），
+         * className 是一个或多个要操作的类名，
+         * display 是一个可选的布尔值，用于在执行切换操作时指定类名是否应显示或隐藏。
+         * 该方法会根据操作类型执行相应的类名操作。
+       */
         _class(type, className, display) {
             const classNames = className.indexOf(' ') ? className.split(' ') : [className];
             classNames.forEach((name) => {
@@ -91,21 +128,36 @@ function initProto() {
                 }
             });
         },
+        /**
+         * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'add'，然后执行添加类名的操作。
+         * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+         */
         addClass(className) {
             this._class('add', className);
             return this;
         },
+        /**
+         * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'remove'，然后执行移除类名的操作。
+         * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+         */
         removeClass(className) {
             this._class('remove', className);
             return this;
         },
+        /**
+         * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'toggle'，然后执行切换类名的操作。
+         * 如果提供了 display 参数，它将根据布尔值决定是否显示或隐藏类名。
+         * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+         */
         toggleClass(className, display) {
             this._class('toggle', className, display);
             return this;
         },
+        /**
+         * 这个方法返回一个布尔值，表示元素是否包含指定的类名。
+         */
         hasClass(className) {
             return this.classList.contains(className);
         }
     });
 }
-exports.default = initProto;

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

@@ -1,7 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pjaxScript = exports.getScript = exports.cloudflareInit = void 0;
-function cloudflareInit() {
+// rocket-loader & Auto minify(cloudflare) 补丁
+// cloudflare 的上述功能会导致DOMContentLoaded事件无法触发，此补丁会将DOMContentLoaded重定向为load事件
+export function cloudflareInit() {
     let inCloudFlare = true;
     window.addEventListener('DOMContentLoaded', function () {
         inCloudFlare = false;
@@ -15,14 +14,21 @@ function cloudflareInit() {
         });
     }
 }
-exports.cloudflareInit = cloudflareInit;
-const getScript = (url, callback, condition) => {
+export const getScript = (url, callback, condition) => {
+    // url: 脚本文件的URL地址
+    // callback: 当脚本加载完成时要执行的回调函数
+    // condition: 可选的条件参数，如果存在，则执行callback
     if (condition) {
+        // 如果条件存在，则执行回调函数
         callback();
     }
     else {
         let script = document.createElement('script');
+        // @ts-ignore
         script.onload = function (_, isAbort) {
+            // _: 事件对象
+            // isAbort: 是否中止
+            // @ts-ignore
             if (isAbort || !script.readyState) {
                 console.log('abort!');
                 script.onload = null;
@@ -35,8 +41,7 @@ const getScript = (url, callback, condition) => {
         document.head.appendChild(script);
     }
 };
-exports.getScript = getScript;
-const pjaxScript = (element) => {
+export const pjaxScript = (element) => {
     const { text, parentNode, id, className, type, src, dataset } = element;
     const code = text || element.textContent || element.innerHTML || '';
     parentNode.removeChild(element);
@@ -51,6 +56,7 @@ const pjaxScript = (element) => {
         script.type = type;
     }
     if (src) {
+        // Force synchronous loading of peripheral JS.
         script.src = src;
         script.async = false;
     }
@@ -62,4 +68,3 @@ const pjaxScript = (element) => {
     }
     parentNode.appendChild(script);
 };
-exports.pjaxScript = pjaxScript;

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

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$storage = void 0;
-exports.$storage = {
+// Html5LocalStorage的一个API
+export const $storage = {
     set(key, value) {
         localStorage.setItem(key, value);
     },

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

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initVue = void 0;
-const storage_1 = require("./storage");
-const anime_1 = require("./anime");
-const dom_1 = require("./dom");
-const globalVars_1 = require("../globals/globalVars");
-const themeColor_1 = require("../globals/themeColor");
-function initVue() {
+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 {};
@@ -14,24 +11,25 @@ function initVue() {
         methods: {
             changeThemeByBtn() {
                 let c;
-                const btn = (0, dom_1.$dom)('.theme').child('.ic');
-                const neko = globalVars_1.BODY.createChild('div', {
+                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 = () => {
-                    (0, anime_1.transition)(neko, {
+                    transition(neko, {
+                        // @ts-ignore
                         delay: 2500,
                         opacity: 0
                     }, () => {
-                        globalVars_1.BODY.removeChild(neko);
+                        BODY.removeChild(neko);
                     });
                 };
                 if (btn.hasClass('i-sun')) {
                     c = () => {
                         neko.addClass('dark');
-                        (0, themeColor_1.changeTheme)('dark');
-                        storage_1.$storage.set('theme', 'dark');
+                        changeTheme('dark');
+                        $storage.set('theme', 'dark');
                         hideNeko();
                     };
                 }
@@ -39,12 +37,12 @@ function initVue() {
                     neko.addClass('dark');
                     c = () => {
                         neko.removeClass('dark');
-                        (0, themeColor_1.changeTheme)();
-                        storage_1.$storage.set('theme', 'light');
+                        changeTheme();
+                        $storage.set('theme', 'light');
                         hideNeko();
                     };
                 }
-                (0, anime_1.transition)(neko, 1, () => {
+                transition(neko, 1, () => {
                     setTimeout(c, 210);
                 }, () => {
                     neko.display('block');
@@ -53,4 +51,3 @@ function initVue() {
         }
     }).mount('#rightNav');
 }
-exports.initVue = initVue;