hexo-theme-solitude 1.8.3 → 1.8.4

package/.github/ISSUE_TEMPLATE/config.yml

@@ -8,10 +8,10 @@ contact_links:
     url: https://solitude-docs.efu.me/faq
     about: Solitude Q&A
 
+  - name: Discord
+    url: https://discord.gg/Y8VEvVgW
+    about: 'Official Discord Group'
+
   - name: Telegram
-    url: https://t.me/efuome
+    url: https://t.me/solitudePro
     about: 'Official Telegram Group'
-
-  - name: QQ 群
-    url: https://qm.qq.com/q/VlqOewI4Cu
-    about: '群号 773016811'

package/_config.yml

@@ -410,6 +410,7 @@ footer:
   # 底部上方一排图标
   # Bottom row of icons
   information:
+    author: false # 是否显示 site_icon / enable site_icon in footer
     left: # 左侧显示图标
     #  Github: https://github.com/efuo || st-github-line # 名称：链接 || 图标 / Name: link || icon
     #  Mail: mailto:o@efu.me || st-mail-line

package/layout/includes/footer.pug

@@ -17,8 +17,9 @@ div#footer_deal
         a.deal_link(href=url_for(trim(array[0])), title=label)
             i.solitude(class=array[1])
 
-    div#footer_mini_logo.nolazyload.footer_mini_logo(title=_p('nav.backtop'), onclick="sco.toTop()")
-        img(src=theme.site.icon, alt=_p('nav.backtop'))
+    if theme.footer.information.author
+        div#footer_mini_logo.nolazyload.footer_mini_logo(title=_p('nav.backtop'), onclick="sco.toTop()")
+            img(src=theme.site.icon, alt=_p('nav.backtop'))
 
     each value, label in rightInfo
         - var array = value.split('||')

package/layout/includes/inject/body.pug

@@ -11,6 +11,8 @@ mixin katex
                 })();
 
 div
+    script(src=url_for(theme.cdn.utils))
+    script(src=url_for(theme.cdn.main))
     script(src=url_for(theme.cdn.waterfall))
     script(src=url_for(theme.cdn.pjax))
 
@@ -104,7 +106,7 @@ if theme.footer.randomlink
 include ../widgets/third-party/news-comment/newest-comment.pug
 
 // pjax
-include ../widgets/third-party/pjax.pug
+!= partial("includes/widgets/third-party/pjax", {}, { cache: true })
 
 // theme
 include ../body/mode

package/layout/includes/inject/head.pug

@@ -28,7 +28,7 @@ if theme.pwa.enable
 
 script.
     console.log(
-        "%c Program: Hexo %c Theme: Solitude %c Version: v1.8.3",
+        "%c Program: Hexo %c Theme: Solitude %c Version: v1.8.4",
         "border-radius:5px 0 0 5px;padding: 5px 10px;color:white;background:#ff3842;",
         "padding: 5px 10px;color:white;background:#3e9f50;",
         "border-radius:0 5px 5px 0;padding: 5px 10px;background:#0084ff;color:white;"
@@ -38,5 +38,4 @@ if theme.extends.head
     each item in theme.extends.head
         != item
 
-script(src=url_for(theme.cdn.utils))
-script(src=url_for(theme.cdn.main))
+!=fragment_cache('injectHeadJs', function(){return inject_head_js()})

package/layout/includes/page/says.pug

@@ -51,4 +51,4 @@ if theme.says.enable
                 if theme.says.strip === -1
                     | - 已展开所有短文 -
                 else
-                    | - 只展示最近 #{theme.says.strip} 条短文 -
+                    | - 只展示最近 #{theme.says.strip} 条短文 -

package/layout/includes/widgets/third-party/comments/artalk.pug

@@ -2,7 +2,7 @@
 - const { lazyload, count ,use} = theme.comment
 
 script.
-    !function () {
+    (() => {
         let artalkItem = null
         const initArtalk = () => {
             artalkItem = Artalk.init({
@@ -31,7 +31,7 @@ script.
             utils.addGlobalFn('pjax', destroyArtalk, 'destroyArtalk')
         }
         const loadArtalk = async () => {
-            if (typeof Artalk === 'object') await initArtalk()
+            if (typeof Artalk === 'object') initArtalk()
             else {
                 await utils.getCSS('!{theme.cdn.artalk_css}')
                 await utils.getScript('!{theme.cdn.artalk_js}').then(initArtalk)
@@ -50,7 +50,7 @@ script.
         } else {
             window.loadTwoComment = loadArtalk
         }
-    }()
+    })()
 
 if commentBarrage
     script.

package/layout/includes/widgets/third-party/comments/twikoo.pug

@@ -1,8 +1,8 @@
 - const { envId, region, option ,accessToken } = theme.twikoo
 - const { lazyload, count, use,commentBarrage } = theme.comment
 
-script.
-    !function () {
+script().
+    (() => {
         const getCount = () => {
             const ele = document.querySelectorAll('.twikoo-count')
             if (!ele) return
@@ -17,11 +17,12 @@ script.
                 console.error(err)
             })
         }
-        const init = async () => {
+        const init = () => {
             twikoo.init(Object.assign({
                 el: '#twikoo-wrap',
                 envId: '!{envId}',
                 region: '!{region}',
+                path: window.location.pathname,
                 onCommentLoaded: () => {
                     utils.lightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
                 }
@@ -32,12 +33,10 @@ script.
                 body: '.OwO-body',
                 item: '.OwO-items li'
             })
-
-            if (!{commentBarrage}) await barrageTwikoo()
         }
 
         const loadTwikoo = () => {
-            if (typeof twikoo === 'object') init()
+            if (typeof twikoo === 'object') setTimeout(init,0)
             else utils.getScript('!{url_for(theme.cdn.twikoo)}').then(init)
         }
 
@@ -45,9 +44,9 @@ script.
             if (!{lazyload}) utils.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
             else loadTwikoo()
         } else {
-            window.loadTwoComment = init
+            window.loadTwoComment = loadTwikoo
         }
-    }()
+    })()
 
 if commentBarrage
     script.

package/layout/includes/widgets/third-party/comments/valine.pug

@@ -6,7 +6,7 @@ if site.data.valine
     - emojiMaps = JSON.stringify(site.data.valine)
 
 script.
-    !function () {
+    (() => {
         const initValine = () => {
             const valine = new Valine({
                 el: '#vcomment',
@@ -23,7 +23,7 @@ script.
             sco.owoBig({body: '.vwrap', item: '.vemojis i'})
         }
         const loadValine = async () => {
-            if (typeof Valine === 'function') await initValine()
+            if (typeof Valine === 'function') setTimeout(initValine, 0)
             else {
                 await utils.getScript('!{url_for(theme.cdn.valine)}').then(initValine)
             }
@@ -35,7 +35,7 @@ script.
         } else {
             window.loadTwoComment = loadValine
         }
-    }()
+    })()
 
 if commentBarrage
     script.

package/layout/includes/widgets/third-party/comments/waline.pug

@@ -2,7 +2,7 @@
 - const { lazyload, count, commentBarrage,use } = theme.comment
 
 script.
-    !function () {
+    (() => {
         let walineInitFunction = window.walineFn || null
 
         function initWaline(initFn) {
@@ -40,7 +40,7 @@ script.
             if (!{lazyload}) utils.loadComment(document.getElementById('waline-wrap'), loadWaline)
             else loadWaline()
         } else window.loadTwoComment = loadWaline
-    }()
+    })()
 
 if commentBarrage
     script.

package/layout/includes/widgets/third-party/pjax.pug

@@ -17,6 +17,17 @@ script.
 
     document.addEventListener('pjax:complete', () => {
         window.refreshFn()
+
+        document.querySelectorAll('script[data-pjax]').forEach(item => {
+            const newScript = document.createElement('script')
+            const content = item.text || item.textContent || item.innerHTML || ""
+            Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
+            newScript.appendChild(document.createTextNode(content))
+            item.parentNode.replaceChild(newScript, item)
+        })
+
+        GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
+
     })
 
     document.addEventListener('pjax:error', (e) => {

package/layout/index.pug

@@ -16,7 +16,7 @@ block content
             for post, index in page.posts.sort("-sticky" || "-date").data
                 include ./includes/widgets/home/postList
 
-            // pageination
+            // pagination
             include ./includes/mixins/pagination
         // aside
         include ./includes/widgets/aside/aside

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-solitude",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "A beautiful, powerful, and efficient Hexo theme developed by the efu.",
   "main": "package.json",
   "scripts": {

package/scripts/event/merge_config.js

@@ -152,6 +152,7 @@ hexo.extend.filter.register('before_generate', () => {
             },
             footer: {
                 information: {
+                    author: false,
                     left: null,
                     right: null,
                 },

package/scripts/event/welcome.js

@@ -1,14 +1,14 @@
 hexo.on('ready', () => {
-  const {version} = require('../../package.json')
-  hexo.log.info(`
-===================================================================
-     #####  ####  #     #####  ###### #     # ######   ######
-    #      #    # #       #      #    #     # #      # #
-     ##### #    # #       #      #    #     # #      # ######
-         # #    # #       #      #    #     # #      # #
-    ######  ####  ##### #####    #      ###   ######   ######
-                          ${version}
-===================================================================
-GitHub: https://github.com/valor-x/hexo-theme-solitude
-`)
+    const {version} = require('../../package.json')
+    hexo.log.info(`
+  ===================================================================
+       #####  ####  #     #####  ###### #     # ######   ######
+      #      #    # #       #      #    #     # #      # #
+       ##### #    # #       #      #    #     # #      # ######
+           # #    # #       #      #    #     # #      # #
+      ######  ####  ##### #####    #      ###   ######   ######
+                            ${version}
+  ===================================================================
+  GitHub: https://github.com/valor-x/hexo-theme-solitude
+  `)
 })

package/scripts/helper/inject_head_js.js

@@ -0,0 +1,86 @@
+/**
+ * Solitude
+ * inject is to head
+ */
+
+'use strict';
+
+hexo.extend.helper.register('inject_head_js', function () {
+    const createJS = () => `
+        const saveToLocal = {
+            set: function setWithExpiry(key, value, ttl) {
+                if (ttl === 0)
+                    return
+                const now = new Date()
+                const expiryDay = ttl * 86400000
+                const item = {
+                    value: value,
+                    expiry: now.getTime() + expiryDay
+                }
+                localStorage.setItem(key, JSON.stringify(item))
+            },
+            get: function getWithExpiry(key) {
+                const itemStr = localStorage.getItem(key)
+    
+                if (!itemStr) {
+                    return undefined
+                }
+                const item = JSON.parse(itemStr)
+                const now = new Date()
+    
+                if (now.getTime() > item.expiry) {
+                    localStorage.removeItem(key)
+                    return undefined
+                }
+                return item.value
+            }
+        };
+        window.utils = {
+            saveToLocal: saveToLocal,
+            getCSS: (url, id = false) => new Promise((resolve, reject) => {
+              const link = document.createElement('link')
+              link.rel = 'stylesheet'
+              link.href = url
+              if (id) link.id = id
+              link.onerror = reject
+              link.onload = link.onreadystatechange = function() {
+                const loadState = this.readyState
+                if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+                link.onload = link.onreadystatechange = null
+                resolve()
+              }
+              document.head.appendChild(link)
+            }),
+            getScript: (url, attr = {}) => new Promise((resolve, reject) => {
+              const script = document.createElement('script')
+              script.src = url
+              script.async = true
+              script.onerror = reject
+              script.onload = script.onreadystatechange = function() {
+                const loadState = this.readyState
+                if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+                script.onload = script.onreadystatechange = null
+                resolve()
+              }
+    
+              Object.keys(attr).forEach(key => {
+                script.setAttribute(key, attr[key])
+              })
+    
+              document.head.appendChild(script)
+            }),
+            addGlobalFn: (key, fn, name = false, parent = window) => {
+                const globalFn = parent.globalFn || {}
+                const keyObj = globalFn[key] || {}
+        
+                if (name && keyObj[name]) return
+        
+                name = name || Object.keys(keyObj).length
+                keyObj[name] = fn
+                globalFn[key] = keyObj
+                parent.globalFn = globalFn
+            },
+        }
+    `
+    return `<script>(()=>{${createJS()}})()</script>`
+})

package/source/css/_layout/footer.styl

@@ -80,20 +80,21 @@
         background var(--efu-main)
         transform scale(1.1)
 
-    .footer_mini_logo
-      width 50px
-      height 50px
-      margin 0 1rem
-      cursor pointer
-      transition cubic-bezier(0, 0, 0, 1.29) .5s
-      user-select none
-      border-radius 50px
-      overflow hidden
-      +maxWidth768()
-        display none
-
-      &:hover
-        transform scale(1.2)
+    if hexo-config('footer.information.author')
+      .footer_mini_logo
+        width 50px
+        height 50px
+        margin 0 1rem
+        cursor pointer
+        transition cubic-bezier(0, 0, 0, 1.29) .5s
+        user-select none
+        border-radius 50px
+        overflow hidden
+        +maxWidth768()
+          display none
+
+        &:hover
+          transform scale(1.2)
 
   #st-footer
     display flex

package/source/js/main.js

@@ -889,6 +889,8 @@ window.refreshFn = () => {
     sco.switchComments()
 }
 
+utils.addGlobalFn('pjaxComplete', refreshFn, 'refreshFn')
+
 document.addEventListener('DOMContentLoaded', function () {
     sco.initAdjust()
     percent()

package/source/js/utils.js

@@ -1,343 +1,226 @@
-const utils = {
-    saveToLocal: {
-        set: function setWithExpiry(key, value, ttl) {
-            if (ttl === 0)
-                return
-            const now = new Date()
-            const expiryDay = ttl * 86400000
-            const item = {
-                value: value,
-                expiry: now.getTime() + expiryDay
-            }
-            localStorage.setItem(key, JSON.stringify(item))
-        },
-
-        get: function getWithExpiry(key) {
-            const itemStr = localStorage.getItem(key)
-
-            if (!itemStr) {
-                return undefined
-            }
-            const item = JSON.parse(itemStr)
-            const now = new Date()
-
-            if (now.getTime() > item.expiry) {
-                localStorage.removeItem(key)
-                return undefined
-            }
-            return item.value
-        }
-    },
-    debounce: function (func, wait, immediate) {
-        let timeout
-        return function () {
-            const context = this
-            const args = arguments
+(() => {
+    const utilsFn = {
+        throttle: (func, wait, options) => {
+            let timeout, context, args
+            let previous = 0
+            if (!options) options = {}
             const later = function () {
-                timeout = null
-                if (!immediate) func.apply(context, args)
+                previous = options.leading === false ? 0 : new Date().getTime()
+                func.apply(context, args)
+                context = args = null
             }
-            const callNow = immediate && !timeout
-            clearTimeout(timeout)
-            timeout = setTimeout(later, wait)
-            if (callNow) func.apply(context, args)
-        }
-    },
-
-    throttle: function (func, wait, options) {
-        let timeout, context, args
-        let previous = 0
-        if (!options) options = {}
-
-        const later = function () {
-            previous = options.leading === false ? 0 : new Date().getTime()
-            func.apply(context, args)
-            context = args = null
-        }
-
-        return function () {
-            const now = new Date().getTime()
-            if (!previous && options.leading === false) previous = now
-            const remaining = wait - (now - previous)
-            context = this
-            args = arguments
-            if (remaining <= 0 || remaining > wait) {
-                if (timeout) {
-                    clearTimeout(timeout)
-                    timeout = null
+            return function () {
+                const now = new Date().getTime()
+                if (!previous && options.leading === false) previous = now
+                const remaining = wait - (now - previous)
+                context = this
+                args = arguments
+                if (remaining <= 0 || remaining > wait) {
+                    if (timeout) {
+                        clearTimeout(timeout)
+                        timeout = null
+                    }
+                    previous = now
+                    func.apply(context, args)
+                    if (!timeout) context = args = null
+                } else if (!timeout && options.trailing !== false) {
+                    timeout = setTimeout(later, remaining)
                 }
-                previous = now
-                func.apply(context, args)
-                if (!timeout) context = args = null
-            } else if (!timeout && options.trailing !== false) {
-                timeout = setTimeout(later, remaining)
             }
-        }
-    },
-
-    fadeIn: (ele, time) => {
-        ele.style.cssText = `display:block;animation: to_show ${time}s`
-    },
-
-    fadeOut: (ele, time) => {
-        ele.addEventListener('animationend', function f() {
-            ele.style.cssText = "display: none; animation: '' "
-            ele.removeEventListener('animationend', f)
-        })
-        ele.style.animation = `to_hide ${time}s`
-    },
-
-    sidebarPaddingR: () => {
-        const innerWidth = window.innerWidth
-        const clientWidth = document.body.clientWidth
-        const paddingRight = innerWidth - clientWidth
-        if (innerWidth !== clientWidth) {
-            document.body.style.paddingRight = paddingRight + 'px'
-        }
-    },
-
-    snackbarShow: (text, showAction, duration) => {
-        const sa = (typeof showAction !== 'undefined') ? showAction : false
-        const dur = (typeof duration !== 'undefined') ? duration : 5000
-        document.styleSheets[0].addRule(':root', '--efu-snackbar-time:' + dur + 'ms!important')
-        Snackbar.show({
-            text: text,
-            showAction: sa,
-            duration: dur,
-            pos: 'top-center'
-        })
-    },
-
-    copy: async (text) => {
-        try {
-            await navigator.clipboard.writeText(text)
-            utils.snackbarShow(GLOBAL_CONFIG.lang.copy.success, false, 2000)
-        } catch (err) {
-            utils.snackbarShow(GLOBAL_CONFIG.lang.copy.error, false, 2000)
-        }
-    },
-
-    getEleTop: ele => {
-        let actualTop = 0
-        while (ele) {
-            actualTop += ele.offsetTop
-            ele = ele.offsetParent
-        }
-        return actualTop
-    },
-
-    randomNum: (length) => {
-        return Math.floor(Math.random() * length)
-    },
-
-    timeDiff: (timeObj, today) => {
-        const timeDiff = today.getTime() - timeObj.getTime();
-        return Math.floor(timeDiff / (1000 * 3600 * 24));
-    },
-
-    scrollToDest: (pos, time = 500) => {
-        const currentPos = window.pageYOffset
-        const isNavFixed = document.getElementById('page-header').classList.contains('nav-fixed')
-        if (currentPos > pos || isNavFixed) pos = pos - 70
-        if ('scrollBehavior' in document.documentElement.style) {
-            window.scrollTo({
-                top: pos,
-                behavior: 'smooth'
+        },
+        fadeIn: (ele, time) => ele.style.cssText = `display:block;animation: to_show ${time}s`,
+        fadeOut: (ele, time) => {
+            ele.addEventListener('animationend', function f() {
+                ele.style.cssText = "display: none; animation: '' "
+                ele.removeEventListener('animationend', f)
             })
-            return
-        }
-        let start = null
-        const distance = pos - currentPos
-        window.requestAnimationFrame(function step(currentTime) {
-            start = !start ? currentTime : start
-            const progress = currentTime - start
-            if (progress < time) {
-                window.scrollTo(0, currentPos + distance * progress / time)
-                window.requestAnimationFrame(step)
-            } else {
-                window.scrollTo(0, pos)
+            ele.style.animation = `to_hide ${time}s`
+        },
+        sidebarPaddingR: () => {
+            const innerWidth = window.innerWidth
+            const clientWidth = document.body.clientWidth
+            const paddingRight = innerWidth - clientWidth
+            if (innerWidth !== clientWidth) {
+                document.body.style.paddingRight = paddingRight + 'px'
             }
-        })
-    },
-    siblings: (ele, selector) => {
-        return [...ele.parentNode.children].filter((child) => {
-            if (selector) {
-                return child !== ele && child.matches(selector)
+        },
+        snackbarShow: (text, showAction, duration) => {
+            const sa = (typeof showAction !== 'undefined') ? showAction : false
+            const dur = (typeof duration !== 'undefined') ? duration : 5000
+            document.styleSheets[0].addRule(':root', '--efu-snackbar-time:' + dur + 'ms!important')
+            Snackbar.show({
+                text: text,
+                showAction: sa,
+                duration: dur,
+                pos: 'top-center'
+            })
+        },
+        copy: async (text) => {
+            try {
+                await navigator.clipboard.writeText(text)
+                utils.snackbarShow(GLOBAL_CONFIG.lang.copy.success, false, 2000)
+            } catch (err) {
+                utils.snackbarShow(GLOBAL_CONFIG.lang.copy.error, false, 2000)
             }
-            return child !== ele
-        })
-    },
-    isMobile: () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
-    isHidden: e => 0 === e.offsetHeight && 0 === e.offsetWidth,
-    addEventListenerPjax: (ele, event, fn, option = false) => {
-        ele.addEventListener(event, fn, option)
-        utils.addGlobalFn('pjax', () => {
-            ele.removeEventListener(event, fn, option)
-        })
-    },
-    addGlobalFn: (key, fn, name = false, parent = window) => {
-        const globalFn = parent.globalFn || {}
-        const keyObj = globalFn[key] || {}
-
-        if (name && keyObj[name]) return
-
-        name = name || Object.keys(keyObj).length
-        keyObj[name] = fn
-        globalFn[key] = keyObj
-        parent.globalFn = globalFn
-    },
-    animateIn: (ele, text) => {
-        ele.style.display = 'block'
-        ele.style.animation = text
-    },
-    animateOut: (ele, text) => {
-        ele.addEventListener('animationend', function f() {
-            ele.style.display = ''
-            ele.style.animation = ''
-            ele.removeEventListener('animationend', f)
-        })
-        ele.style.animation = text
-    },
-    wrap: (selector, eleType, options) => {
-        const createEle = document.createElement(eleType)
-        for (const [key, value] of Object.entries(options)) {
-            createEle.setAttribute(key, value)
-        }
-        selector.parentNode.insertBefore(createEle, selector)
-        createEle.appendChild(selector)
-    },
-    lazyloadImg: function () {
-        window.lazyLoadInstance = new LazyLoad({
-            elements_selector: 'img',
-            threshold: 0,
-            data_src: 'lazy-src',
-            callback_error: (img) => {
-                img.setAttribute("src", GLOBAL_CONFIG.lazyload.error);
+        },
+        getEleTop: ele => {
+            let actualTop = 0
+            while (ele) {
+                actualTop += ele.offsetTop
+                ele = ele.offsetParent
             }
-        })
-    },
-    lightbox: function (selector) {
-        const lightbox = GLOBAL_CONFIG.lightbox
-
-        if (lightbox === 'mediumZoom' && mediumZoom) {
-            mediumZoom(selector, {
-                background: "var(--efu-card-bg)"
-            });
-        }
-
-        if (lightbox === 'fancybox') {
-            selector.forEach(i => {
-                if (i.parentNode.tagName !== 'A') {
-                    const dataSrc = i.dataset.lazySrc || i.src
-                    const dataCaption = i.title || i.alt || ''
-                    utils.wrap(i, 'a', {
-                        class: 'fancybox',
-                        href: dataSrc,
-                        'data-fancybox': 'gallery',
-                        'data-caption': dataCaption,
-                        'data-thumb': dataSrc
-                    })
+            return actualTop
+        },
+        randomNum: (length) => {
+            return Math.floor(Math.random() * length)
+        },
+        timeDiff: (timeObj, today) => {
+            const timeDiff = today.getTime() - timeObj.getTime();
+            return Math.floor(timeDiff / (1000 * 3600 * 24));
+        },
+        scrollToDest: (pos, time = 500) => {
+            const currentPos = window.pageYOffset
+            const isNavFixed = document.getElementById('page-header').classList.contains('nav-fixed')
+            if (currentPos > pos || isNavFixed) pos = pos - 70
+            if ('scrollBehavior' in document.documentElement.style) {
+                window.scrollTo({
+                    top: pos,
+                    behavior: 'smooth'
+                })
+                return
+            }
+            let start = null
+            const distance = pos - currentPos
+            window.requestAnimationFrame(function step(currentTime) {
+                start = !start ? currentTime : start
+                const progress = currentTime - start
+                if (progress < time) {
+                    window.scrollTo(0, currentPos + distance * progress / time)
+                    window.requestAnimationFrame(step)
+                } else {
+                    window.scrollTo(0, pos)
                 }
             })
-
-            if (!window.fancyboxRun) {
-                Fancybox.bind('[data-fancybox]', {
-                    Hash: false,
-                    Thumbs: {
-                        showOnStart: false
-                    },
-                    Images: {
-                        Panzoom: {
-                            maxScale: 4
-                        }
-                    },
-                    Carousel: {
-                        transition: 'slide'
-                    },
-                    Toolbar: {
-                        display: {
-                            left: ['infobar'],
-                            middle: ['zoomIn', 'zoomOut', 'toggle1to1', 'rotateCCW', 'rotateCW', 'flipX', 'flipY'],
-                            right: ['slideshow', 'thumbs', 'close']
-                        }
-                    }
-                })
-                window.fancyboxRun = true
+        },
+        siblings: (ele, selector) => {
+            return [...ele.parentNode.children].filter((child) => {
+                if (selector) {
+                    return child !== ele && child.matches(selector)
+                }
+                return child !== ele
+            })
+        },
+        isMobile: () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+        isHidden: e => 0 === e.offsetHeight && 0 === e.offsetWidth,
+        addEventListenerPjax: (ele, event, fn, option = false) => {
+            ele.addEventListener(event, fn, option)
+            utils.addGlobalFn('pjax', () => {
+                ele.removeEventListener(event, fn, option)
+            })
+        },
+        animateIn: (ele, text) => {
+            ele.style.display = 'block'
+            ele.style.animation = text
+        },
+        animateOut: (ele, text) => {
+            ele.addEventListener('animationend', function f() {
+                ele.style.display = ''
+                ele.style.animation = ''
+                ele.removeEventListener('animationend', f)
+            })
+            ele.style.animation = text
+        },
+        wrap: (selector, eleType, options) => {
+            const createEle = document.createElement(eleType)
+            for (const [key, value] of Object.entries(options)) {
+                createEle.setAttribute(key, value)
             }
-        }
-    },
-    diffDate: (d, more = false) => {
-        const dateNow = new Date()
-        const datePost = new Date(d)
-        const dateDiff = dateNow.getTime() - datePost.getTime()
-        const minute = 1000 * 60
-        const hour = minute * 60
-        const day = hour * 24
-        const month = day * 30
-        const {
-            time
-        } = GLOBAL_CONFIG.lang
-
-        if (!more) return parseInt(dateDiff / day)
-
-        const monthCount = dateDiff / month
-        const dayCount = dateDiff / day
-        const hourCount = dateDiff / hour
-        const minuteCount = dateDiff / minute
-
-        if (monthCount > 12) return datePost.toISOString().slice(0, 10)
-        if (monthCount >= 1) return `${parseInt(monthCount)} ${time.month}`
-        if (dayCount >= 1) return `${parseInt(dayCount)} ${time.day}`
-        if (hourCount >= 1) return `${parseInt(hourCount)} ${time.hour}`
-        if (minuteCount >= 1) return `${parseInt(minuteCount)} ${time.min}`
-        return time.just
-    },
-    loadComment: (dom, callback) => {
-        if ('IntersectionObserver' in window) {
-            const observerItem = new IntersectionObserver((entries) => {
-                if (entries[0].isIntersecting) {
-                    callback()
-                    observerItem.disconnect()
+            selector.parentNode.insertBefore(createEle, selector)
+            createEle.appendChild(selector)
+        },
+        lazyloadImg: function () {
+            window.lazyLoadInstance = new LazyLoad({
+                elements_selector: 'img',
+                threshold: 0,
+                data_src: 'lazy-src',
+                callback_error: (img) => {
+                    img.setAttribute("src", GLOBAL_CONFIG.lazyload.error);
                 }
-            }, {
-                threshold: [0]
             })
-            observerItem.observe(dom)
-        } else {
-            callback()
-        }
-    },
-    getCSS: (url, id = false) => new Promise((resolve, reject) => {
-        const link = document.createElement('link')
-        link.rel = 'stylesheet'
-        link.href = url
-        if (id) link.id = id
-        link.onerror = reject
-        link.onload = link.onreadystatechange = function () {
-            const loadState = this.readyState
-            if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-            link.onload = link.onreadystatechange = null
-            resolve()
-        }
-        document.head.appendChild(link)
-    }),
-
-    getScript: (url, attr = {}) => new Promise((resolve, reject) => {
-        const script = document.createElement('script')
-        script.src = url
-        script.async = true
-        script.onerror = reject
-        script.onload = script.onreadystatechange = function () {
-            const loadState = this.readyState
-            if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-            script.onload = script.onreadystatechange = null
-            resolve()
-        }
-
-        Object.keys(attr).forEach(key => {
-            script.setAttribute(key, attr[key])
-        })
-        document.head.appendChild(script)
-    })
-
-}
+        },
+        lightbox: function (selector) {
+            const lightboxType = GLOBAL_CONFIG.lightbox;
+            switch (lightboxType) {
+                case 'mediumZoom':
+                    mediumZoom ? mediumZoom(selector, {background: "var(--efu-card-bg)"}) : false
+                    break;
+                case 'fancybox':
+                    selector.forEach(i => {
+                        if (i.parentNode.tagName !== 'A') {
+                            const dataSrc = i.dataset.lazySrc || i.src;
+                            const dataCaption = i.title || i.alt || '';
+                            utils.wrap(i, 'a', {
+                                class: 'fancybox',
+                                href: dataSrc,
+                                'data-fancybox': 'gallery',
+                                'data-caption': dataCaption,
+                                'data-thumb': dataSrc
+                            });
+                        }
+                    });
+                    if (!window.fancyboxRun) {
+                        Fancybox.bind('[data-fancybox]', {
+                            Hash: false,
+                            Thumbs: {showOnStart: false},
+                            Images: {Panzoom: {maxScale: 4}},
+                            Carousel: {transition: 'slide'},
+                            Toolbar: {
+                                display: {
+                                    left: ['infobar'],
+                                    middle: ['zoomIn', 'zoomOut', 'toggle1to1', 'rotateCCW', 'rotateCW', 'flipX', 'flipY'],
+                                    right: ['slideshow', 'thumbs', 'close']
+                                }
+                            }
+                        });
+                        window.fancyboxRun = true;
+                    }
+                    break;
+            }
+        },
+        diffDate: (d, more = false) => {
+            const dateNow = new Date();
+            const datePost = new Date(d);
+            const dateDiff = dateNow - datePost; // Simplified date difference calculation
+            const minute = 60000;
+            const hour = 3600000;
+            const day = 86400000;
+            const month = 2592000000;
+            const {time} = GLOBAL_CONFIG.lang;
+            if (!more) return Math.floor(dateDiff / day)
+            const minuteCount = Math.floor(dateDiff / minute)
+            const hourCount = Math.floor(dateDiff / hour)
+            const dayCount = Math.floor(dateDiff / day)
+            const monthCount = Math.floor(dateDiff / month)
+            if (monthCount > 12) return datePost.toISOString().slice(0, 10)
+            if (monthCount >= 1) return `${monthCount} ${time.month}`
+            if (dayCount >= 1) return `${dayCount} ${time.day}`
+            if (hourCount >= 1) return `${hourCount} ${time.hour}`
+            if (minuteCount >= 1) return `${minuteCount} ${time.min}`
+            return time.just
+        },
+        loadComment: (dom, callback) => {
+            if ('IntersectionObserver' in window) {
+                const observerItem = new IntersectionObserver((entries) => {
+                    if (entries[0].isIntersecting) {
+                        callback()
+                        observerItem.disconnect()
+                    }
+                }, {threshold: [0]})
+                observerItem.observe(dom)
+            } else {
+                callback()
+            }
+        },
+    }
+    window.utils = {...window.utils, ...utilsFn};
+})()