add tags and fix bugs

moremind · Mar 23, 2019 · 907eb70 · 907eb70
1 parent 025a4f6
commit 907eb70
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 29 deletions.
diff --git a/docs/.vuepress/nav/index.js b/docs/.vuepress/nav/index.js
@@ -57,7 +57,9 @@ module.exports = [
     items: [
       {
         text: 'Project',
-        link: '/project/'
+        items: [
+          { text: 'Project', link: '/project/'},
+        ]
       },
       {
         text: 'Tools Sharing',

diff --git a/docs/.vuepress/theme/components/Comments.vue b/docs/.vuepress/theme/components/Comments.vue
@@ -41,13 +41,6 @@ export default {
           this.createValine()
         }, 180)
       }
-      
-      /**
-       * TODO:
-       * 1. 使用其他方法更新评论组件 或者使用其他较为好用的评论组件
-       * 2. 添加categories and tag
-       * 3. 更换其他主题
-       */
     }
   }
 }

diff --git a/docs/.vuepress/theme/components/DropdownLink.vue b/docs/.vuepress/theme/components/DropdownLink.vue
@@ -102,12 +102,12 @@ export default {
           font-size 0.9em
       a
         display block
-        line-height 1.7rem
+        line-height 1.5rem
         position relative
         border-bottom none
         font-weight 400
         margin-bottom 0
-        padding 0 1.5rem 0 1.25rem
+        padding 0 1.2rem 0 1.8rem
         &:hover
           color $accentColor
         &.router-link-active
@@ -144,7 +144,7 @@ export default {
           line-height 2rem
         .dropdown-subitem
           font-size 14px
-          padding-left 1rem
+          padding-left 0.2rem
 
 @media (min-width: $MQMobile)
   .dropdown-wrapper

diff --git a/docs/.vuepress/theme/global-components/Archives.vue b/docs/.vuepress/theme/global-components/Archives.vue
@@ -1,5 +1,14 @@
+<!--
+ * @Description: Achieve Archives
+ * @Author: finen
+ * @LastEditors: Please set LastEditors
+ * @Date: 2019-03-20 21:33:36
+ * @LastEditTime: 2019-03-24 02:36:15
+ -->
+
 <template>
   <div class="archives-content" style="margin-top: 50px">
+    <div class="content-top">嗯..! 目前共计 {{ArchivesArrayLength}} 篇日志！继续努力。</div>
     <div class="block">
       <el-timeline :reverse="true">
         <el-timeline-item
@@ -10,10 +19,10 @@
         >
           <el-card>
             <p class="article-title">
-              <router-link :to="item.regularPath">{{ item.frontmatter.title}}</router-link>
+              <router-link :to="item.regularPath">{{ item.frontmatter.title }}</router-link>
             </p>
             <p>Finen于{{ item.frontmatter.date}}发布该文章</p>
-            <!-- <el-tag>原创</el-tag><br/> -->
+            <el-tag>原创</el-tag><br/>
             <div class="archives-tag">
               <p class="article-tag">
                 Tags:
@@ -38,19 +47,19 @@ export default {
   },
   data() {
     return {
-      ArchivesArray: []
+      ArchivesArray: [],
+      ArchivesArrayLength: 0
     };
   },
   mounted: function() {
     this.filterArchivesList();
   },
-  computed: {
-    // 用于刷选frontmatter中有post: true的数据
-    filterList() {}
-
-    //将筛选出来的数据进行时间排序
-  },
   methods: {
+    /**
+     * @description: select post=true
+     * @param {type} 
+     * @return: 
+     */
     filterArchivesList() {
       this.pages.forEach(element => {
         if (element.frontmatter.post == true) {
@@ -61,7 +70,14 @@ export default {
       });
       // 通过时间进行排序
       this.ArchivesArray.sort(this.compare("ArticleDate"));
+      // count Archives length
+      this.ArchivesArrayLength = this.ArchivesArray.length;
     },
+    /**
+     * @description: format date
+     * @param {type} 
+     * @return: 
+     */
     formatDate(time) {
       var dateTime = new Date(new Date(time).getTime());
       var y = dateTime.getFullYear();
@@ -71,6 +87,11 @@ export default {
       var sendDate = y + "-" + m + "-" + d;
       return sendDate;
     },
+    /**
+     * @description: 对时间进行排序
+     * @param {type} 
+     * @return: 
+     */
     compare(pro) { 
       return function (obj1, obj2) { 
           var val1 = obj1[pro]; 
@@ -88,6 +109,13 @@ export default {
 };
 </script>
 <style>
+.archives-content>.content-top{
+  margin: 5px 0 15px 0px;
+  font-size: 18px;
+  font-weight: 500;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
 .el-timeline-item__content > .el-card > .el-card__body {
   text-align: left;
 }

diff --git a/docs/.vuepress/theme/global-components/HomeLayout.vue b/docs/.vuepress/theme/global-components/HomeLayout.vue
@@ -21,7 +21,7 @@
 
     <hr>
     <div class="footer">
-      <p>Copyright © 2017-2018 Finen</p>
+      <p>Copyright © 2017-2019 Finen</p>
     </div>
   </div>
 </template>

diff --git a/docs/.vuepress/theme/global-components/TagsCloud.vue b/docs/.vuepress/theme/global-components/TagsCloud.vue
@@ -1,10 +1,35 @@
 <template>
   <div class="tag-content">
     <div class="tags-cloud">
-      <el-badge :value="5" class="item" >
-        <el-button size="small">git</el-button>
+      <el-badge v-for="item in TagsCount" value="" class="item" >
+        <el-button size="medium" @click="filterArticle(item.tagName)"><strong>#{{item.tagName}}</strong> @({{item.number}})</el-button>
       </el-badge>
     </div>
+    <div class="tag-article">
+      <div class="block">
+      <el-timeline :reverse="true">
+        <el-timeline-item
+          v-for="items in selectArticle"
+          placement="top"
+          icon="el-icon-loading"
+        >
+          <el-card>
+            <p class="article-title">
+              <router-link :to="items.regularPath">{{ items.frontmatter.title }}</router-link>
+            </p>
+            <p>Finen于{{ items.frontmatter.date}}发布该文章</p>
+            <!-- <el-tag>原创</el-tag><br/> -->
+            <div class="archives-tag">
+              <p class="article-tag">
+                Tags:
+                <el-tag v-for="tag in items.frontmatter.tags">{{tag}}</el-tag>
+              </p>
+            </div>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+    </div>
   </div>
 </template>
 
@@ -19,27 +44,69 @@ export default {
   },
   data() {
     return {
-      TagsArray: [],
-      tagsCloud: []
+      tagsCloud: [], // Tags的所有数据的数组
+      TagsCount: [], // 统计完成的Tags
+      selectArticle: [], // 通过tag选择出来的文章
     };
   },
   mounted: function() {
     this.filterTagsList();
+    this.getTagsCloud();
+    
   },
   methods: {
     filterTagsList() {
       this.pages.forEach(element => {
+        // filter data
         if (element.frontmatter.post == true) {
-          this.TagsArray.push(element);
-          element.tags = element.frontmatter.tags;
           element.frontmatter.tags.forEach(item => {
             this.tagsCloud.push(item);
           });
         }
       });
-      console.log(this.tagsCloud);
-      console.log(this.tagsCloud.length);
+    },
+    /**
+     * tags count
+     */
+    getTagsCloud () {
+      let map = this.tagsCloud.reduce((m, x) => m.set(x, (m.get(x) || 0) + 1), new Map())
+      let arrLength = Array.from(map.values()).length;
+      for (let index = 0; index < arrLength; index++) {
+        let jsonTag = {};
+        jsonTag.tagName = Array.from(map.keys())[index];
+        jsonTag.number = Array.from(map.values())[index];
+        this.TagsCount.push(jsonTag);
+      }
+    },
+    filterArticle (tag) {
+      this.selectArticle = [];
+      this.pages.forEach(element => {
+        if (element.frontmatter.post == true && element.frontmatter.tags.includes(tag)) {
+          this.selectArticle.push(element);
+        }
+      });
     }
   }
 };
 </script>
+
+<style>
+.tags-cloud>.el-badge>.el-button{
+  margin: 0px 5px 12px 33px;
+}
+.el-card > .el-card__body > .article-title {
+  font-size: 20px;
+  font-weight: 600;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
+.archives-tag > .article-tag {
+  font-size: 14px;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
+.archives-tag > .article-tag > .el-tag {
+  margin-left: 5px;
+}
+</style>
+