Merge pull request #251 from ATQQ/feature/theme-color-build-pref

fix: 自定义主题色，防止展示时页面颜色闪烁
ATQQ · Jun 19, 2024 · fa9e534 · fa9e534
2 parents 1ab7987 + b4074f7
commit fa9e534
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 12 deletions.
diff --git a/packages/blogpress/CHANGELOG.md b/packages/blogpress/CHANGELOG.md
@@ -4,8 +4,16 @@ publish: false
 
 # CHANGELOG
 
+## 2.0.53
+### Patch Changes
+
+- Updated dependencies
+  - @sugarat/theme@0.4.5
+
 ## 2.0.52
+
 ### Patch Changes
+
 - @sugarat/theme@0.4.4
 
 ## 2.0.51

diff --git a/packages/blogpress/package.json b/packages/blogpress/package.json
@@ -1,7 +1,7 @@
 {
   "name": "blogpress",
   "type": "module",
-  "version": "2.0.52",
+  "version": "2.0.53",
   "private": true,
   "license": "MIT",
   "scripts": {

diff --git a/packages/create-theme/CHANGELOG.md b/packages/create-theme/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sugarat/create-theme
 
+## 0.0.68
+
+### Patch Changes
+
+- chore: update deps
+
 ## 0.0.67
 
 ### Patch Changes

diff --git a/packages/create-theme/package.json b/packages/create-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/create-theme",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "粥里有勺糖",
   "license": "MIT",

diff --git a/packages/create-theme/public/template/package.json b/packages/create-theme/public/template/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@sugarat/theme": "^0.4.4",
+    "@sugarat/theme": "^0.4.5",
     "element-plus": "^2.7.2",
     "vue": "3.4.26"
   },

diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sugarat/theme
 
+## 0.4.5
+
+### Patch Changes
+
+- fix: 自定义主题色，防止展示时页面颜色闪烁
+
 ## 0.4.4
 
 ### Patch Changes

diff --git a/packages/theme/docs/changelog.md b/packages/theme/docs/changelog.md
@@ -1,6 +1,6 @@
 ---
 title: 更新日志
-description: 最近更新（v0.4.4） ⏰ 2024/06/16：构建优化，显著减少使用主题后增加的耗时，支持自定义友链,标签,数据卡片标题，一系列问题修复。
+description: 最近更新（v0.4.5） ⏰ 2024/06/18：构建优化，显著减少使用主题后增加的耗时，支持自定义友链,标签,数据卡片标题，一系列问题修复。
 author: 粥里有勺糖
 top: 2
 tag: 日志
@@ -27,6 +27,12 @@ bun install vitepress@latest
 ```
 :::
 
+## 0.4.5 (2024/06/18)
+
+### Patch Changes
+
+- fix: 自定义主题色，防止展示时页面颜色闪烁
+
 ## 0.4.4 (2024/06/16)
 
 ### Patch Changes

diff --git a/packages/theme/docs/todo.md b/packages/theme/docs/todo.md
@@ -8,7 +8,6 @@ sidebar: false
 ## 正在进行中
 
 * [ ] 模型资源预览
-* [ ] 自定义主题色，防止展示时页面颜色闪烁
 * [ ] 博客概览信息（文章数，网站运行天数，字数，访问量等等）
 * [ ] 文章支持短链
 * [ ] 时区问题（对齐 VitePress默认逻辑），同时支持自定义时区（引入第三方时间处理库）
@@ -24,6 +23,7 @@ sidebar: false
 ## 已完成
 
 近期完成：
+* [x] 自定义主题色，防止展示时页面颜色闪烁
 * [x] 标签和友链标题支持定制
 * [x] pagefind 底层实现优化重构
 * [x] 构建耗时过长优化

diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",

diff --git a/packages/theme/src/composables/config/index.ts b/packages/theme/src/composables/config/index.ts
@@ -371,7 +371,7 @@ export namespace Theme {
     /**
      * 内置一些主题色
      * @default 'vp-default'
-     * 也可以自定义颜色，详见 TODO：文档
+     * 也可以自定义颜色，详见 https://theme.sugarat.top/config/style.html#%E4%B8%BB%E9%A2%98%E8%89%B2
      */
     themeColor?: ThemeColor
     pagesData: PageData[]

diff --git a/packages/theme/src/utils/node/vitePlugins.ts b/packages/theme/src/utils/node/vitePlugins.ts
@@ -1,7 +1,7 @@
 import path from 'node:path'
 import { existsSync, readFileSync } from 'node:fs'
 import { Buffer } from 'node:buffer'
-import type { SiteConfig } from 'vitepress'
+import type { HeadConfig, SiteConfig } from 'vitepress'
 import {
   pagefindPlugin
 } from 'vitepress-plugin-pagefind'
@@ -16,13 +16,13 @@ import { getArticles } from './theme'
 export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   const plugins: any[] = []
 
-  // const buildEndFn: any[] = []
-  // Build完后运行的一系列列方法，执行自定义的 buildEnd 钩子
-  // plugins.push(inlineBuildEndPlugin(buildEndFn))
-
   // 处理cover image的路径（暂只支持自动识别的文章首图）
   plugins.push(coverImgTransform())
 
+  // 处理自定义主题色
+  if (cfg.themeColor) {
+    plugins.push(setThemeScript(cfg.themeColor))
+  }
   // 自动重载首页
   plugins.push(themeReloadPlugin())
 
@@ -156,3 +156,35 @@ export function providePageData(cfg: Partial<Theme.BlogConfig>) {
     },
   } as PluginOption
 }
+
+export function setThemeScript(
+  themeColor: Theme.ThemeColor
+) {
+  let resolveConfig: any
+  const pluginOps: PluginOption = {
+    name: '@sugarat/theme-plugin-theme-color-script',
+    enforce: 'pre',
+    configResolved(config: any) {
+      if (resolveConfig) {
+        return
+      }
+      resolveConfig = config
+
+      const vitepressConfig: SiteConfig = config.vitepress
+      if (!vitepressConfig) {
+        return
+      }
+      // 通过 head 添加额外的脚本注入
+      const selfTransformHead = vitepressConfig.transformHead
+      vitepressConfig.transformHead = async (ctx) => {
+        const selfHead = (await Promise.resolve(selfTransformHead?.(ctx))) || []
+        return selfHead.concat([
+          ['script', { type: 'text/javascript' }, `;(function() {
+            document.documentElement.setAttribute("theme", "${themeColor}");
+          })()`]
+        ] as HeadConfig[])
+      }
+    }
+  }
+  return pluginOps
+}