feat: 🚀 文章页新增多图片预览功能，部分配置项命名修改

Kele-Bingtang · Kele-Bingtang · commit 873a2bde6f9e · 2025-02-09T16:55:23.000+08:00
diff --git a/vitepress-theme-tk/src/components/ArticleImagePreview.vue b/vitepress-theme-tk/src/components/ArticleImagePreview.vue
@@ -1,14 +1,40 @@
 <script setup lang="ts" name="ArticleImagePreview">
 import { useDesign } from "../hooks";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import { createImageViewer } from "./ImageViewer";
 
 const { getPrefixClass } = useDesign();
 const prefixClass = getPrefixClass("articleImagePreview");
-</script>
 
-<template>
-  <div :class="prefixClass"></div>
-</template>
+const previewImage = (e: Event) => {
+  const target = e.target as HTMLElement;
+  const currentTarget = e.currentTarget as HTMLElement;
+
+  if (target.tagName.toLowerCase() === "img") {
+    const imgDoms = currentTarget.querySelectorAll<HTMLImageElement>(".content-container .main img");
+    const imgs = Array.from(imgDoms);
+
+    const urlList = imgs.map(el => el.src);
+    const initialIndex = imgs.findIndex(el => el === target);
+    const url = target.getAttribute("src");
+
+    // 兼容点击文档之外的图片
+    if (initialIndex === -1 && url) {
+      urlList.push(url);
+      initialIndex = urlList.length - 1;
+    }
 
-<style lang="scss" scoped>
-@use "../styles/components/articleImagePreview.scss";
-</style>
+    createImageViewer({ urlList, initialIndex, infinite: false });
+  }
+};
+
+onMounted(() => {
+  const docDomContainer = document.querySelector("#VPContent");
+  docDomContainer?.addEventListener("click", previewImage);
+});
+
+onUnmounted(() => {
+  const docDomContainer = document.querySelector("#VPContent");
+  docDomContainer?.removeEventListener("click", previewImage);
+});
+</script>
diff --git a/vitepress-theme-tk/src/components/FriendLinkCard.vue b/vitepress-theme-tk/src/components/FriendLinkCard.vue
@@ -15,13 +15,13 @@ const {
   limit = 4,
   title = `${friendLinkSvg}友情链接`,
   autoScroll = false,
-  scrollTimeOut = 2500,
+  scrollSpeed = 2500,
   autoPage = false,
-  pageTimeOut = 4000,
+  pageSpeed = 4000,
 } = { ...theme.friendLink, ...frontmatter.tk?.friendLink };
 
 // 使用上下滚动功能
-const { visibleData, startAutoScroll, stopAutoScroll } = useScrollData(list, 5, scrollTimeOut);
+const { visibleData, startAutoScroll, stopAutoScroll } = useScrollData(list, 5, scrollSpeed);
 
 const pageNum = ref(1);
 // 友情链接渲染数据
@@ -64,7 +64,7 @@ const getLiStyle = (index: number) => {
     :total="list.length"
     :title
     :autoPage
-    :pageTimeOut
+    :pageSpeed
     :class="prefixClass"
   >
     <template #default="{ transitionName, startAutoPage, closeAutoPage }">
diff --git a/vitepress-theme-tk/src/components/HomeCard.vue b/vitepress-theme-tk/src/components/HomeCard.vue
@@ -14,7 +14,7 @@ export interface HomeCardProps {
   pageSize?: number;
   total?: number;
   autoPage?: boolean;
-  pageTimeOut?: number;
+  pageSpeed?: number;
 }
 
 const {
@@ -24,7 +24,7 @@ const {
   pageSize = 4,
   total,
   autoPage = false,
-  pageTimeOut = 4000,
+  pageSpeed = 4000,
 } = defineProps<HomeCardProps>();
 
 const emit = defineEmits<{ pagination: [to: number, "pre" | "next"] }>();
@@ -63,10 +63,10 @@ let timer: NodeJS.Timeout;
 const startAutoPage = () => {
   // 先关闭自动翻页
   closeAutoPage();
-  if (pageTimeOut > 0) {
+  if (pageSpeed > 0) {
     timer = setTimeout(() => {
       pagination(1, "next");
-    }, pageTimeOut);
+    }, pageSpeed);
   }
 };
 /**
diff --git a/vitepress-theme-tk/src/components/HomeCategoryCard.vue b/vitepress-theme-tk/src/components/HomeCategoryCard.vue
@@ -23,7 +23,7 @@ const {
   homeTitle = `${categorySvg}文章分类`,
   limit = 5,
   autoPage = false,
-  pageTimeOut = 4000,
+  pageSpeed = 4000,
 } = { ...theme.category, ...frontmatter.tk?.category };
 
 // 当前显示的分类，如果是在分类页，则显示所有分类，如果在首页，则分页显示
@@ -57,7 +57,7 @@ const itemRefs = ref<HTMLLIElement[]>([]);
     :title="categoriesPage ? pageTitle : homeTitle"
     title-link="/categories"
     :autoPage
-    :pageTimeOut
+    :pageSpeed
     :class="prefixClass"
   >
     <template #default="{ transitionName }">
diff --git a/vitepress-theme-tk/src/components/HomePostItem.vue b/vitepress-theme-tk/src/components/HomePostItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts" name="HomePostItem">
 import { computed } from "vue";
 import { useDesign } from "../hooks";
+import { withBase } from "vitepress";
 import { KtContentData } from "../data/types";
 import { createImageViewer } from "./ImageViewer";
 import { formatDate, isArray } from "../helper";
@@ -17,8 +18,9 @@ const { frontmatter } = useUnrefData();
 
 const postFrontmatter = computed(() => props.post.frontmatter);
 const getImgUrl = (imgUrl: string | string[]) => {
-  if (isArray(imgUrl)) return imgUrl[0];
-  return imgUrl;
+  // 页面只展示一个图片
+  if (isArray(imgUrl)) return withBase(imgUrl[0]);
+  return withBase(imgUrl);
 };
 
 /**
diff --git a/vitepress-theme-tk/src/components/HomeTagCard.vue b/vitepress-theme-tk/src/components/HomeTagCard.vue
@@ -23,7 +23,7 @@ const {
   homeTitle = `${tagSvg}热门标签`,
   limit = 21,
   autoPage = false,
-  pageTimeOut = 4000,
+  pageSpeed = 4000,
 } = { ...theme.tag, ...frontmatter.tk?.tag };
 
 // 当前显示的标签，如果是在标签页，则显示所有标签，如果在首页，则显示前 limit 个标签
@@ -64,7 +64,7 @@ const itemRefs = ref<HTMLLIElement[]>([]);
     :title="tagsPage ? pageTitle : homeTitle"
     title-link="/tags"
     :autoPage
-    :pageTimeOut
+    :pageSpeed
     :class="prefixClass"
   >
     <template #default="{ transitionName }">
diff --git a/vitepress-theme-tk/src/components/TopArticleCard.vue b/vitepress-theme-tk/src/components/TopArticleCard.vue
@@ -16,7 +16,7 @@ const {
   limit = 4,
   title = `${TopArticleSvg}精选文章`,
   autoPage = false,
-  pageTimeOut = 4000,
+  pageSpeed = 4000,
 } = { ...theme.topArticle, ...frontmatter.tk?.topArticle };
 
 const TopArticleList =
@@ -48,7 +48,7 @@ const getStyle = (num: number, index: number) => {
     :total="TopArticleList.length"
     :title
     :autoPage
-    :pageTimeOut
+    :pageSpeed
     :class="prefixClass"
   >
     <template #default="{ transitionName }">
diff --git a/vitepress-theme-tk/src/config/types.ts b/vitepress-theme-tk/src/config/types.ts
@@ -199,7 +199,7 @@ export interface KtThemeConfig {
      * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
      * @default 4000 (4秒)
      */
-    pageTimeOut?: number;
+    pageSpeed?: number;
   };
   tag?: {
     /**
@@ -231,7 +231,7 @@ export interface KtThemeConfig {
      * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
      * @default 4000 (4秒)
      */
-    pageTimeOut?: number;
+    pageSpeed?: number;
   };
   topArticle?: {
     /**
@@ -258,7 +258,7 @@ export interface KtThemeConfig {
      * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
      * @default 4000 (4秒)
      */
-    pageTimeOut?: number;
+    pageSpeed?: number;
   };
   friendLink?: {
     /**
@@ -306,7 +306,7 @@ export interface KtThemeConfig {
      * 滚动间隔时间，单位：毫秒。autoScroll 为 true 时生效
      * @default 2500 (2.5秒)
      */
-    scrollTimeOut?: number;
+    scrollSpeed?: number;
     /**
      * 是否自动翻页
      * @default false
@@ -316,7 +316,7 @@ export interface KtThemeConfig {
      * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
      * @default 4000 (4秒)
      */
-    pageTimeOut?: number;
+    pageSpeed?: number;
   };
   docAnalysis?: {
     /**
diff --git a/vitepress-theme-tk/src/styles/components/articleImagePreview.scss b/vitepress-theme-tk/src/styles/components/articleImagePreview.scss
