fix: 修复Rocket补丁运行不正常的问题

_config.yml

@@ -27,10 +27,12 @@ experiments:
   optimizeLongPosts: false # 优化长文章，这能让长文章的FPS提升70%-150%并解决假死问题，但存在一些副作用
   # 具体见https://docs.kaitaku.xyz/guide/theme.html#%E9%95%BF%E6%96%87%E7%AB%A0%E4%BC%98%E5%8C%96
   mobileWidth: 820px # 移动版和桌面版导航栏最短切换长度
+  # 使用 Cloudflare Rocket 或其他优化功能时需开启下列补丁，否则主题无法渲染
+  cloudflarePatch: false
   coverConfig:
     enableCover: true # 是否开启头图
     enablePreload: true #是否开启预加载头图
-    enableNextGradientCover: true # 使用CSS渐变作为上/下一页封面
+    enableNextGradientCover: false # 使用CSS渐变作为上/下一页封面
 
 homeConfig:
   gradient: false # 使用CSS渐变作为文章封面

layout/_partials/head/head.pug

@@ -45,6 +45,9 @@ if fontConfig
 != preloadjs()
 != load_async_css()
 
+if theme.experiments.cloudflarePatch
+    != _js('cf-patch.js')
+
 include pwa.pug
 
 - var qw = theme?.qweather?.enable

package.json

@@ -46,8 +46,7 @@
         "theme-shokax-anime": "^0.0.7",
         "theme-shokax-pjax": "^0.0.3",
         "twikoo": "^1.6.39",
-        "unlazy": "^0.11.3",
-        "vue": "^3.5.7"
+        "unlazy": "^0.11.3"
     },
     "engines": {
         "node": ">=18.0.0"

scripts/generaters/script.ts

@@ -79,10 +79,12 @@ hexo.extend.generator.register('script', function (locals) {
     siteConfig.audio = theme.audio
   }
 
-  let enterPoint: string
+  let enterPoint: string, patchDir: string
   if (fs.existsSync('themes/shokaX/source/js/_app/pjax/siteInit.ts')) {
+    patchDir = 'themes/shokaX/source/js/_app/components/cloudflare.ts'
     enterPoint = 'themes/shokaX/source/js/_app/pjax/siteInit.ts'
   } else {
+    patchDir = 'node_modules/hexo-theme-shokax/source/js/_app/components/cloudflare.ts'
     enterPoint = 'node_modules/hexo-theme-shokax/source/js/_app/pjax/siteInit.ts'
   }
   buildSync({
@@ -150,5 +152,31 @@ hexo.extend.generator.register('script', function (locals) {
       })
     }
   })
+  if (theme.experiments.cloudflarePatch) {
+    const result = buildSync({
+      entryPoints: [patchDir],
+      bundle: true,
+      platform: "browser",
+      format: "iife",
+      tsconfigRaw: {
+        compilerOptions: {
+          target: 'ES2022',
+          esModuleInterop: true,
+          module: 'ESNext',
+          moduleResolution: 'Node',
+          skipLibCheck: true
+        }
+      },
+      target: ['es2022'],
+      minify: true,
+      outfile: 'cf-patch.js'
+    })
+    res.push({
+      path: theme.js + '/cf-patch.js',
+      data: function () {
+        return result
+      }
+    })
+  }
   return res
 })

scripts/helpers/asset.ts

@@ -1,6 +1,5 @@
 /* global hexo */
 
-import type { VendorsConfig } from '../utils'
 import theme_env from '../../package.json'
 import { htmlTag, url_for, stripHTML } from 'hexo-util'
 import { getVendorLink } from '../utils'

scripts/plugin/index.ts

@@ -12,6 +12,9 @@ hexo.on('generateBefore', () => {
   // 加载`theme_injects`过滤器
   injects(hexo)
   fs.rmSync('./shokaxTemp', { force: true, recursive: true })
+  if (fs.existsSync('cf-patch.js')) {
+    fs.unlinkSync('cf-patch.js')
+  }
   if (fs.existsSync('request.lock')) {
     fs.unlinkSync('request.lock')
   }

source/js/_app/components/cloudflare.ts

@@ -0,0 +1,19 @@
+// rocket-loader & Auto minify(cloudflare) 补丁
+// cloudflare 的上述功能会导致DOMContentLoaded事件无法触发，此补丁会将DOMContentLoaded重定向为load事件
+function cloudflareInit () {
+  let inCloudFlare = true
+  window.addEventListener('DOMContentLoaded', function () {
+    inCloudFlare = false
+  })
+
+  if (document.readyState === 'loading') {
+    window.addEventListener('load', function () {
+      if (inCloudFlare) {
+        window.dispatchEvent(new Event('DOMContentLoaded'))
+        console.log('%c ☁️cloudflare patch ' + '%c running', 'color: white; background: #ff8c00; padding: 5px 3px;', 'padding: 4px;border:1px solid #ff8c00')
+      }
+    })
+  }
+}
+
+cloudflareInit()

source/js/_app/library/scriptPjax.ts

@@ -1,21 +1,3 @@
-// rocket-loader & Auto minify(cloudflare) 补丁
-// cloudflare 的上述功能会导致DOMContentLoaded事件无法触发，此补丁会将DOMContentLoaded重定向为load事件
-export function cloudflareInit () {
-  let inCloudFlare = true
-  window.addEventListener('DOMContentLoaded', function () {
-    inCloudFlare = false
-  })
-
-  if (document.readyState === 'loading') {
-    window.addEventListener('load', function () {
-      if (inCloudFlare) {
-        window.dispatchEvent(new Event('DOMContentLoaded'))
-        console.log('%c ☁️cloudflare patch ' + '%c running', 'color: white; background: #ff8c00; padding: 5px 3px;', 'padding: 4px;border:1px solid #ff8c00')
-      }
-    })
-  }
-}
-
 export const getScript = (url: string,sri: string, callback?: Function, condition?: string): void => {
   // url: 脚本文件的URL地址
   // callback: 当脚本加载完成时要执行的回调函数