feat: 🚀 post 部分配置移到 article，article 新增在文章页运行自定义文章信息到指定 DOM 位置

Author: Kele-Bingtang

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

@@ -2,12 +2,12 @@
 import { useRoute, useData } from "vitepress";
 import { useNamespace, useBuSunZi } from "../hooks";
 import { ElBreadcrumb, ElBreadcrumbItem, ElIcon } from "element-plus";
-import { computed, unref } from "vue";
+import { computed, nextTick, onMounted, ref, unref } from "vue";
 import { House, Reading, Clock, View } from "@element-plus/icons-vue";
 import { useUnrefData } from "../configProvider";
 import { FileInfo } from "vitepress-plugin-doc-analysis";
 import PostBaseInfo from "./PostBaseInfo.vue";
-import { Breadcrumb, DocAnalysis, Post } from "../config/types";
+import { Article, Breadcrumb, DocAnalysis } from "../config/types";
 import { TkContentData } from "../post/types";
 
 const ns = useNamespace("articleAnalyze");
@@ -74,17 +74,38 @@ const pageViewInfo = computed(() => {
   return pageViewInfo;
 });
 
-const { showBaseInfo = true }: Post = { ...theme.post, ...frontmatter.post };
+// 文章信息配置项
+const { showInfo = true, teleport = {} }: Article = { ...theme.article, ...frontmatter.article };
 
 // 是否展示作者、日期、分类、标签等信息
-const isShowBaseInfo = computed(() => {
-  const arr = [showBaseInfo].flat();
+const isShowInfo = computed(() => {
+  const arr = [showInfo].flat();
   if (arr.includes(true) || arr.includes("article")) return true;
   return false;
 });
 
 // 通过不蒜子获取页面访问量
 const { pagePv, isGet } = useBuSunZi(pageIteration);
+
+const baseInfoRef = ref<HTMLDivElement>();
+const teleportInfo = () => {
+  const { selector, position = "after", className = "teleport" } = teleport;
+  // 没有指定选择器，则不进行传送
+  if (!selector) return;
+
+  const docDomContainer = window.document.querySelector("#VPContent");
+  let h1Dom = docDomContainer?.querySelector(selector);
+
+  // 传送前先尝试删除传送位置的自己，避免重新传送渲染
+  h1Dom?.parentElement?.querySelectorAll(`.${ns.e("wrapper")}`).forEach(v => v.remove());
+
+  unref(baseInfoRef).classList.add(className);
+  h1Dom?.[position]?.(unref(baseInfoRef));
+};
+
+onMounted(() => {
+  nextTick(() => teleportInfo());
+});
 </script>
 
 <template>
@@ -107,22 +128,22 @@ const { pagePv, isGet } = useBuSunZi(pageIteration);
       </el-breadcrumb-item>
     </el-breadcrumb>
 
-    <div v-if="isShowBaseInfo" :class="`${ns.e('wrapper')} flx-center`">
+    <div v-if="isShowInfo" ref="baseInfoRef" :class="`${ns.e('wrapper')} flx-align-center`">
       <PostBaseInfo :post scope="article" />
 
       <div v-if="wordCount" class="flx-center">
         <el-icon><Reading /></el-icon>
-        <a title="文章字数">{{ pageViewInfo.wordCount }}</a>
+        <a title="文章字数" class="hover-color">{{ pageViewInfo.wordCount }}</a>
       </div>
 
       <div v-if="readingTime" class="flx-center">
         <el-icon><Clock /></el-icon>
-        <a title="预计阅读时长">{{ pageViewInfo.readingTime }}</a>
+        <a title="预计阅读时长" class="hover-color">{{ pageViewInfo.readingTime }}</a>
       </div>
 
       <div v-if="pageView" class="flx-center">
         <el-icon><View /></el-icon>
-        <a title="浏览量">{{ isGet ? pagePv : "Get..." }}</a>
+        <a title="浏览量" class="hover-color">{{ isGet ? pagePv : "Get..." }}</a>
       </div>
     </div>
   </div>

vitepress-theme-teeker/src/components/HomePostItem.vue

@@ -6,7 +6,7 @@ import { TkContentData } from "../post/types";
 import { createImageViewer } from "./ImageViewer";
 import { useUnrefData } from "../configProvider";
 import PostBaseInfo from "./PostBaseInfo.vue";
-import { Post } from "../config/types";
+import { Article, Post } from "../config/types";
 
 const ns = useNamespace("postItem");
 
@@ -20,9 +20,9 @@ const {
   moreLabel = "阅读全文 >",
   coverImgMode = "default",
   showCapture = false,
-  showBaseInfo = true,
   imageViewer = {},
 }: Post = { ...theme.post, ...frontmatter.tk?.post };
+const { showInfo = true }: Article = { ...theme.article, ...frontmatter.tk?.article };
 
 const excerpt = post.frontmatter.description || post.excerpt || (showCapture && post.capture);
 
@@ -58,9 +58,9 @@ const coverImgMap = computed(() => {
 });
 
 // 是否展示作者、日期、分类、标签等信息
-const isShowBaseInfo = computed(() => {
-  const arr = [showBaseInfo].flat();
-  if (arr.includes(true) || arr.includes("home")) return true;
+const isShowInfo = computed(() => {
+  const arr = [showInfo].flat();
+  if (arr.includes(true) || arr.includes("post")) return true;
   return false;
 });
 </script>
@@ -84,7 +84,7 @@ const isShowBaseInfo = computed(() => {
 
         <!-- 文章信息 -->
         <div :class="ns.e('__info__left__footer')">
-          <PostBaseInfo v-if="isShowBaseInfo" :post scope="home" split />
+          <PostBaseInfo v-if="isShowInfo" :post scope="home" split />
         </div>
 
         <!-- 摘要 bottom -->

vitepress-theme-teeker/src/components/PostBaseInfo.vue

@@ -7,7 +7,7 @@ import { formatDate, isFunction } from "../helper";
 import { TkContentData } from "../post/types";
 import { useNamespace } from "../hooks";
 import { useRoute } from "vitepress";
-import { Post } from "../config/types";
+import { Article, Post } from "../config/types";
 
 const ns = useNamespace("postBaseInfo");
 
@@ -28,7 +28,7 @@ const {
   showDate = true,
   showCategory = false,
   showTag = false,
-}: Post = { ...theme.post, ...frontmatter.post, ...frontmatter.tk?.post };
+}: Article = { ...theme.article, ...frontmatter.article, ...frontmatter.tk?.article };
 
 const posts = usePosts();
 const route = useRoute();

vitepress-theme-teeker/src/config/types.ts

@@ -98,37 +98,41 @@ export interface TkThemeConfig {
    */
   bodyBgImg?: BodyBgImg;
   /**
-   * 首页 Banner 配置，里面的属性全部支持在 frontmatter 配置 tk.banner.[key]
+   * 首页 Banner 配置，里面的属性全部支持在 frontmatter 配置，格式为 tk.banner.[key]
    */
   banner?: Banner;
   /**
    * 博主信息 (显示在首页侧边栏)
    */
   blogger?: Blogger;
   /**
-   * 精选文章卡片配置，里面的属性全部支持在 frontmatter 配置 tk.topArticle.[key]
+   * 精选文章卡片配置，里面的属性全部支持在 frontmatter 配置，格式为 tk.topArticle.[key]
    */
   topArticle?: TopArticle;
   /**
-   * 分类卡片配置，里面的属性全部支持在 frontmatter 配置 tk.category.[key]
+   * 分类卡片配置，里面的属性全部支持在 frontmatter 配置，格式为 tk.category.[key]
    */
   category?: Category;
   /**
-   * 标签卡片配置，里面的属性全部支持在 frontmatter 配置 tk.tag.[key]
+   * 标签卡片配置，里面的属性全部支持在 frontmatter 配置，格式为 tk.tag.[key]
    */
   tag?: Tag;
   /**
-   * 友情链接卡片配置，里面的属性全部支持在 frontmatter 配置 tk.friendLink.[key]
+   * 友情链接卡片配置，里面的属性全部支持在 frontmatter 配置，格式为 tk.friendLink.[key]
    */
   friendLink?: FriendLink;
   /**
-   * 站点信息卡片配置，里面的属性全部支持在 frontmatter 配置 tk.docAnalysis.[key]
+   * 站点信息卡片配置，里面的属性全部支持在 frontmatter 配置，格式为 tk.docAnalysis.[key]
    */
   docAnalysis?: DocAnalysis;
   /**
-   * 文章列表配置，支持在 frontmatter 配置，如果是首页 index.md，则是 tk.post.[key]，如果是非首页 index.md，则是 post.[key]
+   * 文章列表配置，里面的属性全部支持在 frontmatter 配置，格式为 tk.post.[key]
    */
   post?: Post;
+  /**
+   * 文章信息配置，支持在 frontmatter 配置，如果在首页（index.md），格式为 tk.article.[key]，如果在文章页（非 index.md），格式为 article.[key]
+   */
+  article?: Article;
   /**
    * 面包屑配置，里面的属性全部支持在 frontmatter 配置 breadcrumb.[key]
    */
@@ -713,7 +717,14 @@ export interface Post {
    */
   showCapture?: boolean;
   /**
-   * 作者、日期、分类、标签、字数、阅读时长、浏览量等基本信息的图标是否显示
+   * 首页的图片查看器配置，完全是 ElImageViewer 的 props
+   */
+  imageViewer?: Partial<ImageViewerProps>;
+}
+
+export interface Article {
+  /**
+   * 作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息的图标是否显示
    *
    * @default true
    */
@@ -725,12 +736,12 @@ export interface Post {
    */
   dateFormat?: "yyyy-MM-dd" | "yyyy-MM-dd hh:mm:ss" | ((date: string) => string);
   /**
-   * 是否展示作者、日期、分类、标签、字数、阅读时长、浏览量等基本信息，分别作用于首页和文章页
-   * 如果 showBaseInfo 为数组，则控制在哪里显示，如 ["home"] 只在首页显示基本信息；如果为 boolean 值，则控制基本信息是否展示，如 false 则在首页和文章页都不显示基本信息
+   * 是否展示作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息，分别作用于首页和文章页
+   * 如果 showInfo 为数组，则控制在哪里显示，如 ["post"] 只在首页的 Post 列表显示基本信息；如果为 boolean 值，则控制基本信息是否展示，如 false 则在首页和文章页都不显示基本信息
    *
    * @default true
    */
-  showBaseInfo?: boolean | ("home" | "article")[];
+  showInfo?: boolean | ("post" | "article")[];
   /**
    * 文章页是否展示作者
    *
@@ -756,9 +767,26 @@ export interface Post {
    */
   showTag?: boolean;
   /**
-   * 首页的图片查看器配置，完全是 ElImageViewer 的 props
+   * 指定文章信息的传送位置，仅限在文章页生效，默认在文章页顶部
    */
-  imageViewer?: Partial<ImageViewerProps>;
+  teleport?: {
+    /**
+     * 指定需要传送的元素选择器
+     */
+    selector?: string;
+    /**
+     * 指定传送到元素的位置，before 在元素前，after 在元素后
+     *
+     * @default 'after'
+     */
+    position?: "before" | "after";
+    /**
+     * 指定一个 class 名，如果传送的位置和其他元素太接近，可以利用 class 来修改 margin
+     *
+     * @default teleport
+     */
+    className?: string;
+  };
 }
 
 export interface Breadcrumb {

vitepress-theme-teeker/src/styles/components/articleAnalyze.scss

@@ -3,7 +3,6 @@
 
 @include b(articleAnalyze) {
   flex-wrap: wrap;
-  color: var(--vp-c-text-2);
   font-size: 14px;
   margin-bottom: 24px;
   gap: getCssVar("gap1");
@@ -26,12 +25,27 @@
   }
 
   @include e(wrapper) {
+    flex-wrap: wrap;
+
+    &.teleport {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
     & > div:not(:last-child) {
       margin-right: 14px;
     }
 
+    a {
+      font-weight: 400;
+      color: var(--vp-c-text-2);
+      text-decoration: none;
+      font-size: 14px;
+    }
+
     i {
       margin-right: 3px;
+      color: var(--vp-c-text-2);
     }
   }
 }