hexo-theme-shokax 0.4.0-alpha.2 → 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/layout/_mixin/comment.pug

@@ -1,41 +1,6 @@
 mixin CommentRender()
     != shokax_inject('comment')
-    - var tk = theme?.twikoo?.enable,wl = theme?.waline?.enable
-    if page.comment !== false && !theme.experiments.disableThemeComment
-        if tk
-            div(class="wrap" id="comments")
-            script(type="text/javascript" data-pjax).
-                setTimeout(function () {
-                    twikoo.init({
-                        envId: '#{ theme.twikoo.envId }',
-                        el: '#comments',
-                        region: '#{theme.twikoo.region}'
-                    })
-                }, 1000)
-        else if wl
-            div(class="wrap" id="comments")
-            - var locale = JSON.stringify(theme.waline.locale)
-            - var emoji = JSON.stringify(theme.waline.emoji)
-            - var meta = JSON.stringify(theme.waline.meta)
-            - var requiredMeta = JSON.stringify(theme.waline.requiredMeta)
-            script(type="module" data-pjax).
-                import { init } from 'https://npm.webcache.cn/@waline/client@v2/dist/waline.mjs';
-
-                setTimeout(function () {
-                    init({
-                        el: '#comments',
-                        serverURL: '#{theme.waline.serverURL.replace(/\/+$/, '')}',
-                        lang: '#{theme.waline.lang}',
-                        locale: !{locale},
-                        emoji: !{emoji},
-                        meta: !{meta},
-                        requiredMeta: !{requiredMeta},
-                        wordLimit: #{theme.waline.wordLimit},
-                        pageSize: #{theme.waline.pageSize},
-                        pageview: #{theme.waline.pageview},
-                        path: window.location.pathname,
-                        dark: 'html[data-theme="dark"]'
-                    });
-                }, 1000)
+    if page.comment !== false
+        div(class="wrap" id="comments")
 
 

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,18 +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
-if tk
-    script(src=theme.twikoo.link )
-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
@@ -82,6 +82,7 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
 
         script(data-config type="text/javascript").
             var LOCAL = {
+                ispost: !{is_post()},
                     path: `#{_permapath(page.path)}`,
                     favicon: {
                     show: `#{__('favicon.show')}`,
@@ -118,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/footer.pug

@@ -12,13 +12,5 @@ div(class="meta")
                 != __('post.edited')
             time(title=__('post.modified') + __('symbol.colon') + full_date(post.updated) itemprop="dateModified" datetime=moment(post.updated).format())
                 != date(post.updated)
-    if theme.waline.pageview && !theme.waline.enable && !theme.twikoo.enable
-        script(type = "module" data-pjax).
-            import { pageviewCount } from 'https://unpkg.com/@waline/client@2/dist/pageview.mjs';
-
-            pageviewCount({
-                serverURL: '#{theme.waline.serverURL}',
-                path: window.location.pathname,
-            });
 
     != shokax_inject('postMeta')

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.2",
+    "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",
@@ -43,6 +43,7 @@
         "quicklink": "^2.3.0",
         "theme-shokax-anime": "^0.0.6",
         "theme-shokax-pjax": "^0.0.3",
+        "twikoo": "^1.6.31",
         "unlazy": "^0.10.4"
     },
     "engines": {

package/scripts/generaters/script.js

@@ -47,7 +47,22 @@ hexo.extend.generator.register('script', function (locals) {
         audio: undefined,
         fireworks: (theme.fireworks && theme.fireworks.enable && theme.fireworks.options)
             ? theme.fireworks.options
-            : undefined
+            : undefined,
+        waline: {
+            serverURL: theme.waline.serverURL,
+            lang: theme.waline.lang,
+            locale: theme.waline.locale,
+            emoji: theme.waline.emoji,
+            meta: theme.waline.meta,
+            requiredMeta: theme.waline.requiredMeta,
+            wordLimit: theme.waline.wordLimit,
+            pageSize: theme.waline.pageSize,
+            pageview: theme.waline.pageview
+        },
+        twikoo: {
+            envId: theme.twikoo.envId,
+            region: theme.twikoo.region
+        }
     };
     if (config?.algolia) {
         siteConfig.search = {
@@ -98,7 +113,10 @@ hexo.extend.generator.register('script', function (locals) {
             __shokax_tabs__: theme.modules.tabs ? 'true' : 'false',
             __shokax_quiz__: theme.modules.quiz ? 'true' : 'false',
             __shokax_fancybox__: theme.modules.fancybox ? 'true' : 'false',
-            shokax_CONFIG: JSON.stringify(siteConfig)
+            __shokax_waline__: theme.waline.enable ? 'true' : 'false',
+            __shokax_twikoo__: theme.twikoo.enable ? 'true' : 'false',
+            shokax_CONFIG: JSON.stringify(siteConfig),
+            shokax_siteURL: "'" + config.url + "'"
         },
         alias: {
             'algoliasearch/lite': 'algoliasearch/dist/algoliasearch-lite.esm.browser.js'
@@ -133,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

@@ -7,78 +7,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const package_json_1 = __importDefault(require("../../package.json"));
 const hexo_util_1 = require("hexo-util");
 const utils_1 = require("../utils");
+// TODO 弃用函数
 hexo.extend.helper.register('_new_comments', function (mode) {
-    const root = this.config.url.replace(/^(https?:\/\/)?[^\/]*/, '');
-    if (mode === 'twikoo') {
-        return `<script data-pjax type="module">
-            let comments = []
-           twikoo.getRecentComments({
-           envId: "${hexo.theme.config?.twikoo?.envId}",
-           pageSize: 10
-           }).then(function (res) {
-                res.forEach(function (item) {
-                    let cText = item.commentText
-                    if (item.commentText.length > 50) {
-                        cText = item.commentText.substring(0,50)+'...'
-                    }
-                    const siteLink = item.url + "#" + item.id
-                    comments.push({
-                        href: siteLink,
-                        nick: item.nick,
-                        time: item.relativeTime,
-                        text: cText
-                    })
-                });
-                Vue.createApp({
-                  data() {
-                      return {
-                          coms: comments,
-                          root: '${root}'
-                      }
-                  }
-                  }).mount('#new-comment')
-            }).catch(function (err) {
-                console.error(err)
-            })
-        </script>`;
-    }
-    else if (mode === 'waline') {
-        return `
-    <script type="module" data-pjax>
-        let items = []
-        import { RecentComments } from 'https://npm.webcache.cn/@waline/client@v2/dist/waline.mjs'
-        RecentComments({
-          serverURL: '${hexo.theme.config.waline.serverURL.replace(/\/+$/, '')}',
-          count: 10,
-        }).then(({ comments }) => {
-          comments.forEach(function (item) {
-              let cText = (item.orig.length > 50) ? item.orig.substring(0,50)+'...' : item.orig
-              item.url = item.url.startsWith('/') ? item.url : '/' + item.url;
-              const siteLink = item.url + "#" + item.objectId
-              items.push({
-                  href: siteLink,
-                  nick: item.nick,
-                  time: item.insertedAt.split('T').shift(),
-                  text: cText
-              })
-          })
-          Vue.createApp({
-            data() {
-                return {
-                    coms: items,
-                    root: '${root}'
-                }
-            }
-          }).mount('#new-comment')
-        }).catch(function (err) {
-          console.error(err)
-        })
-    </script>
-    `;
-    }
-    else {
-        console.log(`${mode} is not supported recent comment`);
-    }
+    return '';
 });
 hexo.extend.helper.register('_safedump', (source) => {
     return JSON.stringify(source);
@@ -122,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/components/comments.ts

@@ -1,5 +1,7 @@
 import { CONFIG } from '../globals/globalVars'
-import { init, pageviewCount } from '@waline/client'
+import { init, pageviewCount, RecentComments } from '@waline/client'
+
+import { createApp } from 'vue'
 
 // await import('@waline/client/style')
 // fixme 处理样式引入问题
@@ -29,5 +31,30 @@ export const walinePageview = function () {
 }
 
 export const walineRecentComments = async function () {
-
+  const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '')
+  let items = []
+  const { comments } = await RecentComments({
+    serverURL: CONFIG.waline.serverURL.replace(/\/+$/, ''),
+    count: 10
+  })
+  comments.forEach(function (item) {
+    let cText = (item.orig.length > 50) ? item.orig.substring(0, 50) + '...' : item.orig
+    item.url = item.url.startsWith('/') ? item.url : '/' + item.url
+    const siteLink = item.url + '#' + item.objectId
+    items.push({
+      href: siteLink,
+      nick: item.nick,
+      // @ts-ignore
+      time: item.insertedAt.split('T').shift(),
+      text: cText
+    })
+  })
+  createApp({
+    data () {
+      return {
+        coms: items,
+        root
+      }
+    }
+  }).mount('#new-comment')
 }

package/source/js/_app/components/tcomments.ts

@@ -0,0 +1,41 @@
+import twikoo from 'twikoo'
+import { CONFIG } from '../globals/globalVars'
+import { createApp } from 'vue'
+
+export const twikooComment = function () {
+  twikoo.init({
+    envId: CONFIG.twikoo.envId,
+    el: '#comments',
+    region: CONFIG.twikoo.region
+  })
+}
+
+export const twikooRecentComments = async function () {
+  let comments = []
+  const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '')
+  const res = await twikoo.getRecentComments({
+    envId: CONFIG.twikoo.envId,
+    pageSize: 10
+  })
+  res.forEach(function (item) {
+    let cText = item.commentText
+    if (item.commentText.length > 50) {
+      cText = item.commentText.substring(0, 50) + '...'
+    }
+    const siteLink = item.url + '#' + item.id
+    comments.push({
+      href: siteLink,
+      nick: item.nick,
+      time: item.relativeTime,
+      text: cText
+    })
+  })
+  createApp({
+    data () {
+      return {
+        coms: comments,
+        root
+      }
+    }
+  }).mount('#new-comment')
+}

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/library/declare.d.ts

@@ -30,6 +30,7 @@ declare interface EventTarget {
 type walineMeta = 'nick'|'mail'|'link'
 
 declare const LOCAL: {
+  ispost: boolean;
   path: string;
   ignores: Array<(uri:string)=>boolean>;
   audio: string[];
@@ -105,6 +106,10 @@ interface configType {
     pageSize: number
     pageview: boolean
   }
+  twikoo: {
+    envId: string
+    region: string
+  }
   walinePageView: boolean
   quicklink: {
     ignores: any
@@ -123,4 +128,6 @@ declare const __shokax_tabs__: boolean
 declare const __shokax_quiz__: boolean
 declare const __shokax_fancybox__: boolean
 declare const __shokax_waline__:boolean
+declare const __shokax_twikoo__:boolean
 declare const shokax_CONFIG:configType
+declare const shokax_siteURL:string

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

@@ -37,9 +37,9 @@ export const createChild = function (parent: HTMLElement, tag: string, obj: obje
 export const wrapObject = function (parent: HTMLElement, obj: any): void {
   const box = document.createElement('div')
   Object.assign(box, obj)
-  parent.insertBefore(box, obj)
-  parent.removeChild(obj)
-  box.appendChild(obj)
+  parent.parentNode.insertBefore(box, parent)
+  parent.parentNode.removeChild(parent)
+  box.appendChild(parent)
 }
 
 export const getHeight = function (el: HTMLElement): number {

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,9 +72,47 @@ 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__) {
+    import('../components/comments').then(async ({ walinePageview, walineRecentComments }) => {
+      await walineRecentComments()
+    })
+  }
+
+  if (__shokax_twikoo__) {
+    import('../components/tcomments').then(async ({ twikooRecentComments }) => {
+      await twikooRecentComments()
+    })
+  }
 
   if (__shokax_tabs__) {
     tabFormat()

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()

package/source/css/comment.styl

@@ -1,3 +0,0 @@
-@import "_variables.styl";
-
-@import "_mixins.styl";