fix: 🐞 修复 frontmatter 不及时更新问题

Author: Kele-Bingtang

README.md

@@ -51,14 +51,14 @@ pnpm plugin:build
 
 ## TODO
 
+- permalink 重新点击菜单不重新加载，分类页、标签页每次切换进去都是重新加载，需要重新渲染数据即可
 - Banner 支持半图背景
 - 文章页添加 updateTime
 - 代码块 codeBlock 配置没有关闭 md 文档和样式，支持官方 [xxx] 命名
-- 引用 frontmatter 都支持 computed
-- mdH1 配置项 ignoreList 导致不生成一级标题修复
+- 卡片栏的 title 为函数时，额外传入 localesIndex
 - 新增、删除、修改 md 后自动重启，参考 Vitepress 修改 config 重启方式
 - 主题使用文档编写
 - 部署测试、线上效果测试
 - 发布 NPM 库
 - 支持无障碍
-- 归档页添加 commit 图标风格，如：`http://niubin.site/archive.html`
+- 归档页添加 commit 图标风格，如：`http://niubin.site/archive.html`

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

@@ -28,12 +28,6 @@ const post = computed<TkContentData>(() => ({
 
 // 站点信息数据
 const docAnalysisInfo = computed(() => unref(themeRef).docAnalysisInfo || {});
-// 站点信息配置项
-const {
-  wordCount = true,
-  readingTime = true,
-  statistics = {},
-}: DocAnalysis = { ...theme.docAnalysis, ...unref(frontmatter).docAnalysis };
 
 // 文章阅读量、阅读时长、字数
 const pageViewInfo = computed(() => {
@@ -46,39 +40,22 @@ const pageViewInfo = computed(() => {
 });
 
 // 文章信息配置项
-const { showInfo = true, teleport = {} }: Article = { ...theme.article, ...unref(frontmatter).article };
+const articleConfig = computed<Article>(() => {
+  const { showInfo = true, showIcon = true, teleport = {} } = { ...theme.article, ...unref(frontmatter).article };
+  return { showInfo, showIcon, teleport };
+});
 
 // 是否展示作者、日期、分类、标签等信息
 const isShowInfo = computed(() => {
-  const arr = [showInfo].flat();
+  const arr = [unref(articleConfig).showInfo].flat();
   if (arr.includes(true) || arr.includes("article")) return true;
   return false;
 });
 
-const route = useRoute();
-
-const statisticsInfo: UseBuSunZi = {
-  pagePv: ref(0),
-  isGet: ref(false),
-};
-const { provider = "", pageView = true, pageIteration = 2000 }: DocAnalysis["statistics"] = statistics;
-const usePageView = provider === "busuanzi" && pageView;
-
-if (usePageView) {
-  // 通过不蒜子获取访问量和访客数
-  const { pagePv, isGet, request } = useBuSunZi(true, pageIteration);
-  statisticsInfo.pagePv = pagePv;
-  statisticsInfo.isGet = isGet;
-
-  watch(route, () => {
-    request();
-  });
-}
-
 const baseInfoRef = ref<HTMLDivElement>();
 
 const teleportInfo = () => {
-  const { selector, position = "after", className = "teleport" } = teleport;
+  const { selector, position = "after", className = "teleport" } = unref(articleConfig).teleport;
   const baseInfoRefConst = unref(baseInfoRef);
   // 没有指定选择器，则不进行传送
   if (!selector || !baseInfoRefConst) return;
@@ -96,6 +73,35 @@ const teleportInfo = () => {
 onMounted(() => {
   nextTick(() => teleportInfo());
 });
+
+const docAnalysisConfig = computed<DocAnalysis>(() => {
+  const {
+    wordCount = true,
+    readingTime = true,
+    statistics = {},
+  }: DocAnalysis = { ...theme.docAnalysis, ...unref(frontmatter).docAnalysis };
+
+  return { wordCount, readingTime, statistics };
+});
+
+const statisticsConfig = computed<DocAnalysis["statistics"]>(() => {
+  const { provider = "", pageView = true, pageIteration = 2000 } = unref(docAnalysisConfig).statistics;
+
+  return { provider, pageView, pageIteration };
+});
+// 是否使用访问量功能
+const usePageView = computed(() => unref(statisticsConfig).provider && unref(statisticsConfig).pageView);
+
+const statisticsInfo: UseBuSunZi = { pagePv: ref(0), isGet: ref(false) };
+// 通过不蒜子获取访问量
+const { pagePv, isGet, request } = useBuSunZi(true, unref(statisticsConfig).pageIteration);
+statisticsInfo.pagePv = pagePv;
+statisticsInfo.isGet = isGet;
+
+const route = useRoute();
+watch(route, () => {
+  if (unref(usePageView)) request();
+});
 </script>
 
 <template>
@@ -105,18 +111,18 @@ onMounted(() => {
     <div v-if="isShowInfo" ref="baseInfoRef" :class="`${ns.e('wrapper')} flx-align-center`">
       <ArticleInfo :post scope="article" />
 
-      <div v-if="wordCount" class="flx-center">
-        <Icon><Reading /></Icon>
+      <div v-if="docAnalysisConfig.wordCount" class="flx-center">
+        <Icon v-if="articleConfig.showIcon"><Reading /></Icon>
         <a title="文章字数" class="hover-color">{{ pageViewInfo.wordCount }}</a>
       </div>
 
-      <div v-if="readingTime" class="flx-center">
-        <Icon><Clock /></Icon>
+      <div v-if="docAnalysisConfig.readingTime" class="flx-center">
+        <Icon v-if="articleConfig.showIcon"><Clock /></Icon>
         <a title="预计阅读时长" class="hover-color">{{ pageViewInfo.readingTime }}</a>
       </div>
 
       <div v-if="usePageView" class="flx-center">
-        <Icon><View /></Icon>
+        <Icon v-if="articleConfig.showIcon"><View /></Icon>
         <a title="浏览量" class="hover-color">{{ statisticsInfo.isGet ? statisticsInfo.pagePv : "Get..." }}</a>
       </div>
     </div>

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

@@ -17,13 +17,13 @@ const { theme } = useUnrefData();
 const { localeIndex, frontmatter, page } = useData();
 
 // 面包屑配置项
-const breadcrumb: BreadcrumbType = {
+const breadcrumb = computed<BreadcrumbType>(() => ({
   enabled: true,
   showCurrentName: false,
   separator: "/",
   ...theme.breadcrumb,
   ...unref(frontmatter).breadcrumb,
-};
+}));
 
 const relativePathArr = computed(() => unref(page).relativePath.split("/") || []);
 
@@ -36,7 +36,10 @@ const breadcrumbList = computed(() => {
     const fileName = item.replace(/^\d+\./, "").split(".")?.[0] || "";
 
     // 兼容国际化功能，如果配置多语言，在面包屑去掉多语言根目录名
-    if ((index !== relativePathArrConst.length - 1 || breadcrumb?.showCurrentName) && fileName !== unref(localeIndex)) {
+    if (
+      (index !== relativePathArrConst.length - 1 || unref(breadcrumb).showCurrentName) &&
+      fileName !== unref(localeIndex)
+    ) {
       classifyList.push({
         fileName,
         filePath: theme.catalogues?.inv[item]?.filePath || "",

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

@@ -19,14 +19,22 @@ const { post, scope, split = false } = defineProps<PostBaseInfoProps>();
 const { theme } = useUnrefData();
 const { frontmatter } = useData();
 // 文章信息配置项
-const {
-  showIcon = true,
-  dateFormat = "yyyy-MM-dd",
-  showAuthor = true,
-  showDate = true,
-  showCategory = false,
-  showTag = false,
-}: Article = { ...theme.article, ...unref(frontmatter).article, ...unref(frontmatter).tk?.article };
+const articleConfig = computed<Article>(() => {
+  const {
+    showIcon = true,
+    dateFormat = "yyyy-MM-dd",
+    showAuthor = true,
+    showDate = true,
+    showCategory = false,
+    showTag = false,
+  }: Article = {
+    ...theme.article,
+    ...unref(frontmatter).article,
+    ...unref(frontmatter).tk?.article,
+  };
+
+  return { showIcon, dateFormat, showAuthor, showDate, showCategory, showTag };
+});
 
 const posts = usePosts();
 const route = useRoute();
@@ -35,17 +43,19 @@ const route = useRoute();
 const date = computed(() => {
   // 如果 date 是函数，则调用获取返回值作为 date
   const date = post.date;
+  const dateFormatConst = unref(articleConfig).dateFormat;
+
   if (date) {
-    if (isFunction(dateFormat)) return dateFormat(date);
-    return formatDate(date, dateFormat);
+    if (isFunction(dateFormatConst)) return dateFormatConst(date);
+    return formatDate(date, dateFormatConst);
   }
 
   // 如果 frontmatter 没有配置 date，则从 posts 中获取文档的创建时间
   const originPosts: TkContentData[] = unref(posts).originPosts;
   const targetPost = originPosts.filter(item => [item.url, `${item.url}.md`].includes(`/${route.data.relativePath}`));
 
-  if (isFunction(dateFormat)) return dateFormat(targetPost[0]?.date || "");
-  return formatDate(targetPost[0]?.date || new Date(), dateFormat);
+  if (isFunction(dateFormatConst)) return dateFormatConst(targetPost[0]?.date || "");
+  return formatDate(targetPost[0]?.date || new Date(), dateFormatConst);
 });
 
 const baseInfo = computed(() => [
@@ -55,29 +65,29 @@ const baseInfo = computed(() => [
     data: post.author?.name,
     href: post.author?.link,
     target: post.author?.link ? "_blank" : "_self",
-    show: showAuthor,
+    show: unref(articleConfig).showAuthor,
   },
   {
     title: "创建时间",
     icon: Calendar,
     data: date,
-    show: showDate,
+    show: unref(articleConfig).showDate,
   },
   {
     title: "分类",
     icon: FolderOpened,
     dataList: post.frontmatter?.categories || [],
     href: "/categories?category={data}",
     class: "or",
-    show: scope === "home" || showCategory,
+    show: scope === "home" || unref(articleConfig).showCategory,
   },
   {
     title: "标签",
     icon: CollectionTag,
     dataList: post.frontmatter?.tags || [],
     href: "/tags?tag={data}",
     class: "or",
-    show: scope === "home" || showTag,
+    show: scope === "home" || unref(articleConfig).showTag,
   },
 ]);
 </script>
@@ -89,7 +99,7 @@ const baseInfo = computed(() => [
         v-if="item.show && (item.data || item.dataList?.length)"
         :class="[ns.e('item'), `${scope}-item`, { split }]"
       >
-        <Icon v-if="showIcon"><component :is="item.icon" /></Icon>
+        <Icon v-if="articleConfig.showIcon"><component :is="item.icon" /></Icon>
         <a
           v-if="item.data"
           :title="item.title"

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

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

vitepress-theme-teeker/src/components/HomeBanner/src/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" name="HomeBanner">
-import { withBase, useData } from "vitepress";
+import { withBase } from "vitepress";
 import { onMounted, onUnmounted, unref, ref, nextTick } from "vue";
 import { useNamespace, useTextTypes, useSwitchData } from "../../../hooks";
 import { useUnrefData } from "../../../configProvider";
@@ -11,9 +11,8 @@ defineOptions({ name: "HomeBanner" });
 
 const ns = useNamespace("banner");
 
-const { site, theme } = useUnrefData();
-const { frontmatter } = useData();
-const title = unref(frontmatter).tk?.name || site.title || "";
+const { site, theme, frontmatter } = useUnrefData();
+const title = frontmatter.tk?.name || site.title || "";
 
 // Banner 配置项
 const {
@@ -36,11 +35,11 @@ const {
   typesOutTime = 100,
   typesNextTime = 800,
   typesShuffle = false,
-}: Banner = { ...theme.banner, ...unref(frontmatter).tk?.banner };
+}: Banner = { ...theme.banner, ...frontmatter.tk?.banner };
 const descArray: string[] = [
-  ...new Set([unref(frontmatter).tk?.description || description || []].flat()?.filter((v: string) => !!v)),
+  ...new Set([frontmatter.tk?.description || description || []].flat()?.filter((v: string) => !!v)),
 ];
-const { features = [] }: Banner = { ...theme.banner, ...unref(frontmatter).tk, ...unref(frontmatter).tk?.banner };
+const { features = [] }: Banner = { ...theme.banner, ...frontmatter.tk, ...frontmatter.tk?.banner };
 
 const isDefaultBgStyle = bgStyle === "default";
 const isBigImgBgStyle = bgStyle === "bigImg";

vitepress-theme-teeker/src/components/HomeCategoryCard/src/index.vue

@@ -14,8 +14,8 @@ const ns = useNamespace("category");
 
 const { categoriesPage = false } = defineProps<{ categoriesPage?: boolean }>();
 
-const { theme, site } = useUnrefData();
-const { frontmatter, localeIndex } = useData();
+const { theme, site, frontmatter } = useUnrefData();
+const { localeIndex } = useData();
 
 const route = useRoute();
 const pageNum = ref(1);
@@ -27,7 +27,7 @@ const {
   limit = 5,
   autoPage = false,
   pageSpeed = 4000,
-}: Category = { ...theme.category, ...unref(frontmatter).tk?.category };
+}: Category = { ...theme.category, ...frontmatter.tk?.category };
 
 const posts = usePosts();
 
@@ -47,13 +47,13 @@ const finalTitle = computed(() => {
 });
 
 // 当前选中的分类，从 URL 查询参数中获取
-const category = ref("");
+const selectedCategory = ref("");
 
 watch(
   route,
   () => {
     const c = new URL(window.location.href).searchParams.get("category");
-    if (c && c != unref(category)) category.value = c;
+    if (c && c != unref(selectedCategory)) selectedCategory.value = c;
   },
   { immediate: true }
 );
@@ -95,7 +95,7 @@ const categoriesPageLink = computed(() => {
           v-for="(item, index) in currentCategories"
           :key="item.name"
           :href="withBase(`${categoriesPageLink}?category=${encodeURIComponent(item.name)}`)"
-          :class="[{ active: item.name === category }, 'hover-color']"
+          :class="[{ active: item.name === selectedCategory }, 'hover-color']"
           :style="`top: ${index * itemRefs?.[index]?.getBoundingClientRect().height || 0}px`"
         >
           <span>{{ item.name }}</span>

vitepress-theme-teeker/src/components/HomeDocAnalysisCard/src/index.vue

@@ -12,17 +12,17 @@ defineOptions({ name: "HomeDocAnalysisCard" });
 
 const ns = useNamespace("docAnalysis");
 
-const { theme } = useUnrefData();
+const { theme, frontmatter } = useUnrefData();
 // 使用 useData 的 theme 是为了监听国际化切换来动态修改站点信息的内容
-const { theme: themeRef, frontmatter } = useData();
+const { theme: themeRef } = useData();
 // 站点信息配置项
 const {
   createTime,
   title = `${docAnalysisSvg}站点信息`,
   statistics = {},
   overrideInfo = [],
   appendInfo = [],
-}: DocAnalysis = { ...theme.docAnalysis, ...unref(frontmatter).tk?.docAnalysis };
+}: DocAnalysis = { ...theme.docAnalysis, ...frontmatter.tk?.docAnalysis };
 
 const docAnalysisInfo = computed(() => unref(themeRef).docAnalysisInfo || {});