fix: 🐞 theme 支持响应式

Author: Kele-Bingtang

build/index.ts

@@ -50,7 +50,7 @@ const updateVersionInTs = async () => {
 
   const versionFile = resolve(tkRoot, "src/version.ts");
   const versionContent = await readFile(versionFile, "utf-8");
-  const newVersion = versionContent.replace("1.0.0", tkPackageInfo.version);
+  const newVersion = versionContent.replace(/"([^"]+)"/, `"${tkPackageInfo.version}"`);
 
   await writeFile(versionFile, newVersion);
 };

vitepress-theme-teek/src/components/ArticleAnalyze/src/index.vue

@@ -4,7 +4,6 @@ import { useRoute, useData } from "vitepress";
 import { Reading, Clock, View } from "@element-plus/icons-vue";
 import { FileInfo } from "vitepress-plugin-doc-analysis";
 import { useNamespace, useBuSunZi, type UseBuSunZi } from "../../../hooks";
-import { useUnrefData } from "../../../configProvider";
 import ArticleBreadcrumb from "../../ArticleBreadcrumb";
 import ArticleInfo from "../../ArticleInfo";
 import Icon from "../../Icon";
@@ -15,19 +14,18 @@ defineOptions({ name: "ArticleAnalyze" });
 
 const ns = useNamespace("articleAnalyze");
 
-const { theme } = useUnrefData();
-const { theme: themeRef, frontmatter } = useData();
+const { theme, frontmatter } = useData();
 
 // 文章基本信息
 const post = computed<TkContentData>(() => ({
-  author: { ...theme.author, ...unref(frontmatter).author },
+  author: { ...unref(theme).author, ...unref(frontmatter).author },
   date: unref(frontmatter).date,
   frontmatter: unref(frontmatter),
   url: "",
 }));
 
 // 站点信息数据
-const docAnalysisInfo = computed(() => unref(themeRef).docAnalysisInfo || {});
+const docAnalysisInfo = computed(() => unref(theme).docAnalysisInfo || {});
 
 // 文章阅读量、阅读时长、字数
 const pageViewInfo = computed(() => {
@@ -41,7 +39,11 @@ const pageViewInfo = computed(() => {
 
 // 文章信息配置项
 const articleConfig = computed<Article>(() => {
-  const { showInfo = true, showIcon = true, teleport = {} } = { ...theme.article, ...unref(frontmatter).article };
+  const {
+    showInfo = true,
+    showIcon = true,
+    teleport = {},
+  } = { ...unref(theme).article, ...unref(frontmatter).article };
   return { showInfo, showIcon, teleport };
 });
 
@@ -79,7 +81,7 @@ const docAnalysisConfig = computed<DocAnalysis>(() => {
     wordCount = true,
     readingTime = true,
     statistics = {},
-  }: DocAnalysis = { ...theme.docAnalysis, ...unref(frontmatter).docAnalysis };
+  }: DocAnalysis = { ...unref(theme).docAnalysis, ...unref(frontmatter).docAnalysis };
 
   return { wordCount, readingTime, statistics };
 });

vitepress-theme-teek/src/components/ArticleBreadcrumb/src/index.vue

@@ -6,22 +6,20 @@ import { useNamespace } from "../../../hooks";
 import Breadcrumb from "./Breadcrumb.vue";
 import BreadcrumbItem from "./BreadcrumbItem.vue";
 import Icon from "../../Icon";
-import { useUnrefData } from "../../../configProvider";
 import { Breadcrumb as BreadcrumbType } from "../../../config/types";
 
 defineOptions({ name: "ArticleBreadcrumb" });
 
 const ns = useNamespace("articleBreadcrumb");
 
-const { theme } = useUnrefData();
-const { localeIndex, frontmatter, page } = useData();
+const { localeIndex, theme, frontmatter, page } = useData();
 
 // 面包屑配置项
 const breadcrumb = computed<BreadcrumbType>(() => ({
   enabled: true,
   showCurrentName: false,
   separator: "/",
-  ...theme.breadcrumb,
+  ...unref(theme).breadcrumb,
   ...unref(frontmatter).breadcrumb,
 }));
 
@@ -42,7 +40,7 @@ const breadcrumbList = computed(() => {
     ) {
       classifyList.push({
         fileName,
-        filePath: theme.catalogues?.inv[item]?.filePath || "",
+        filePath: unref(theme).catalogues?.inv[item]?.filePath || "",
       });
     }
   });

vitepress-theme-teek/src/components/ArticleInfo/src/index.vue

@@ -2,7 +2,7 @@
 import { User, Calendar, FolderOpened, CollectionTag, EditPen } from "@element-plus/icons-vue";
 import { useRoute, withBase, useData } from "vitepress";
 import { computed, unref } from "vue";
-import { usePosts, useUnrefData } from "../../../configProvider";
+import { usePosts } from "../../../configProvider";
 import { formatDate, isFunction } from "../../../helper";
 import { TkContentData } from "../../../post/types";
 import { useNamespace } from "../../../hooks";
@@ -16,8 +16,7 @@ const ns = useNamespace("articleInfo");
 
 const { post, scope, split = false } = defineProps<PostBaseInfoProps>();
 
-const { theme } = useUnrefData();
-const { frontmatter, page } = useData();
+const { theme, frontmatter, page } = useData();
 // 文章信息配置项
 const articleConfig = computed<Article>(() => {
   const {
@@ -29,7 +28,7 @@ const articleConfig = computed<Article>(() => {
     showCategory = false,
     showTag = false,
   }: Article = {
-    ...theme.article,
+    ...unref(theme).article,
     ...unref(frontmatter).article,
     ...unref(frontmatter).tk?.article,
   };

vitepress-theme-teek/src/components/BodyBgImage/src/index.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts" name="BodyBgImage">
 import { onMounted, unref } from "vue";
+import { withBase, useData } from "vitepress";
 import { useNamespace, useSwitchData } from "../../../hooks";
-import { useUnrefData } from "../../../configProvider";
 import { isString } from "../../../helper";
 import { BodyBgImg } from "../../../config/types";
-import { withBase } from "vitepress";
 
 defineOptions({ name: "BodyBgImage" });
 
 const ns = useNamespace("bodyBgImage");
 
-const { theme } = useUnrefData();
+const { theme } = useData();
 
 let {
   imgSrc,
@@ -19,7 +18,7 @@ let {
   imgShuffle = false,
   mask = false,
   maskBg = "rgba(0, 0, 0, 0.2)",
-}: BodyBgImg = theme.bodyBgImg || {};
+}: BodyBgImg = unref(theme).bodyBgImg || {};
 
 // body 背景图片定时轮播
 const { data: imageSrc, startAutoSwitch: switchImg } = useSwitchData({

vitepress-theme-teek/src/components/CommentArtalk/src/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts" name="CommentArtalk">
 import { inject, onMounted, onUnmounted, ref, unref, watch } from "vue";
 import { useData } from "vitepress";
-import { useUnrefData } from "../../../configProvider";
 import { CommentProvider } from "../../../config/types";
 import { useNamespace, useVpRouter } from "../../../hooks";
 import { artalkSymbol } from "./artalk";
@@ -11,10 +10,9 @@ defineOptions({ name: "CommentArtalk" });
 const ns = useNamespace("");
 const vpRouter = useVpRouter();
 
-const { isDark, page } = useData();
-const { theme } = useUnrefData();
+const { theme, isDark, page } = useData();
 
-const { server, site }: CommentProvider["artalk"] = { ...theme.comment?.options };
+const { server, site }: CommentProvider["artalk"] = { ...unref(theme).comment?.options };
 
 const artalkRef = ref<HTMLElement | null>(null);
 const artalkJs = ref<HTMLScriptElement | null>(null);
@@ -26,7 +24,7 @@ const initArtalkByInject = () => {
   const getArtalkInstance = inject(artalkSymbol);
   const el = unref(artalkRef) || `#${artalkId}`;
 
-  const artalkInstance = getArtalkInstance?.(theme.comment?.options, el);
+  const artalkInstance = getArtalkInstance?.(unref(theme).comment?.options, el);
 
   if (!artalkInstance) return false;
 

vitepress-theme-teek/src/components/CommentGiscus/src/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts" name="CommentGiscus">
 import { ref, nextTick, onMounted, computed, unref, inject } from "vue";
 import { useData } from "vitepress";
-import { useUnrefData } from "../../../configProvider";
 import { isFunction } from "../../../helper";
 import type { CommentProvider } from "../../../config/types";
 import { useNamespace, useVpRouter } from "../../../hooks";
@@ -12,8 +11,7 @@ defineOptions({ name: "CommentGiscus" });
 const ns = useNamespace("");
 const vpRouter = useVpRouter();
 
-const { isDark } = useData();
-const { theme } = useUnrefData();
+const { theme, isDark } = useData();
 
 const {
   repo,
@@ -32,7 +30,7 @@ const {
   link = "https://giscus.app/client.js",
   integrity,
   ...options
-}: CommentProvider["giscus"] = { ...theme.comment?.options };
+}: CommentProvider["giscus"] = { ...unref(theme).comment?.options };
 
 const giscusTheme = computed(() => {
   if (isFunction(giscusThemeConfig)) return giscusThemeConfig(unref(isDark));
@@ -41,7 +39,7 @@ const giscusTheme = computed(() => {
 
 // 尝试从上下文获取 giscus 组件
 const giscusComponentFn = inject(giscusSymbol);
-const giscusComponent = giscusComponentFn?.(theme.comment?.options);
+const giscusComponent = giscusComponentFn?.(unref(theme).comment?.options);
 
 const isShow = ref(false);
 

vitepress-theme-teek/src/components/CommentTwikoo/src/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" name="CommentTwikoo">
 import { ref, onMounted, unref } from "vue";
-import { useUnrefData } from "../../../configProvider";
+import { useData } from "vitepress";
 import { CommentProvider } from "../../../config/types";
 import { useNamespace, useVpRouter } from "../../../hooks";
 
@@ -9,7 +9,7 @@ defineOptions({ name: "CommentTwikoo" });
 const ns = useNamespace("");
 const vpRouter = useVpRouter();
 
-const { theme } = useUnrefData();
+const { theme } = useData();
 
 const {
   envId,
@@ -18,7 +18,7 @@ const {
   katex,
   timeout = 700,
   ...options
-}: CommentProvider["twikoo"] = { ...theme.comment?.options };
+}: CommentProvider["twikoo"] = { ...unref(theme).comment?.options };
 
 const initTwikoo = () => {
   if (!envId) return;

vitepress-theme-teek/src/components/CommentWaline/src/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" name="CommentWaline">
-import { inject, onMounted } from "vue";
-import { useUnrefData } from "../../../configProvider";
+import { inject, onMounted, unref } from "vue";
+import { useData } from "vitepress";
 import { CommentProvider } from "../../../config/types";
 import { useNamespace, useVpRouter } from "../../../hooks";
 import { WalineInstance, walineSymbol } from "./waline";
@@ -10,7 +10,7 @@ defineOptions({ name: "CommentWaline" });
 const ns = useNamespace("");
 const vpRouter = useVpRouter();
 
-const { theme } = useUnrefData();
+const { theme } = useData();
 
 const {
   serverURL,
@@ -19,15 +19,15 @@ const {
   dark = "html[class='dark']",
   cssIntegrity,
   ...options
-}: CommentProvider["waline"] = { ...theme.comment?.options };
+}: CommentProvider["waline"] = { ...unref(theme).comment?.options };
 
 let waline: WalineInstance | null = null;
 const walineId = "waline";
 
 const initWalineByInject = () => {
   // 尝试从上下文获取 waline 实例
   const getWalineInstance = inject(walineSymbol);
-  if (getWalineInstance) waline = getWalineInstance?.(theme.comment?.options, `#${walineId}`);
+  if (getWalineInstance) waline = getWalineInstance?.(unref(theme).comment?.options, `#${walineId}`);
 
   return waline;
 };

vitepress-theme-teek/src/components/Footer/src/index.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts" name="Footer">
-import { computed } from "vue";
-import { withBase } from "vitepress";
+import { computed, unref } from "vue";
+import { withBase, useData } from "vitepress";
 import { useNamespace } from "../../../hooks";
-import { useUnrefData } from "../../../configProvider";
 import themeSvg from "../../../assets/svg/footerTheme";
 import copyrightSvg from "../../../assets/svg/copyright";
 import icpRecordSvg from "../../../assets/svg/icpRecord";
@@ -16,9 +15,12 @@ defineOptions({ name: "Footer" });
 
 const ns = useNamespace("footer");
 
-const { theme, frontmatter } = useUnrefData();
+const { theme, frontmatter } = useData();
 
-const { footerInfo, social = [] }: { footerInfo: FooterInfo; social: Social[] } = { ...theme, ...frontmatter.tk };
+const { footerInfo, social = [] }: { footerInfo: FooterInfo; social: Social[] } = {
+  ...unref(theme),
+  ...unref(frontmatter).tk,
+};
 
 const footerData = computed(() => {
   const { theme = {}, copyright = {}, icpRecord, securityRecord }: FooterInfo = footerInfo || {};

vitepress-theme-teek/src/components/Home/src/index.vue

@@ -3,7 +3,7 @@ import { computed, ref, unref, provide } from "vue";
 import { useData } from "vitepress";
 import { postDataUpdateSymbol } from "./home";
 import { useNamespace } from "../../../hooks";
-import { usePage, useUnrefData } from "../../../configProvider";
+import { usePage } from "../../../configProvider";
 import HomeFullscreenWallpaper from "../../HomeFullscreenWallpaper";
 import HomeBanner from "../../HomeBanner";
 import HomeRightInfo from "../../HomeRightInfo";
@@ -14,11 +14,10 @@ defineOptions({ name: "Home" });
 const ns = useNamespace("home");
 
 const { isHomePage } = usePage();
-const { theme } = useUnrefData();
-const { frontmatter } = useData();
+const { theme, frontmatter } = useData();
 
 const themeConfig = computed(() => {
-  const { tkHome = true, banner = {}, wallpaper = {}, bodyBgImg = {} } = { ...theme, ...unref(frontmatter).tk };
+  const { tkHome = true, banner = {}, wallpaper = {}, bodyBgImg = {} } = { ...unref(theme), ...unref(frontmatter).tk };
   return { tkHome, banner, wallpaper, bodyBgImg };
 });
 

vitepress-theme-teek/src/components/HomeBanner/src/HomeBannerBgImage.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts" name="HomeBannerBgImage">
-import { withBase } from "vitepress";
+import { withBase, useData } from "vitepress";
 import { onMounted, unref } from "vue";
 import { useNamespace, useSwitchData } from "../../../hooks";
-import { useUnrefData } from "../../../configProvider";
 import { isString } from "../../../helper";
 import { Banner } from "../../../config/types";
 
 defineOptions({ name: "HomeBannerBgImage" });
 
 const ns = useNamespace("bannerBgImage");
 
-const { theme, frontmatter } = useUnrefData();
+const { theme, frontmatter } = useData();
 
 // Banner 配置项
 const {
@@ -20,7 +19,7 @@ const {
   imgShuffle = false,
   mask = true,
   maskBg = "rgba(0, 0, 0, 0.4)",
-}: Banner = { ...theme.banner, ...frontmatter.tk?.banner };
+}: Banner = { ...unref(theme).banner, ...unref(frontmatter).tk?.banner };
 
 // 局部图片背景风格
 const isPartImgBgStyle = bgStyle === "partImg";

vitepress-theme-teek/src/components/HomeBanner/src/HomeBannerBgPure.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts" name="HomeBannerBgPure">
-import { useUnrefData } from "../../../configProvider";
+import { useData } from "vitepress";
 import { useNamespace } from "../../../hooks";
 import { Banner } from "../../../config/types";
+import { unref } from "vue";
 
 defineOptions({ name: "HomeBannerBgPure" });
 
 const ns = useNamespace("bannerBgPure");
 
-const { theme, frontmatter } = useUnrefData();
+const { theme, frontmatter } = useData();
 
-const { pureBgColor = "#28282d" }: Banner = { ...theme.banner, ...frontmatter.tk?.banner };
+const { pureBgColor = "#28282d" }: Banner = { ...unref(theme).banner, ...unref(frontmatter).tk?.banner };
 
 const getStyle = () => {
   return {