hexo-theme-shokax 0.3.10 → 0.3.11

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

@@ -1,96 +1,80 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setSiteSearch = exports.setToolBtn = exports.setShowContents = exports.setGoToComment = exports.setBackToTop = exports.setToolPlayer = exports.setOriginTitle = exports.setPjax = exports.setLocalUrl = exports.setLocalHash = exports.setTitleTime = exports.setDiffY = exports.setOWinWidth = exports.setOWinHeight = exports.setHeaderHight = exports.setHeaderHightInner = exports.setSiteNavHeight = exports.pjax = exports.LOCAL_URL = exports.LOCAL_HASH = exports.oWinWidth = exports.oWinHeight = exports.headerHight = exports.headerHightInner = exports.siteNavHeight = exports.siteSearch = exports.showContents = exports.goToComment = exports.backToTop = exports.toolPlayer = exports.toolBtn = exports.siteBrand = exports.sideBar = exports.quickBtn = exports.menuToggle = exports.siteHeader = exports.siteNav = exports.loadCat = exports.Container = exports.HTML = exports.BODY = exports.titleTime = exports.originTitle = exports.diffY = exports.scrollAction = exports.statics = void 0;
-const dom_1 = require("../library/dom");
-const proto_1 = __importDefault(require("../library/proto"));
-(0, proto_1.default)();
-exports.statics = CONFIG.statics.indexOf('//') > 0 ? CONFIG.statics : CONFIG.root;
-exports.scrollAction = { x: 0, y: 0 };
-exports.diffY = 0;
-exports.BODY = document.getElementsByTagName('body')[0];
-exports.HTML = document.documentElement;
-exports.Container = (0, dom_1.$dom)('#container');
-exports.loadCat = (0, dom_1.$dom)('#loading');
-exports.siteNav = (0, dom_1.$dom)('#nav');
-exports.siteHeader = (0, dom_1.$dom)('#header');
-exports.menuToggle = exports.siteNav.child('.toggle');
-exports.quickBtn = (0, dom_1.$dom)('#quick');
-exports.sideBar = (0, dom_1.$dom)('#sidebar');
-exports.siteBrand = (0, dom_1.$dom)('#brand');
-exports.toolBtn = (0, dom_1.$dom)('#tool');
-exports.siteSearch = (0, dom_1.$dom)('#search');
-exports.oWinHeight = window.innerHeight;
-exports.oWinWidth = window.innerWidth;
-exports.LOCAL_HASH = 0;
-exports.LOCAL_URL = window.location.href;
-function setSiteNavHeight(value) {
-    exports.siteNavHeight = value;
-}
-exports.setSiteNavHeight = setSiteNavHeight;
-function setHeaderHightInner(value) {
-    exports.headerHightInner = value;
-}
-exports.setHeaderHightInner = setHeaderHightInner;
-function setHeaderHight(value) {
-    exports.headerHight = value;
-}
-exports.setHeaderHight = setHeaderHight;
-function setOWinHeight(value) {
-    exports.oWinHeight = value;
-}
-exports.setOWinHeight = setOWinHeight;
-function setOWinWidth(value) {
-    exports.oWinWidth = value;
-}
-exports.setOWinWidth = setOWinWidth;
-function setDiffY(value) {
-    exports.diffY = value;
-}
-exports.setDiffY = setDiffY;
-function setTitleTime(value) {
-    exports.titleTime = value;
-}
-exports.setTitleTime = setTitleTime;
-function setLocalHash(value) {
-    exports.LOCAL_HASH = value;
-}
-exports.setLocalHash = setLocalHash;
-function setLocalUrl(value) {
-    exports.LOCAL_URL = value;
-}
-exports.setLocalUrl = setLocalUrl;
-function setPjax(value) {
-    exports.pjax = value;
-}
-exports.setPjax = setPjax;
-function setOriginTitle(value) {
-    exports.originTitle = value;
-}
-exports.setOriginTitle = setOriginTitle;
-function setToolPlayer(value) {
-    exports.toolPlayer = value;
-}
-exports.setToolPlayer = setToolPlayer;
-function setBackToTop(value) {
-    exports.backToTop = value;
-}
-exports.setBackToTop = setBackToTop;
-function setGoToComment(value) {
-    exports.goToComment = value;
-}
-exports.setGoToComment = setGoToComment;
-function setShowContents(value) {
-    exports.showContents = value;
-}
-exports.setShowContents = setShowContents;
-function setToolBtn(value) {
-    exports.toolBtn = value;
-}
-exports.setToolBtn = setToolBtn;
-function setSiteSearch(value) {
-    exports.siteSearch = value;
-}
-exports.setSiteSearch = setSiteSearch;
+import { $dom } from '../library/dom';
+import initProto from '../library/proto';
+initProto();
+export const statics = CONFIG.statics.indexOf('//') > 0 ? CONFIG.statics : CONFIG.root;
+export const scrollAction = { x: 0, y: 0 };
+export let diffY = 0;
+export let originTitle, titleTime;
+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;
+export let goToComment;
+export let showContents;
+export let siteSearch = $dom('#search');
+export let siteNavHeight, headerHightInner, headerHight;
+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;
+export function setSiteNavHeight(value) {
+    siteNavHeight = value;
+}
+export function setHeaderHightInner(value) {
+    headerHightInner = value;
+}
+export function setHeaderHight(value) {
+    headerHight = value;
+}
+export function setOWinHeight(value) {
+    oWinHeight = value;
+}
+export function setOWinWidth(value) {
+    oWinWidth = value;
+}
+export function setDiffY(value) {
+    diffY = value;
+}
+export function setTitleTime(value) {
+    titleTime = value;
+}
+export function setLocalHash(value) {
+    LOCAL_HASH = value;
+}
+export function setLocalUrl(value) {
+    LOCAL_URL = value;
+}
+export function setPjax(value) {
+    pjax = value;
+}
+export function setOriginTitle(value) {
+    originTitle = value;
+}
+export function setToolPlayer(value) {
+    toolPlayer = value;
+}
+export function setBackToTop(value) {
+    backToTop = value;
+}
+export function setGoToComment(value) {
+    goToComment = value;
+}
+export function setShowContents(value) {
+    showContents = value;
+}
+export function setToolBtn(value) {
+    toolBtn = value;
+}
+export function setSiteSearch(value) {
+    siteSearch = value;
+}

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

@@ -1,80 +1,102 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.visibilityListener = exports.clickMenu = exports.scrollHandle = exports.resizeHandle = void 0;
-const sidebar_1 = require("../components/sidebar");
-const dom_1 = require("../library/dom");
-const globalVars_1 = require("./globalVars");
-const themeColor_1 = require("./themeColor");
-const thirdparty_1 = require("./thirdparty");
-const resizeHandle = () => {
-    (0, globalVars_1.setSiteNavHeight)(globalVars_1.siteNav.changeOrGetHeight());
-    (0, globalVars_1.setHeaderHightInner)(globalVars_1.siteHeader.changeOrGetHeight());
-    (0, globalVars_1.setHeaderHight)(globalVars_1.headerHightInner + (0, dom_1.$dom)('#waves').changeOrGetHeight());
-    if (globalVars_1.oWinWidth !== window.innerWidth) {
-        (0, sidebar_1.sideBarToggleHandle)(null, 1);
+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);
     }
-    (0, globalVars_1.setOWinHeight)(window.innerHeight);
-    (0, globalVars_1.setOWinWidth)(window.innerWidth);
+    // 记录窗口高度和宽度
+    setOWinHeight(window.innerHeight);
+    setOWinWidth(window.innerWidth);
 };
-exports.resizeHandle = resizeHandle;
-const scrollHandle = () => {
+export const scrollHandle = () => {
+    // 获取窗口高度
     const winHeight = window.innerHeight;
-    const docHeight = (0, dom_1.getDocHeight)();
+    // 获取文档高度
+    const docHeight = getDocHeight();
+    // 计算可见内容高度
     const contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight;
-    const SHOW = window.scrollY > globalVars_1.headerHightInner;
+    // 判断页面是否滚动超过 headerHightInner
+    const SHOW = window.scrollY > headerHightInner;
+    // 判断页面是否开始滚动
     const startScroll = window.scrollY > 0;
+    // 根据条件修改 meta theme
     if (SHOW) {
-        (0, themeColor_1.changeMetaTheme)('#FFF');
+        changeMetaTheme('#FFF');
     }
     else {
-        (0, themeColor_1.changeMetaTheme)('#222');
+        changeMetaTheme('#222');
     }
-    globalVars_1.siteNav.toggleClass('show', SHOW);
-    globalVars_1.toolBtn.toggleClass('affix', startScroll);
-    globalVars_1.siteBrand.toggleClass('affix', startScroll);
-    globalVars_1.sideBar.toggleClass('affix', window.scrollY > globalVars_1.headerHight && document.body.offsetWidth > 991);
-    if (typeof globalVars_1.scrollAction.y === 'undefined') {
-        globalVars_1.scrollAction.y = window.scrollY;
+    // 控制导航栏的显示隐藏
+    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;
     }
-    (0, globalVars_1.setDiffY)(globalVars_1.scrollAction.y - window.scrollY);
-    if (globalVars_1.diffY < 0) {
-        globalVars_1.siteNav.removeClass('up');
-        globalVars_1.siteNav.toggleClass('down', SHOW);
+    setDiffY(scrollAction.y - window.scrollY);
+    // 控制滑动时导航栏显示
+    if (diffY < 0) {
+        siteNav.removeClass('up');
+        siteNav.toggleClass('down', SHOW);
     }
-    else if (globalVars_1.diffY > 0) {
-        globalVars_1.siteNav.removeClass('down');
-        globalVars_1.siteNav.toggleClass('up', SHOW);
+    else if (diffY > 0) {
+        siteNav.removeClass('down');
+        siteNav.toggleClass('up', SHOW);
     }
-    else { }
-    globalVars_1.scrollAction.y = window.scrollY;
+    else { /* empty */ }
+    scrollAction.y = window.scrollY;
+    // 计算滚动百分比
     const scrollPercent = Math.round(Math.min(100 * window.scrollY / contentVisibilityHeight, 100)) + '%';
-    if (globalVars_1.backToTop.child('span').innerText !== scrollPercent) {
-        globalVars_1.backToTop.child('span').innerText = scrollPercent;
+    // 更新回到顶部按钮的文字
+    if (backToTop.child('span').innerText !== scrollPercent) {
+        backToTop.child('span').innerText = scrollPercent;
     }
-    if ((0, dom_1.$dom)('#sidebar').hasClass('affix') || (0, dom_1.$dom)('#sidebar').hasClass('on')) {
-        (0, dom_1.$dom)('.percent').changeOrGetWidth(scrollPercent);
+    // 更新百分比进度条的宽度
+    if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
+        $dom('.percent').changeOrGetWidth(scrollPercent);
     }
 };
-exports.scrollHandle = scrollHandle;
-const clickMenu = () => {
-    const menuElement = (0, dom_1.$dom)('#clickMenu');
+/**
+ * 此函数用于修改右键点击显示菜单 <br/>
+ * 需要在document下存在如下元素:
+ * - id为clickMenu的容器(右键菜单容器)
+ * - class为clickSubmenu的容器(可以有0到无限个)(子菜单容器)
+ * CSS应有如下class:
+ * - clickMenu的active类(控制显示)
+ */
+export const clickMenu = () => {
+    const menuElement = $dom('#clickMenu');
     window.oncontextmenu = function (event) {
-        if (event.ctrlKey) {
+        if (event.ctrlKey) { // 当按下ctrl键时不触发自定义菜单
             return;
         }
         event.preventDefault();
-        let x = event.offsetX;
+        let x = event.offsetX; // 触发点到页面窗口左边的距离
         let y = event.offsetY;
-        const winWidth = window.innerWidth;
+        const winWidth = window.innerWidth; // 窗口的内部宽度（包括滚动条）
         const winHeight = window.innerHeight;
-        const menuWidth = menuElement.offsetWidth;
+        const menuWidth = menuElement.offsetWidth; // 菜单宽度
         const menuHeight = menuElement.offsetHeight;
         x = winWidth - menuWidth >= x ? x : winWidth - menuWidth;
         y = winHeight - menuHeight >= y ? y : winHeight - menuHeight;
         menuElement.style.top = y + 'px';
         menuElement.style.left = x + 'px';
         menuElement.classList.add('active');
-        dom_1.$dom.each('.clickSubmenu', (submenu) => {
+        $dom.each('.clickSubmenu', (submenu) => {
             if (x > (winWidth - menuWidth - submenu.offsetWidth)) {
                 submenu.style.left = '-200px';
             }
@@ -88,30 +110,29 @@ const clickMenu = () => {
         menuElement.classList.remove('active');
     });
 };
-exports.clickMenu = clickMenu;
-const visibilityListener = () => {
-    const iconNode = (0, dom_1.$dom)('[rel="icon"]');
+// 可见度监听(离开页面和返回时更改document的title)
+export const visibilityListener = () => {
+    const iconNode = $dom('[rel="icon"]');
     document.addEventListener('visibilitychange', () => {
         switch (document.visibilityState) {
             case 'hidden':
-                iconNode.attr('href', globalVars_1.statics + CONFIG.favicon.hidden);
+                iconNode.attr('href', statics + CONFIG.favicon.hidden);
                 document.title = LOCAL.favicon.hide;
                 if (CONFIG.loader.switch) {
-                    thirdparty_1.Loader.show();
+                    Loader.show();
                 }
-                clearTimeout(globalVars_1.titleTime);
+                clearTimeout(titleTime);
                 break;
             case 'visible':
-                iconNode.attr('href', globalVars_1.statics + CONFIG.favicon.normal);
+                iconNode.attr('href', statics + CONFIG.favicon.normal);
                 document.title = LOCAL.favicon.show;
                 if (CONFIG.loader.switch) {
-                    thirdparty_1.Loader.hide(1000);
+                    Loader.hide(1000);
                 }
-                (0, globalVars_1.setTitleTime)(setTimeout(() => {
-                    document.title = globalVars_1.originTitle;
+                setTitleTime(setTimeout(() => {
+                    document.title = originTitle;
                 }, 2000));
                 break;
         }
     });
 };
-exports.visibilityListener = visibilityListener;

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

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

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;