fix: make the classification label clickable

vuepress-reco · Apr 25, 2024 · 904e475 · 904e475
1 parent ec80baf
commit 904e475
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 46 deletions.
diff --git a/packages/@vuepress-reco/plugin-page/src/node/PageCreater.ts b/packages/@vuepress-reco/plugin-page/src/node/PageCreater.ts
@@ -18,10 +18,18 @@ export function formatDate(date) {
   return dateNum
 }
 
-export function removeEmptyString(value) {
+export function removeEmptyString(value: string) {
   return !value ? '' : value.trim().replaceAll(' ', '-')
 }
 
+export function formatCategory(category: string) {
+  return convertToPinyin(removeEmptyString(category))
+}
+
+export function formatPath(path: string) {
+  return convertToPinyin(decodeURIComponent(path))
+}
+
 // 比对时间
 export function compareDate(prev, next) {
   const prevDate = formatDate(prev.frontmatter.date)
@@ -75,22 +83,14 @@ export default class PageCreater {
   // 将 path 中的中文转换成拼音
   private parseChineseInPagePathToPinyin() {
     this.app.pages = this.app.pages.map((page: Page) => {
-      page.path = convertToPinyin(decodeURIComponent(page.path))
-      page.data.path = convertToPinyin(decodeURIComponent(page.data.path))
-      page.componentFilePath = convertToPinyin(
-        decodeURIComponent(page.componentFilePath)
-      )
-      page.componentFilePathRelative = convertToPinyin(
-        decodeURIComponent(page.componentFilePathRelative)
-      )
-      page.chunkFilePath = convertToPinyin(decodeURIComponent(page.chunkFilePath))
-      page.chunkFilePathRelative = convertToPinyin(
-        decodeURIComponent(page.chunkFilePathRelative)
-      )
-      page.htmlFilePath = convertToPinyin(decodeURIComponent(page.htmlFilePath))
-      page.htmlFilePathRelative = convertToPinyin(
-        decodeURIComponent(page.htmlFilePathRelative)
-      )
+      page.path = formatPath(page.path)
+      page.data.path = formatPath(page.data.path)
+      page.componentFilePath = formatPath(page.componentFilePath)
+      page.componentFilePathRelative = formatPath(page.componentFilePathRelative)
+      page.chunkFilePath = formatPath(page.chunkFilePath)
+      page.chunkFilePathRelative = formatPath(page.chunkFilePathRelative)
+      page.htmlFilePath = formatPath(page.htmlFilePath)
+      page.htmlFilePathRelative = formatPath(page.htmlFilePathRelative)
 
       return page
     })
@@ -129,7 +129,7 @@ export default class PageCreater {
     const { path, layout } = option
     const page = createPage(this.app, {
       frontmatter: { layout },
-      path: convertToPinyin(path),
+      path: formatPath(path),
     })
 
     this._extendedPages.push(page)
@@ -197,36 +197,38 @@ export default class PageCreater {
         if (isEmptyPlainObject(this.categoryPageData[key].items)) {
           this.categoryPageData[key].items = categoryValues.reduce(
             (prev, current) => {
-              prev[convertToPinyin(current)] = {
+              prev[formatCategory(current)] = {
                 pages: [page],
                 length: 1,
-                label: removeEmptyString(current),
+                label: current,
+                categoryValue: formatCategory(current),
               }
               return prev
             },
             {}
           )
         } else {
           categoryValues
-            ?.map((value) => removeEmptyString(String(value)))
             .forEach((value: ItemKey) => {
               if (!value) return
 
               const categoryPageDataItem =
-                this.categoryPageData[key].items[convertToPinyin(value)]
+                this.categoryPageData[key].items[formatCategory(value)]
 
               if (!categoryPageDataItem) {
-                this.categoryPageData[key].items[convertToPinyin(value)] = {
+                this.categoryPageData[key].items[formatCategory(value)] = {
                   pages: [page],
                   length: 1,
                   label: value,
+                  categoryValue: formatCategory(value),
                 }
               } else {
                 const { pages, length, label } = categoryPageDataItem
-                this.categoryPageData[key].items[convertToPinyin(value)] = {
+                this.categoryPageData[key].items[formatCategory(value)] = {
                   length: length + 1,
                   pages: [...pages, page],
                   label,
+                  categoryValue: formatCategory(value),
                 }
               }
             })
@@ -248,12 +250,12 @@ export default class PageCreater {
       const categoryValues = Object.keys(items)
 
       categoryValues.forEach((value, index) => {
-        const totalCount = items[convertToPinyin(value)].length
+        const totalCount = items[formatCategory(value)].length
         const totalPage = Math.ceil(totalCount / pageSize)
 
         Array.from({ length: totalPage }).forEach((item, currentPage) => {
           const page = createPage(this.app, {
-            path: `/${key}/${convertToPinyin(removeEmptyString(value))}/${currentPage + 1}.html`,
+            path: `/${key}/${formatCategory(value)}/${currentPage + 1}.html`,
             frontmatter: { layout },
           })
           this._extendedPages.push(page)

diff --git a/packages/@vuepress-reco/plugin-page/src/types/index.d.ts b/packages/@vuepress-reco/plugin-page/src/types/index.d.ts
@@ -36,6 +36,7 @@ export type CategoryPageData = Record<
         pages: ReleasedPage[]
         length: number
         label: string
+        categoryValue: string
       }
     >
   }

diff --git a/packages/vuepress-theme-reco/src/client/components/Home/Blog.vue b/packages/vuepress-theme-reco/src/client/components/Home/Blog.vue
@@ -18,14 +18,14 @@
       <ul class="category-wrapper">
         <li
           class="category-item"
-          v-for="(value, key, index) in categories"
+          v-for="({ label, length, categoryValue }, key, index) in categories"
           :key="index">
           <router-link
             class="category-link"
-            :to="`/categories/${key}/1.html`"
+            :to="`/categories/${categoryValue}/1.html`"
           >
-            <span class="text">{{ value.label }}</span>
-            <span class="num">{{ value.length }}</span>
+            <span class="text">{{ label }}</span>
+            <span class="num">{{ length }}</span>
           </router-link>
         </li>
       </ul>
@@ -37,14 +37,14 @@
       <ul class="tag-wrapper">
         <li
           class="tag-item"
-          v-for="(value, key, index) in tags"
+          v-for="({ label, categoryValue }, key, index) in tags"
           :key="index"
           :style="{ borderColor: createOneColor() }"
         >
           <router-link
             class="tag-link"
-            :to="`/tags/${key}/1.html`"
-          >{{ value.label }}</router-link>
+            :to="`/tags/${categoryValue}/1.html`"
+          >{{ label }}</router-link>
         </li>
       </ul>
     </MagicCard>
@@ -77,6 +77,8 @@ const tags = computed(() => {
   return categorySummary?.tags?.items || []
 })
 
+console.log(categories.value, tags.value)
+
 const postsOfCurrentPage = computed(() => {
   const start = (currentPage.value - 1) * perPage
   const end = currentPage.value * perPage

diff --git a/packages/vuepress-theme-reco/src/client/components/PageInfo.vue b/packages/vuepress-theme-reco/src/client/components/PageInfo.vue
@@ -4,12 +4,20 @@
 
     <Xicons v-if="!!date" icon="Calendar" :text="date" />
 
-    <Xicons v-if="!!categories && categories.length > 0" icon="Folder">
-      {{ categories.join(' ') }}
+    <Xicons v-if="categories.length > 0" icon="Folder">
+      <router-link
+        v-for="({ label, pathValue }) in categories"
+        :to="`/categories/${pathValue}/1.html`"
+        :key="pathValue"
+      >{{ label }}</router-link>
     </Xicons>
 
-    <Xicons v-if="!!tags && tags.length > 0" icon="Tag">
-      {{ tags.join(' ') }}
+    <Xicons v-if="tags.length > 0" icon="Tag">
+      <router-link
+        v-for="({ label, pathValue }) in tags"
+        :to="`/tags/${pathValue}/1.html`"
+        :key="pathValue"
+      >{{ label }}</router-link>
     </Xicons>
 
     <Xicons v-if="showValineViews || showWalineViews">
@@ -42,6 +50,14 @@ import { useComment } from '@vuepress-reco/vuepress-plugin-comments/composables'
 import { formatISODate } from '@utils/other'
 import { convertToPinyin } from '@vuepress-reco/shared'
 
+function removeEmptyString(value: string) {
+  return !value ? '' : value.trim().replaceAll(' ', '-')
+}
+
+function formatCategory(category: string) {
+  return convertToPinyin(removeEmptyString(category))
+}
+
 export default defineComponent({
   name: 'PageInfo',
 
@@ -78,11 +94,23 @@ export default defineComponent({
       return d ? formatISODate(d) : ''
     })
 
-    const categories = computed(
-      () => pageData?.value?.frontmatter?.categories || []
-    )
+    const categories = computed(() => {
+      return (pageData?.value?.frontmatter?.categories || []).map(category => {
+        return {
+          label: category,
+          pathValue: formatCategory((category))
+        }
+      })
+    })
 
-    const tags = computed(() => pageData?.value?.frontmatter?.tags || [])
+    const tags = computed(() => {
+      return (pageData?.value?.frontmatter?.tags || []).map(category => {
+        return {
+          label: category,
+          pathValue: formatCategory((category))
+        }
+      })
+    })
 
     const showPageInfo = computed(
       () =>

diff --git a/packages/vuepress-theme-reco/src/client/layouts/Categories.vue b/packages/vuepress-theme-reco/src/client/layouts/Categories.vue
@@ -3,18 +3,18 @@
     <div class="categories-container">
       <ul class="category-list">
         <li
-          v-for="({ label, length }, index) in categoryList"
+          v-for="({ label, categoryValue }, index) in categoryList"
           :key="index"
           :class="[
             'category-item',
             {
-              active: categoryPosts.currentCategoryValue === convertToPinyin(label),
+              active: categoryPosts.currentCategoryValue === categoryValue,
             },
           ]"
         >
           <RouterLink
             class="category-link"
-            :to="`/${categoryPosts.currentCategoryKey}/${convertToPinyin(label)}/1.html`"
+            :to="`/${categoryPosts.currentCategoryKey}/${categoryValue}/1.html`"
           >
             <span class="text">{{ label }}</span>
           </RouterLink>
@@ -38,7 +38,6 @@ import { defineComponent, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
 import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/composables'
-import { convertToPinyin } from '@vuepress-reco/shared'
 import PostList from '@components/PostList.vue'
 import Common from '@components/Common/index.vue'
 import Pagation from '@components/Pagation.vue'
@@ -91,7 +90,6 @@ export default defineComponent({
       categoryList,
       categoryPosts,
       handlePagation,
-      convertToPinyin
     }
   },
 })