[New] 在目录页添加标题标记功能

vdoing/components/Catalogue.vue

@@ -14,8 +14,12 @@
           <dl v-if="type(item) === 'array'" :key="index" class="inline">
             <dt>
               <router-link :to="item[2]">{{
-                `${index + 1}. ${item[1]}`
+                `${index + 1}. ${item[1]}` 
-              }}</router-link>
+              }}
+                <span class="title-tag" v-if="getTitleTag(item[2])">
+                  {{ getTitleTag(item[2]) }}
+                </span>
+              </router-link> 
             </dt>
           </dl>
           <dl v-else-if="type(item) === 'object'" :key="index">
@@ -30,7 +34,11 @@
                 <template v-if="type(c) === 'array'">
                   <router-link :to="c[2]" :key="i">{{
                     `${index + 1}-${i + 1}. ${c[1]}`
-                  }}</router-link>
+                  }}
+                    <span class="title-tag" v-if="getTitleTag(c[2])">
+                      {{ getTitleTag(c[2]) }}
+                    </span>
+                  </router-link>
                 </template>
                 <!-- 三级目录 -->
                 <div
@@ -48,6 +56,9 @@
                     :key="`${index + 1}-${i + 1}-${ii + 1}`"
                   >
                     {{ `${index + 1}-${i + 1}-${ii + 1}. ${cc[1]}` }}
+                    <span class="title-tag" v-if="getTitleTag(cc[2])">
+                      {{ getTitleTag(cc[2]) }}
+                    </span>
                   </router-link>
                 </div>
               </template>
@@ -77,6 +88,19 @@ export default {
     }
   },
   methods: {
+    /**
+     * 获取标题标记
+     */
+    getTitleTag(path){
+      const pages = this.$site.pages;
+      for (let i = 0; i < pages.length; i++) {
+        let titleTag = pages[i].frontmatter.titleTag
+        if(pages[i].path === path && titleTag !== undefined){
+          return titleTag;
+        }
+      }
+      return false;
+    },
     getPageData() {
       const pageComponent = this.$frontmatter.pageComponent
       if (pageComponent && pageComponent.data) {
@@ -139,6 +163,17 @@ export default {
 </script>
 
 <style scoped lang="stylus" rel="stylesheet/stylus">
+.title-tag
+  // height 1.1rem
+  // line-height 1.1rem
+  border 1px solid $activeColor
+  color $activeColor
+  font-size 0.8rem
+  padding 0 0.35rem
+  border-radius 0.2rem
+  margin-left 0rem
+  transform translate(0, -0.05rem)
+  display inline-block
 dl, dd
   margin 0
 .column-wrapper