🎨 update archives and fix bug

Author: moremind

docs/.vuepress/nav/index.js

@@ -55,6 +55,10 @@ module.exports = [
     text: 'Project',
     link: '/project/'
   },
+  {
+    text: 'Archives',
+    link: '/archives/',
+  },
   {
     text: 'Resume',
     link: '/about/'

docs/.vuepress/theme/global-components/AboutMe.vue

@@ -0,0 +1,2 @@
+<template>
+</template>

docs/.vuepress/theme/global-components/Archives.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="archives-content" style="margin-top: 50px">
+    <div class="block" >
+      <el-timeline>
+        <el-timeline-item timestamp="2018/4/12" placement="top" icon="el-icon-loading">
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/12 20:46</p>
+          </el-card>
+        </el-timeline-item>
+        
+      </el-timeline>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Archives",
+  props: {
+    pages: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      selectedTags: []
+    };
+  },
+  computed: {
+    filteredList() {
+      if (this.pages) {
+        return this.pages
+          .filter(item => {
+            const isBlogPost = !!item.frontmatter.blog;
+            const isReadyToPublish =
+              new Date(item.frontmatter.date) <= new Date();
+            // check if tags contain any of the selected tags
+            // const hasTags = item.frontmatter.tags && item.frontmatter.tags.some(tag => this.selectedTags.includes(tag))
+            // check if tags contain all of the selected tags
+            const hasTags =
+              !!item.frontmatter.tags &&
+              this.selectedTags.every(tag =>
+                item.frontmatter.tags.includes(tag)
+              );
+            if (
+              !isBlogPost ||
+              !isReadyToPublish ||
+              (this.selectedTags.length > 0 && !hasTags)
+            ) {
+              return false;
+            }
+            return true;
+          })
+          .sort(
+            (a, b) =>
+              new Date(b.frontmatter.date) - new Date(a.frontmatter.date)
+          );
+      }
+    }
+  },
+  methods: {
+    getYears: function() {
+      return [
+        ...new Set(
+          this.filteredList.map(item =>
+            new Date(item.frontmatter.date).getFullYear()
+          )
+        )
+      ];
+    },
+    getMonths: function(year) {
+      return [
+        ...new Set(
+          this.filteredList
+            .filter(
+              item => new Date(item.frontmatter.date).getFullYear() == year
+            )
+            .map(item => new Date(item.frontmatter.date).getMonth())
+        )
+      ];
+    },
+    postsByDate(year, month) {
+      return this.filteredList.filter(item => {
+        const date = new Date(item.frontmatter.date);
+        return date.getFullYear() == year && date.getMonth() == month;
+      });
+    }
+  },
+  filters: {
+    // Filter definitions
+    monthToLongName(value) {
+      const months = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December"
+      ];
+      return months[value];
+    }
+  }
+};
+console.log("sss");
+</script>
+<style>
+.el-timeline-item__content > .el-card > .el-card__body {
+  text-align: left;
+}
+</style>
+
+
+

docs/.vuepress/theme/global-components/HomeLayout.vue

@@ -51,7 +51,7 @@ export default {
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
-    margin-top: 150px;
+    margin-top: 120px;
   }
   .nickname span {
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
@@ -86,7 +86,7 @@ export default {
   }
 }
 
-@media (max-width: 1020px) {
+@media (max-width: 1200px) {
   .box-card {
     width: 100%;
   }
@@ -133,10 +133,7 @@ export default {
 }
 </style>
 <style>
-.el-card__body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.cardpage>.el-card >.el-card__body {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
 }
 </style>

docs/.vuepress/theme/styles/theme.styl

@@ -55,6 +55,8 @@ body
 
 .content:not(.custom)
   @extend $wrapper
+  > *:first-child
+    margin-top $navbarHeight
   a:hover
     text-decoration underline
   p.demo

docs/archives/README.md

@@ -0,0 +1,3 @@
+---
+---
+<Archives :pages="$site.pages"/>