feat(theme): add internal link

pengzhanbo · Aug 30, 2024 · 3d3cb43 · 3d3cb43
1 parent cc9b5f8
commit 3d3cb43
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 16 deletions.
diff --git a/theme/src/client/components/Blog/VPBlogArchives.vue b/theme/src/client/components/Blog/VPBlogArchives.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import VPShortPostList from '@theme/Blog/VPShortPostList.vue'
-import { useArchives, useBlogNavTitle } from '../../composables/index.js'
+import { useArchives, useInternalLink } from '../../composables/index.js'
 
-const title = useBlogNavTitle('archive')
+const { archive: archiveLink } = useInternalLink()
 const { archives } = useArchives()
 </script>
 
@@ -12,7 +12,7 @@ const { archives } = useArchives()
 
     <h2 class="archives-title">
       <span class="vpi-archive icon" />
-      <span>{{ title }}</span>
+      <span>{{ archiveLink.text }}</span>
     </h2>
     <div v-if="archives.length" class="archives">
       <template v-for="archive in archives" :key="archive.label">

diff --git a/theme/src/client/components/Blog/VPBlogCategories.vue b/theme/src/client/components/Blog/VPBlogCategories.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import VPCategories from '@theme/Blog/VPCategories.vue'
-import { useBlogCategory, useBlogNavTitle } from '../../composables/index.js'
+import { useBlogCategory, useInternalLink } from '../../composables/index.js'
 
-const title = useBlogNavTitle('category')
+const { categories: categoriesLink } = useInternalLink()
 const { categories } = useBlogCategory()
 </script>
 
@@ -12,7 +12,7 @@ const { categories } = useBlogCategory()
 
     <h2 class="categories-title">
       <span class="vpi-category icon" />
-      <span>{{ title }}</span>
+      <span>{{ categoriesLink.text }}</span>
     </h2>
 
     <slot name="blog-categories-content-before" />

diff --git a/theme/src/client/components/Blog/VPBlogTags.vue b/theme/src/client/components/Blog/VPBlogTags.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import VPShortPostList from '@theme/Blog/VPShortPostList.vue'
-import { useBlogNavTitle, useTags } from '../../composables/index.js'
+import { useInternalLink, useTags } from '../../composables/index.js'
 
+const { tags: tagsLink } = useInternalLink()
 const { tags, currentTag, postList, handleTagClick } = useTags()
-const title = useBlogNavTitle('tag')
 </script>
 
 <template>
@@ -13,7 +13,7 @@ const title = useBlogNavTitle('tag')
     <div class="tags-nav">
       <h2 class="tags-title">
         <span class="vpi-tag icon" />
-        <span>{{ title }}</span>
+        <span>{{ tagsLink.text }}</span>
       </h2>
       <slot name="blog-tags-title-after" />
       <div class="tags">

diff --git a/theme/src/client/components/Blog/VPPostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
@@ -2,13 +2,14 @@
 import { computed } from 'vue'
 import VPLink from '@theme/VPLink.vue'
 import type { PlumeThemeBlogPostItem } from '../../../shared/index.js'
-import { useTagColors } from '../../composables/index.js'
+import { useInternalLink, useTagColors } from '../../composables/index.js'
 
 const props = defineProps<{
   post: PlumeThemeBlogPostItem
 }>()
 
 const colors = useTagColors()
+const { categories: categoriesLink, tags: tagsLink } = useInternalLink()
 
 const sticky = computed(() => {
   if (typeof props.post.sticky === 'boolean') {
@@ -53,19 +54,22 @@ const createTime = computed(() =>
       <div v-if="categoryList.length" class="category-list">
         <span class="icon vpi-folder" />
         <template v-for="(cate, i) in categoryList" :key="i">
-          <span>{{ cate.name }}</span>
+          <VPLink :href="`${categoriesLink.link}?id=${cate.id}`">
+            {{ cate.name }}
+          </VPLink>
           <span v-if="i !== categoryList.length - 1">/</span>
         </template>
       </div>
       <div v-if="tags.length" class="tag-list">
         <span class="icon vpi-tag" />
         <template v-for="tag in tags" :key="tag.name">
-          <span
+          <VPLink
             class="tag"
             :class="tag.className"
+            :href="`${tagsLink.link}?tag=${tag.name}`"
           >
             {{ tag.name }}
-          </span>
+          </VPLink>
         </template>
       </div>
       <div v-if="createTime" class="create-time">

diff --git a/theme/src/client/components/VPDocMeta.vue b/theme/src/client/components/VPDocMeta.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import VPLink from '@theme/VPLink.vue'
 import { useReadingTimeLocale } from '@vuepress/plugin-reading-time/client'
-import { useData, useTagColors } from '../composables/index.js'
+import { useData, useInternalLink, useTagColors } from '../composables/index.js'
 
 const { page, frontmatter: matter } = useData<'post'>()
 const colors = useTagColors()
 const readingTime = useReadingTimeLocale()
+const { tags: tagsLink } = useInternalLink()
 
 const createTime = computed(() => {
   if (matter.value.createTime)
@@ -40,14 +42,15 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
     </p>
     <p v-if="tags.length > 0">
       <span class="vpi-tag icon" />
-      <span
+      <VPLink
         v-for="tag in tags"
         :key="tag.name"
         class="tag"
         :class="tag.className"
+        :href="`${tagsLink.link}?tag=${tag.name}`"
       >
         {{ tag.name }}
-      </span>
+      </VPLink>
     </p>
     <p v-if="createTime" class="create-time">
       <span class="vpi-clock icon" /><span>{{ createTime }}</span>