feat(theme): add number for tag, close #2219

vuepress-theme-hope · Oct 13, 2022 · 6ab908e · 6ab908e
1 parent fb2dc43
commit 6ab908e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/packages/theme/src/client/modules/blog/components/TagList.ts b/packages/theme/src/client/modules/blog/components/TagList.ts
@@ -1,5 +1,5 @@
 import { usePageFrontmatter } from "@vuepress/client";
-import { computed, defineComponent, h } from "vue";
+import { defineComponent, h } from "vue";
 import { RouterLink } from "vue-router";
 import { generateIndexfromHash } from "vuepress-shared/lib/client";
 
@@ -17,34 +17,28 @@ export default defineComponent({
     const frontmatter = usePageFrontmatter<BlogPluginCategoryFrontmatter>();
     const tagMap = useTagMap();
 
-    const tagList = computed(() =>
-      Object.entries(tagMap.value.map).map(([name, { path }]) => ({
-        name,
-        path,
-      }))
-    );
-
     const isActive = (name: string): boolean =>
       name === frontmatter.value.blog?.name;
 
     return (): VNode =>
       h(
         "ul",
         { class: "tag-list-wrapper" },
-        tagList.value.map(({ name, path }) =>
+        Object.entries(tagMap.value.map).map(([tag, { path, items }]) =>
           h(
             "li",
             {
               class: [
                 "tag",
                 // TODO: magic number 9 is tricky here
-                `tag${generateIndexfromHash(name, 9)}`,
-                { active: isActive(name) },
+                `tag${generateIndexfromHash(tag, 9)}`,
+                { active: isActive(tag) },
               ],
             },
-            h(RouterLink, { to: path }, () =>
-              h("div", { class: "tag-name" }, name)
-            )
+            h(RouterLink, { to: path }, () => [
+              tag,
+              h("span", { class: "tag-num" }, items.length),
+            ])
           )
         )
       );

diff --git a/packages/theme/src/client/modules/blog/styles/tag-list.scss b/packages/theme/src/client/modules/blog/styles/tag-list.scss
@@ -50,6 +50,10 @@
     }
   }
 
+  .tag-num {
+    margin-left: 0.5em;
+  }
+
   @each $color in hope-config.$colors {
     $index: list.index(hope-config.$colors, $color) - 1;