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

package/_config.yml

@@ -21,8 +21,6 @@ pwa:
 
 # 实验性特性
 experiments:
-  gradient: false # 使用CSS渐变作为文章封面
-  fixedCover: "" # 主页面cover(为空则使用bing随机图片)
   debug: false # 使用debug模式启动
   disableThemeComment: false # 禁用主题评论系统(一般用于关闭评论或让插件接管评论系统)
   usingRelative: false # _image.yml 使用相对路径
@@ -30,6 +28,11 @@ experiments:
   # 具体见https://docs.kaitaku.xyz/guide/theme.html#%E9%95%BF%E6%96%87%E7%AB%A0%E4%BC%98%E5%8C%96
   mobileWidth: 820px # 移动版和桌面版导航栏最短切换长度
 
+homeConfig:
+  gradient: false # 使用CSS渐变作为文章封面
+  # fixedCover 性能比默认的更好，且开启时将启用LCP优化和预加载 TODO
+  fixedCover: "" # 主页面cover(为空则使用bing随机图片)
+
 # ShokaX 模块化分包引入设置
 # 请关闭所有不使用的模块以优化主题 js 体积和性能
 modules:
@@ -41,11 +44,17 @@ modules:
   quiz: true # 启用文章内问题扩展支持
   fancybox: true # 启用 fancybox 支持（不建议禁用）
 
+styles:
+  postprocess: true # 启用后处理器
+  modules:
+    mermaid: false
+
 # 优化性能区
 performance:
   # 使用preconnect预加载的网址(不建议超过三个)
   preConnect:
     - "https://lf9-cdn-tos.bytecdntp.com"
+    - "https://at.alicdn.com"
   # 使用dns-prefetch预解析的网址
   dnsPrefetch:
 

package/languages/README.md

@@ -17,25 +17,3 @@ If you would like to customize the default translation, you do not need to modif
       menu:
         schedule: Calendar
     ```
-
-# Current language packs
-
-- ### English (en)
-- ### 日本語 (ja)
-- ### 中文-简体 (zh-CN)
-- ### 中文-繁体 (zh-HK)
-- ### 中文-台湾 (zh-TW)
-- ### Español (es)
-- ### Deutsch (de)
-- ### Français (fr)
-- ### Italiano (it)
-- ### Português (pt)
-- ### Русский (ru)
-- ### العربية (ar)
-- ### हिंदी (hi)
-- ### 한국어 (ko)
-- ### Nederlands (nl)
-- ### Polski (pl)
-- ### Türkçe (tr)
-- ### Bahasa Indonesia (id)
-- ### Tiếng Việt (vi)

package/layout/_mixin/segment.pug

@@ -1,6 +1,6 @@
 include postmeta.pug
 
-mixin SMRender(item)
+mixin SMRender(item, lazy)
     - var link1 = item.link || item.path
     - var gradient = theme?.experiments?.gradient
     if item.link
@@ -11,7 +11,10 @@ mixin SMRender(item)
             div(class="cover" style=`background: linear-gradient(to bottom right, ${random_color()}, ${random_color()});`)
         else
             div(class="cover")
-                != _url(link1, '<img loading="lazy" data-src="'+ _cover(item) +'" alt="article cover">', {itemprop: 'url', title: postText})
+                if lazy
+                    != _url(link1, '<img loading="lazy" decoding="async" data-src="'+ _cover(item) +'" alt="article cover">', {itemprop: 'url', title: postText})
+                else
+                    != _url(link1, '<img loading="eager" decoding="async" src="'+ _cover(item) +'" alt="article cover">', {itemprop: 'url', title: postText})
         div(class="info")
             +PMRender(item)
             h3

package/layout/_partials/footer.pug

@@ -34,7 +34,7 @@ div(class="status")
             if beianN && RC
                 br
                 a(target="_blank" href=`https://beian.mps.gov.cn/#/query/webSearch?code=${RC}`)
-                    img(src=theme.statics + theme.assets + '/' + theme.footer.icp.icon style="max-width: 2em;display:inline;" width="20" height="20")
+                    img(loading="lazy" decoding="async" data-src=theme.statics + theme.assets + '/' + theme.footer.icp.icon style="max-width: 2em;display:inline;" width="20" height="20")
                     != beianN
     != shokax_inject('status')
 

package/layout/_partials/head/head.pug

@@ -42,16 +42,11 @@ each dnsLink in dnslinks
 if fontConfig
     != _vendor_font()
 != _css('app.css')
-
-if theme.polyfill.enable
-    script(src=`https://polyfill.io/v3/polyfill.min.js?features=${theme.polyfill.features}` defer)
-
-!= vendor_js()
-!= _js('siteInit.js')
+!= preloadjs()
 
 include pwa.pug
-else if wl
-    link(rel="stylesheet" href="https://npm.webcache.cn/@waline/client@v2/dist/waline.css" media="none" onload="this.media='all'")
+if wl
+    link(rel="stylesheet" href="https://npm.webcache.cn/@waline/client@3.0.0-alpha.11/dist/waline.css" media="none" onload="this.media='all'")
 
 - var qw = theme?.qweather?.enable
 if qw

package/layout/_partials/header.pug

@@ -10,7 +10,7 @@ nav(id="nav")
                 a(href=config.root rel="start")
                     != alternate || title
         ul(class="right" id="rightNav")
-            li(class="item theme" @click="changeThemeByBtn")
+            li(class="item theme")
                 i(class="ic i-sun")
             li(class="item search")
                 i(class="ic i-search")

package/layout/_partials/layout.pug

@@ -35,18 +35,18 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
 
                     != partial('_partials/header.pug', {}, {cache: true})
                 div(id="imgs" class="pjax")
-                    if theme.experiments.gradient || theme.experiments.fixedCover
+                    if theme.homeConfig.gradient || theme.homeConfig.fixedCover
                         //- cover不可用时用Bing随机图片代替
-                        - var coverImage = theme.experiments.fixedCover || "https://7ed.net/bing/api"
-                        img(src=coverImage)
+                        - var coverImage = theme.homeConfig.fixedCover || "https://7ed.net/bing/api"
+                        img(src=coverImage loading="eager" decoding="async" fetchpriority="high")
                     else
                         - var covers = _cover_index(page, 6)
                         if covers.length === 6
                             ul
                                 each image in covers
-                                    li(class="item" data-background-image=image)
+                                    li(class="item" style=`background-image: url("${image}");`)
                         else
-                            img(src=covers)
+                            img(src=covers loading="eager" decoding="async" fetchpriority="high")
             div(id="waves")
                 svg(class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto")
                     defs
@@ -119,10 +119,12 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
         != partial('_partials/third-party/baidu-analytics.pug', {}, {cache: true})
         != partial('_partials/third-party/clarity.pug', {}, {cache: true})
         != partial('_partials/third-party/google-analytics.pug', {}, {cache: true})
-        if theme.twikoo.enable
-            != _new_comments('twikoo')
-        else if theme.waline.enable
-            != _new_comments('waline')
+
+        != vendor_js()
+        if theme.polyfill.enable
+            script(src=`https://polyfill.io/v3/polyfill.min.js?features=${theme.polyfill.features}` defer)
+
+        != _js('siteInit.js')
 
         != shokax_inject('bodyEnd')
 

package/layout/_partials/post/post.pug

@@ -11,7 +11,7 @@ article(itemscope itemtype="http://schema.org/Article" class="post block" lang=t
         if post.photos && post.photos.length
             div(class="gallery" itemscope itemtype="http://schema.org/ImageGallery")
                 each photo in post.photos
-                    img(loading="lazy" data-src=_image_url(photo, post.path) itemprop="contentUrl")
+                    img(loading="lazy" decoding="async" data-src=_image_url(photo, post.path) itemprop="contentUrl")
         if theme.summary.enable && page.layout === 'post'
             div(class='tabs' id='summary')
                 div(class="show-btn")

package/layout/_partials/sidebar/overview.pug

@@ -1,6 +1,6 @@
 div(class="author" itemprop="author" itemscope itemtype="http://schema.org/Person")
-    img(loading="lazy" class="image" itemprop="image" alt=author
-        data-src=url_for(theme.statics + theme.assets + '/'+ theme.sidebar.avatar))
+    img(loading="eager" decoding="async" class="image" itemprop="image" alt=author
+        src=url_for(theme.statics + theme.assets + '/'+ theme.sidebar.avatar))
     p(class="name" itemprop="name")
         != author
     div(class="description" itemprop="description")

package/layout/index.pug

@@ -12,7 +12,7 @@ block content
                 - var sticky = page.sticky.toArray()
                 div(class="segments sticky")
                     each post in sticky
-                        +SMRender(post)
+                        +SMRender(post, false)
             if page.catlist.length > 0
                 h2(class="divider")
                     != __('index.category')
@@ -27,7 +27,7 @@ block content
                     != __('index.posts')
             div(class="segments posts")
                 each post in posts
-                    +SMRender(post)
+                    +SMRender(post, true)
     include _partials/pagination.pug
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hexo-theme-shokax",
-    "version": "0.4.0-alpha.3",
+    "version": "0.4.0-alpha.4",
     "description": "a hexo theme based on shoka",
     "main": "index.js",
     "repository": "https://github.com/theme-shoka-x/hexo-theme-shokaX",

package/scripts/generaters/script.js

@@ -62,7 +62,7 @@ hexo.extend.generator.register('script', function (locals) {
         twikoo: {
             envId: theme.twikoo.envId,
             region: theme.twikoo.region
-        },
+        }
     };
     if (config?.algolia) {
         siteConfig.search = {
@@ -151,8 +151,6 @@ hexo.extend.generator.register('script', function (locals) {
                 }
             });
         }
-        node_fs_1.default.unlinkSync(`./shokaxTemp/${file}`);
     });
-    node_fs_1.default.rmSync('./shokaxTemp', { force: true, recursive: true });
     return res;
 });

package/scripts/helpers/asset.js

@@ -53,17 +53,17 @@ hexo.extend.helper.register('_css', function (...urls) {
     return urls.map(url => (0, hexo_util_1.htmlTag)('link', {
         rel: 'stylesheet',
         href: hexo_util_1.url_for.call(this, `${statics}${css}/${url}?v=${package_json_1.default.version}`)
-    })).join('');
+    }), '').join('');
 });
 hexo.extend.helper.register('_js', function (...urls) {
     const { statics, js } = hexo.theme.config;
-    return urls.map(url => (0, hexo_util_1.htmlTag)('script', { src: hexo_util_1.url_for.call(this, `${statics}${js}/${url}?v=${package_json_1.default.version}`), type: 'module', fetchpriority: 'high' }, '')).join('');
+    return urls.map(url => (0, hexo_util_1.htmlTag)('script', { src: hexo_util_1.url_for.call(this, `${statics}${js}/${url}?v=${package_json_1.default.version}`), type: 'module', fetchpriority: 'high', defer: true }, '')).join('');
 });
 hexo.extend.helper.register('vendor_js', function () {
     const vendors = hexo.theme.config.vendors;
     let res = '';
     for (const jsSync in vendors.js) {
-        res += (0, hexo_util_1.htmlTag)('script', { src: (0, utils_1.getVendorLink)(hexo, vendors.js[jsSync]) }, '');
+        res += (0, hexo_util_1.htmlTag)('script', { src: (0, utils_1.getVendorLink)(hexo, vendors.js[jsSync]), async: true }, '');
     }
     // for (const jsAsync in vendors.async_js) {
     //   res += htmlTag('script', { src: getVendorLink(hexo, vendors.async_js[jsAsync]), async: true }, '')

package/scripts/helpers/engine.js

@@ -1,7 +1,11 @@
 'use strict';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 // @ts-ignore
 const hexo_util_1 = require("hexo-util");
+const node_fs_1 = __importDefault(require("node:fs"));
 const randomServer = parseInt(String(Math.random() * 4), 10) + 1;
 const randomBG = function (count = 1, image_server = null, image_list = []) {
     let i;
@@ -48,6 +52,16 @@ const randomBG = function (count = 1, image_server = null, image_list = []) {
     }
     return parseImage(image_list[Math.floor(Math.random() * image_list.length)], 'mw690');
 };
+hexo.extend.helper.register('preloadjs', function () {
+    const { statics, js } = hexo.theme.config;
+    let res = '';
+    node_fs_1.default.readdirSync('./shokaxTemp').forEach((file) => {
+        if (file.endsWith('.js')) {
+            res += (0, hexo_util_1.htmlTag)('link', { rel: 'modulepreload', href: hexo_util_1.url_for.call(this, `${statics}${js}/${file}`) }, '');
+        }
+    });
+    return res;
+});
 // 注册hexo主题中的URL帮助方法
 hexo.extend.helper.register('_url', function (path, text, options = {}) {
     // 如果未提供URL路径，则返回
@@ -96,7 +110,7 @@ hexo.extend.helper.register('_cover_index', function (item) {
         return this._image_url(item.photos[0], item.path);
     }
     else {
-        return randomBG(1, image_server, index_images.length === 0 ? image_list : index_images);
+        return randomBG(6, image_server, index_images.length === 0 ? image_list : index_images);
     }
 });
 // 注册hexo主题的永久链接帮助方法

package/scripts/plugin/index.js

@@ -37,6 +37,7 @@ const fs = __importStar(require("node:fs"));
 hexo.on('generateBefore', () => {
     // 加载`theme_injects`过滤器
     (0, injects_1.default)(hexo);
+    fs.rmSync('./shokaxTemp', { force: true, recursive: true });
     if (fs.existsSync('request.lock')) {
         fs.unlinkSync('request.lock');
     }

package/source/css/_common/scaffolding/base.styl

@@ -149,12 +149,12 @@ input, textarea {
 @font-face {
   font-family: 'ic';
   font-display: swap;
-  src: url('//at.alicdn.com/t/c/font_' + $iconfont + '.eot');
-  src: url('//at.alicdn.com/t/c/font_' + $iconfont + '.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/c/font_' + $iconfont + '.woff2') format('woff2'),
-  url('//at.alicdn.com/t/c/font_' + $iconfont + '.woff') format('woff'),
-  url('//at.alicdn.com/t/c/font_' + $iconfont + '.ttf') format('truetype'),
-  url('//at.alicdn.com/t/c/font_' + $iconfont + '.svg#ic') format('svg');
+  src: url('https://at.alicdn.com/t/c/font_' + $iconfont + '.eot');
+  src: url('https://at.alicdn.com/t/c/font_' + $iconfont + '.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/c/font_' + $iconfont + '.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/c/font_' + $iconfont + '.woff') format('woff'),
+  url('https://at.alicdn.com/t/c/font_' + $iconfont + '.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/c/font_' + $iconfont + '.svg#ic') format('svg');
 }
 
 @font-face {

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

@@ -22,7 +22,7 @@ import {
 } from './globalVars'
 import { changeMetaTheme } from './themeColor'
 import { Loader } from './thirdparty'
-import {getHeight, setWidth} from '../library/proto'
+import { getHeight, setWidth } from '../library/proto'
 
 export const resizeHandle = () => {
   // 获取 siteNav 的高度
@@ -119,5 +119,5 @@ export const visibilityListener = () => {
         }, 2000))
         break
     }
-  })
+  }, { passive: true })
 }

package/source/js/_app/page/search.ts

@@ -5,18 +5,8 @@ import { searchBox, configure, stats, hits, pagination } from 'instantsearch.js/
 import type { HitHighlightResult } from 'instantsearch.js/es/types/results'
 import instantsearch from 'instantsearch.js'
 import algoliasearch from 'algoliasearch/lite'
-import {createChild} from "../library/proto";
 
 export function algoliaSearch (pjax) {
-  if (CONFIG.search === null) { return }
-
-  if (!siteSearch) {
-    setSiteSearch(createChild(BODY, 'div', {
-      id: 'search',
-      innerHTML: '<div class="inner"><div class="header"><span class="icon"><i class="ic i-search"></i></span><div class="search-input-container"></div><span class="close-btn"><i class="ic i-times-circle"></i></span></div><div class="results"><div class="inner"><div id="search-stats"></div><div id="search-hits"></div><div id="search-pagination"></div></div></div></div>'
-    }))
-  }
-
   const search = instantsearch({
     indexName: CONFIG.search.indexName,
     searchClient: algoliasearch(CONFIG.search.appID, CONFIG.search.apiKey),
@@ -104,16 +94,6 @@ export function algoliaSearch (pjax) {
 
   search.start()
 
-  // Handle and trigger popup window
-  $dom.each('.search', (element) => {
-    element.addEventListener('click', () => {
-      document.body.style.overflow = 'hidden'
-      transition(siteSearch, 'shrinkIn', () => {
-        $dom('.search-input').focus()
-      }) // transition.shrinkIn
-    })
-  })
-
   // Monitor main search box
   const onPopupClose = () => {
     document.body.style.overflow = ''

package/source/js/_app/pjax/domInit.ts

@@ -76,6 +76,7 @@ export default function domInit () {
       root: null,
       threshold: 0.2
     }).observe(document.getElementById('waves'))
+
     // sakura在视口外时停止动画
     new IntersectionObserver(([entry]) => {
       if (entry.isIntersecting) {

package/source/js/_app/pjax/refresh.ts

@@ -40,6 +40,25 @@ export const siteRefresh = (reload) => {
   vendorJs('copy_tex')
   vendorCss('mermaid')
 
+  // 懒加载背景图
+  console.log('lazyBg')
+  const lazyBg = new IntersectionObserver(function (entries, observer) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const el = entry.target as HTMLElement
+        el.style.backgroundImage = `url("${el.getAttribute('data-background-image')}")`
+        el.removeAttribute('data-background-image')
+        observer.unobserve(el)
+      }
+    })
+  }, {
+    root: null,
+    threshold: 0.2
+  })
+  document.querySelectorAll('[data-background-image]').forEach(el => {
+    lazyBg.observe(el)
+  })
+
   if (reload !== 1) {
     $dom.each('script[data-pjax]', pjaxScript)
   }
@@ -53,21 +72,44 @@ export const siteRefresh = (reload) => {
   sideBarTab()
   sidebarTOC()
 
-  import('../page/post').then(({ postBeauty }) => {
-    postBeauty()
-  })
+  if (LOCAL.ispost) {
+    import('../page/post').then(({ postBeauty }) => {
+      postBeauty()
+    })
+
+    const comment = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (__shokax_waline__) {
+            import('../components/comments').then(({ walinePageview, walineComment }) => {
+              walinePageview()
+              walineComment()
+            })
+          }
+          if (__shokax_twikoo__) {
+            import('../components/tcomments').then(({ twikooComment }) => {
+              twikooComment()
+            })
+          }
+          comment.disconnect()
+        }
+      })
+    }, {
+      root: null,
+      threshold: 0.2
+    })
+
+    comment.observe($dom('#copyright'))
+  }
 
-  if (__shokax_waline__ && LOCAL.ispost) {
-    import('../components/comments').then(async ({ walineComment, walinePageview, walineRecentComments }) => {
-      walineComment()
-      walinePageview()
+  if (__shokax_waline__) {
+    import('../components/comments').then(async ({ walinePageview, walineRecentComments }) => {
       await walineRecentComments()
     })
   }
 
-  if (__shokax_twikoo__ && LOCAL.ispost) {
-    import('../components/tcomments').then(async ({ twikooComment, twikooRecentComments }) => {
-      twikooComment()
+  if (__shokax_twikoo__) {
+    import('../components/tcomments').then(async ({ twikooRecentComments }) => {
       await twikooRecentComments()
     })
   }

package/source/js/_app/pjax/siteInit.ts

@@ -1,13 +1,16 @@
 import domInit from './domInit'
 import { pjaxReload, siteRefresh } from './refresh'
 import { cloudflareInit } from '../library/scriptPjax'
-import { CONFIG, pjax, setPjax } from '../globals/globalVars'
+import { BODY, CONFIG, pjax, setPjax, setSiteSearch, siteSearch } from '../globals/globalVars'
 import { autoDarkmode, themeColorListener } from '../globals/themeColor'
 import { resizeHandle, scrollHandle, visibilityListener } from '../globals/handles'
 import { pagePosition } from '../globals/tools'
 import Pjax from 'theme-shokax-pjax'
 import { initVue } from '../library/vue'
 import { lazyLoad } from 'unlazy'
+import { $dom } from '../library/dom'
+import { createChild } from '../library/proto'
+import { transition } from '../library/anime'
 
 const siteInit = () => {
   initVue()
@@ -36,10 +39,32 @@ const siteInit = () => {
     visibilityListener()
   }
   themeColorListener()
+
   if (__shokax_search__) {
-    import('../page/search').then(({ algoliaSearch }) => {
-      algoliaSearch(pjax)
-    })
+    $dom('li.item.search > i').addEventListener('click', () => {
+      if (CONFIG.search === null) { return }
+
+      if (!siteSearch) {
+        setSiteSearch(createChild(BODY, 'div', {
+          id: 'search',
+          innerHTML: '<div class="inner"><div class="header"><span class="icon"><i class="ic i-search"></i></span><div class="search-input-container"></div><span class="close-btn"><i class="ic i-times-circle"></i></span></div><div class="results"><div class="inner"><div id="search-stats"></div><div id="search-hits"></div><div id="search-pagination"></div></div></div></div>'
+        }))
+      }
+
+      import('../page/search').then(({ algoliaSearch }) => {
+        algoliaSearch(pjax)
+      })
+
+      // Handle and trigger popup window
+      $dom.each('.search', (element) => {
+        element.addEventListener('click', () => {
+          document.body.style.overflow = 'hidden'
+          transition(siteSearch, 'shrinkIn', () => {
+            $dom('.search-input').focus()
+          }) // transition.shrinkIn
+        })
+      })
+    }, { once: true, capture: true })
   }
 
   if (__shokax_fireworks__) {
@@ -49,13 +74,21 @@ const siteInit = () => {
   }
   lazyLoad()
 
-  window.addEventListener('scroll', scrollHandle)
+  window.addEventListener('scroll', scrollHandle, {
+    passive: true
+  })
 
-  window.addEventListener('resize', resizeHandle)
+  window.addEventListener('resize', resizeHandle, {
+    passive: true
+  })
 
-  window.addEventListener('pjax:send', pjaxReload)
+  window.addEventListener('pjax:send', pjaxReload, {
+    passive: true
+  })
 
-  window.addEventListener('pjax:success', siteRefresh) // 默认会传入一个event参数
+  window.addEventListener('pjax:success', siteRefresh, {
+    passive: true
+  }) // 默认会传入一个event参数
 
   window.addEventListener('beforeunload', () => {
     pagePosition()