hexo-theme-shokax 0.3.14 → 0.3.15

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

@@ -0,0 +1,106 @@
+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) {
+        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, offset, complete) => {
+    // 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/dom.js

@@ -0,0 +1,34 @@
+const getDocHeight = () => $dom('main > .inner').offsetHeight;
+/**
+ * 获取一个dom选择器对应的元素
+ */
+const $dom = (selector, element = document) => {
+    // 在测试环境中这能优化0.01-0.02ms左右
+    if (selector[0] === '#') {
+        return element.getElementById(selector.substring(1));
+    }
+    return element.querySelector(selector);
+};
+/**
+ * 获取具有此选择器的所有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));
+    }
+    return element.querySelector(selector);
+};
+$dom.asyncifyEach = (selector, callback, element) => {
+    $dom.all(selector, element).forEach(callback);
+};
+export { $dom, getDocHeight };

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

@@ -0,0 +1,36 @@
+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}`;
+    }
+    return `/${str}`;
+};
+export const vendorJs = (type, callback, condition) => {
+    if (LOCAL[type]) {
+        getScript(assetUrl('js', type), callback || function () {
+            window[type] = true;
+        }, condition || window[type]);
+    }
+};
+export const vendorCss = (type, condition) => {
+    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.js

@@ -0,0 +1,163 @@
+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);
+            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) {
+            const box = document.createElement('div');
+            Object.assign(box, obj);
+            this.parentNode.insertBefore(box, this);
+            this.parentNode.removeChild(this);
+            box.appendChild(this);
+        },
+        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;
+        },
+        getTop() {
+            return this.getBoundingClientRect().top;
+        },
+        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);
+            }
+            if (value) {
+                this.setAttribute(type, value);
+                return this;
+            }
+            else {
+                return this.getAttribute(type);
+            }
+        },
+        /**
+       * 将此节点插入父节点的下一个节点之前
+       */
+        insertAfter(element) {
+            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) {
+            if (d == null) {
+                return this.style.display;
+            }
+            else {
+                this.style.display = d;
+                return this;
+            }
+        },
+        /**
+       * 找到此节点第一个符合selector选择器的子节点
+       */
+        child(selector) {
+            return $dom(selector, this);
+        },
+        /**
+       * 找到此节点所有符合selector选择器的子节点
+       */
+        find(selector) {
+            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) => {
+                if (type === 'toggle') {
+                    this.classList.toggle(name, display);
+                }
+                else {
+                    this.classList[type](name);
+                }
+            });
+        },
+        /**
+         * 这个方法是对 _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);
+        }
+    });
+}

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

@@ -0,0 +1,70 @@
+// 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, 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;
+                script = undefined;
+                if (!isAbort && callback)
+                    setTimeout(callback, 0);
+            }
+        };
+        script.src = url;
+        document.head.appendChild(script);
+    }
+};
+export const pjaxScript = (element) => {
+    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.js

@@ -0,0 +1,12 @@
+// Html5LocalStorage的一个API
+export const $storage = {
+    set(key, value) {
+        localStorage.setItem(key, value);
+    },
+    get(key) {
+        return localStorage.getItem(key);
+    },
+    del(key) {
+        localStorage.removeItem(key);
+    }
+};

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

@@ -0,0 +1,53 @@
+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;
+                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/comment.js

@@ -0,0 +1,23 @@
+import { $dom } from '../library/dom';
+import { transition } from '../library/anime';
+import { goToComment } from '../globals/globalVars';
+// TODO 此函数在twikoo下可能不适用
+export default function loadComments() {
+    const element = $dom('#comments');
+    if (!element) {
+        goToComment.display('none');
+        return;
+    }
+    else {
+        goToComment.display('');
+    }
+    const io = new IntersectionObserver((entries, observer) => {
+        const entry = entries[0];
+        // vendorCss('valine')
+        if (entry.isIntersecting || entry.intersectionRatio > 0) {
+            transition($dom('#comments'), 'bounceUpIn');
+            observer.disconnect();
+        }
+    });
+    io.observe(element);
+}

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

@@ -0,0 +1,41 @@
+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.js

@@ -0,0 +1,65 @@
+import { $dom } from '../library/dom';
+import { vendorCss, vendorJs } from '../library/loadFile';
+export const postFancybox = (p) => {
+    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.attr('data-height', String(element.attr('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.attr('title'))) {
+                    $imageWrapLink.attr('data-caption', info);
+                    const para = document.createElement('span');
+                    const txt = document.createTextNode(info);
+                    para.appendChild(txt);
+                    para.addClass(captionClass);
+                    element.insertAfter(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.attr('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);
+    }
+};