.

Author: syaning

.vitepress/theme/components/PostLayout.vue

@@ -39,29 +39,29 @@ const formatDate = (date) => {
   </VPDoc>
 </template>
 
-<style>
+<style scoped lang="less">
 .post-meta {
   color: var(--vp-c-text-2);
   font-size: small;
   margin: 1rem 0 2rem 0;
-}
 
-.post-date {
-  display: flex;
-  align-items: center;
-}
+  .post-date {
+    display: flex;
+    align-items: center;
 
-.post-date > svg {
-  width: 12px;
-  height: 12px;
-  margin-right: 5px;
-}
+    > svg {
+      width: 12px;
+      height: 12px;
+      margin-right: 5px;
+    }
+  }
 
-.post-tags {
-  margin: 0 !important;
-}
+  .post-tags {
+    margin: 0 !important;
 
-.post-tags > span {
-  margin-right: 8px;
+    > span {
+      margin-right: 8px;
+    }
+  }
 }
 </style>

.vitepress/theme/components/TagGroup.vue

@@ -12,11 +12,11 @@ const {
 <template>
   <div class="tag-group">
     <span
-      v-for="({tag, cnt}) in tags"
+      v-for="({ tag, cnt }) in tags"
       :class="{ tag: true, active: activeTags.indexOf(tag) >= 0 }"
       @click="onToggle(tag)"
     >
-      {{tag}}({{cnt}})
+      {{ tag }}({{ cnt }})
     </span>
   </div>
 </template>
@@ -31,7 +31,7 @@ const {
     background: var(--vp-c-gray-soft);
     font-size: 12px;
     line-height: 16px;
-    padding: 4px 8px;
+    padding: 2px 8px 3px 8px;
     border-radius: 50px;
     cursor: pointer;