fix: 🐛 修复图片无法预览的问题

.vitepress/config.mts

@@ -39,7 +39,7 @@ export default defineConfig({
   } as DefaultTheme.Config,
   markdown: {
     config: (md) => {
-      md.use(imagePlugin)
+      md.use(imagePlugin as any)
     },
   },
 })

.vitepress/markdown/imagePlugin.ts

@@ -1,16 +1,20 @@
-export default function (md) {
+import type MarkdownIt from 'markdown-it'
+
+export default function (md: MarkdownIt) {
   md.renderer.rules.image = (...props) => {
     const [tokens, idx] = props
     const token = tokens[idx]
-    let attrs = ''
-    for (const [key, value] of token.attrs) {
-      if (key === 'alt') {
-        attrs += `${key}="${token.content}"`
-      }
-      else {
-        attrs += `${key}="${value}"`
+    const attrs = []
+    if (token.attrs) {
+      for (const [key, value] of token.attrs) {
+        if (key === 'alt') {
+          attrs.push(`${key}="${token.content}"`)
+        }
+        else {
+          attrs.push(`${key}="${value}"`)
+        }
       }
     }
-    return `<Image ${attrs} :preview-mask="false" />`
+    return `<ClientOnly><Image ${attrs.join(' ')} :preview-mask="false" /></ClientOnly>`
   }
 };

.vitepress/theme/components/Image.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { useAttrs } from 'vue'
+import { Image } from 'ant-design-vue'
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <Image v-bind="attrs" />
+</template>

.vitepress/theme/components/Tags.vue

@@ -1,66 +1,70 @@
-<template>
-    <div class="tags">
-        <span @click="toggleTag(key)" v-for="(item, key) in data" class="tag">
-            {{ key }} <strong>{{ data[key].length }}</strong>
-        </span>
-    </div>
-    <div class="tag-header">{{ selectTag }}</div>
-    <a :href="withBase(article.regularPath)" v-for="(article, index) in data[selectTag]" :key="index" class="posts">
-        <div class="post-container">
-            <div class="post-dot"></div>
-            {{ article.frontMatter.title }}
-        </div>
-        <div class="date">{{ article.frontMatter.date }}</div>
-    </a>
-</template>
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { useData, withBase } from 'vitepress'
 import { initTags } from '../functions'
-let url = location.href.split('?')[1]
-let params = new URLSearchParams(url)
+
+const url = location.href.split('?')[1]
+const params = new URLSearchParams(url)
 const { theme } = useData()
 const data = computed(() => initTags(theme.value.posts))
-let selectTag = ref(params.get('tag') ? params.get('tag') : '')
-const toggleTag = (tag: string) => {
-    selectTag.value = tag
+const selectTag = ref<string | number>(params.get('tag') as string ? params.get('tag') as string : '')
+function toggleTag(tag: string | number) {
+  selectTag.value = tag
 }
 </script>
 
+<template>
+  <div class="tags">
+    <span v-for="(item, key) in data" :key="key" class="tag" @click="toggleTag(key)">
+      {{ key }} <strong>{{ data[key].length }}</strong>
+    </span>
+  </div>
+  <div class="tag-header">
+    {{ selectTag }}
+  </div>
+  <a v-for="(article, index) in data[selectTag]" :key="index" :href="withBase(article.regularPath)" class="posts">
+    <div class="post-container">
+      <div class="post-dot" />
+      {{ article.frontMatter.title }}
+    </div>
+    <div class="date">{{ article.frontMatter.date }}</div>
+  </a>
+</template>
+
 <style scoped>
 .tags {
-    margin-top: 14px;
-    display: flex;
-    flex-wrap: wrap;
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
 }
 .tag {
-    display: inline-block;
-    padding: 4px 16px;
-    margin: 6px 8px;
-    font-size: 0.875rem;
-    line-height: 25px;
-    background-color: var(--vp-c-bg-alt);
-    transition: 0.4s;
-    border-radius: 2px;
-    color: var(--vp-c-text-1);
-    cursor: pointer;
+  display: inline-block;
+  padding: 4px 16px;
+  margin: 6px 8px;
+  font-size: 0.875rem;
+  line-height: 25px;
+  background-color: var(--vp-c-bg-alt);
+  transition: 0.4s;
+  border-radius: 2px;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
 }
 .tag strong {
-    color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
 }
 .tag-header {
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin: 1rem 0;
-    text-align: left;
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin: 1rem 0;
+  text-align: left;
 }
 
 @media screen and (max-width: 768px) {
-    .tag-header {
-        font-size: 1.5rem;
-    }
-    .date {
-        font-size: 0.75rem;
-    }
+  .tag-header {
+    font-size: 1.5rem;
+  }
+  .date {
+    font-size: 0.75rem;
+  }
 }
 </style>

.vitepress/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["ESNext", "DOM"],
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "types": [],
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts", "**/*.d.ts", "**/*.tsx", "**/*.vue"]
+}