feat: make tags in article's card be clickable

aplosdev · Aug 29, 2024 · 1ce10f9 · 1ce10f9
1 parent a81b05f
commit 1ce10f9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/custom/ArticleList.scss b/custom/ArticleList.scss
@@ -41,6 +41,10 @@
       }
     }
 
+    .tags span {
+      cursor: pointer;
+    }
+
     &.archive {
       background-color: #ff00dd11;
 
@@ -85,6 +89,7 @@
 
       .tags span {
         background-color: #5b4f001d;
+        cursor: pointer;
 
         @media (prefers-color-scheme: dark) {
           background-color: #ffff0037;

diff --git a/docs/.vitepress/theme/ArticleList.vue b/docs/.vitepress/theme/ArticleList.vue
@@ -49,10 +49,14 @@
             </span>
           </p>
           <div class="tags" v-if="post.tags">
-            <span v-if="typeof post.tags === 'string'" :key="post.tags">{{
-              post.tags
-            }}</span>
-            <span v-else v-for="tag in post.tags" :key="tag">{{ tag }}</span>
+            <span
+              v-if="typeof post.tags === 'string'"
+              :key="post.tags"
+              @click="filterPosts(post.tags)"
+              >{{ post.tags }}</span
+            >
+            <span v-else v-for="tag in post.tags" :key="tag" @click="filterPosts(tag)"
+            >{{ tag }}</span>
           </div>
         </div>
       </article>