feat: rewrite

components/Pagination.vue

@@ -1,56 +1,62 @@
 <template>
   <div
     class="pagination"
-    v-if="$pagination"
+    v-if="pagination"
   >
     <router-link
       class="prev"
       title="新的文章"
-      v-if="$pagination.hasPrev"
-      :to="$pagination.prevLink"
+      v-if="pagination.hasPrev"
+      :to="pagination.prevLink"
     >
       新的文章
     </router-link>
     <router-link
       class="next"
       title="旧的文章"
-      v-if="$pagination.hasNext"
-      :to="$pagination.nextLink"
+      v-if="pagination.hasNext"
+      :to="pagination.nextLink"
     >
       旧的文章
     </router-link>
   </div>
 </template>
 
+<script>
+  export default {
+    props: ['pagination']
+  }
+</script>
+
 <style lang="stylus">
-.pagination
-  a
-    margin-right: 20px
-    color: #b58900
-    height: 38px
-    line-height: 38px
-    transition: all .3s ease
-    position: relative
-    overflow: hidden
-    display: inline-block
-    background: #eee8d5
-    padding: 0 15px
-    text-decoration: none
-    &:before
-      content: attr(title)
-      width: 100%
-      left: 0
-      transform: translateX(-100%)
-      text-align: center
-      top: 0
-      bottom: 0
-      background-color: #b58900
-      position: absolute
-      transition: transform .3s ease
-      z-index: 1
-      color: #eee8d5
-    &:hover
-      color: #eee8d5
+  .pagination
+    a
+      margin-right: 20px
+      color: #b58900
+      height: 38px
+      line-height: 38px
+      transition: all .3s ease
+      position: relative
+      overflow: hidden
+      display: inline-block
+      background: #eee8d5
+      padding: 0 15px
+      text-decoration: none
       &:before
-        transform: translateX(0)
+        content: attr(title)
+        width: 100%
+        left: 0
+        transform: translateX(-100%)
+        text-align: center
+        top: 0
+        bottom: 0
+        background-color: #b58900
+        position: absolute
+        transition: transform .3s ease
+        z-index: 1
+        color: #eee8d5
+      &:hover
+        color: #eee8d5
+        &:before
+          transform: translateX(0)
 </style>

example/.vuepress/config.js

@@ -18,6 +18,7 @@ module.exports = {
       { text: 'donate', link: '/donate.html' },
       { text: 'tag', link: '/tag/' },
       { text: 'category', link: '/category/' },
+      { text: 'archive', link: '/archive/' },
     ]
   },
   markdown: {

example/about.md

@@ -1,4 +1,5 @@
 ---
+layout: Page
 title: 关于这个可爱的男孩子
 subtitle: 先定一个小目标，写出能用的代码就行了。
 ---

example/donate.md

@@ -1,4 +1,5 @@
 ---
+layout: Page
 title: 捐赠支持
 ---
 

example/girls.md

@@ -1,4 +1,5 @@
 ---
+layout: Page
 title: 那些吸引我的女孩子们
 subtitle: 来自 EGOIST 的告白
 waifus:
@@ -163,4 +164,4 @@ export default {
     }
   }
 }
-</script>
+</script>

example/index.md

@@ -1,3 +1,7 @@
+---
+layout: Layout
+---
+
 <div class="egoist-name">
   egoist
   <span class="dot">.</span>
@@ -78,4 +82,4 @@ export default {
   .egoist-name
     font-size: 1.6rem;
     margin: 5px 0 15px 0;
-</style>
+</style>

index.js

@@ -1,10 +1,77 @@
 const path = require('path')
 
+const POST_PERMALINK = '/:year/:month/:day/:slug'
+
 module.exports = {
   name: 'vuepress-theme-egoist',
   plugins: [
-    '@vuepress/blog',
-    '@vuepress/pagination',
+    ['@vuepress/blog', {
+      // 基于目录的分类
+      // 声明哪些目录下的文档将会被认为是 post
+      // name 声明了类型
+      // dirname 声明了子目录的名字
+      // permalink 决定了该目录下所有 post 将会采用的 permalink pattern
+      directories: [
+        {
+          id: 'post',
+          dirname: '_posts',
+          // 列表页（只有一个）
+          path: '/post/',
+          layout: 'IndexPost',
+          // 详情页（N个）
+          itemLayout: 'Post',
+          itemPermalink: POST_PERMALINK,
+          // 通过 this.$pagination.$post 访问
+          pagination: {
+            perPagePosts: 10
+          }
+        },
+        {
+          id: 'archive',
+          dirname: '_archive',
+          // 列表页（只有一个）
+          path: '/archive/',
+          layout: 'Archive',
+          // 详情页（N个）
+          itemLayout: 'Post',
+          itemPermalink: `/archive/${POST_PERMALINK}`,
+          // 通过 this.$pagination.$archive 访问
+          pagination: {
+            perPagePosts: 10
+          }
+        }
+      ],
+      // 基于 frontmatter 的分类
+      // 声明哪些目录下的文档将会被认为是额外添加的聚合页
+      // name 决定了 fronmatter 上分类的属性名
+      // path 决定了该聚合页的路径
+      frontmatters: [
+        {
+          id: "category",
+          keys: ['category', 'categories'],
+          path: '/category/',
+          layout: 'Categories',
+          frontmatter: { title: 'Categories' },
+          itemlayout: 'Category',
+          // 通过 this.$pagination.$category 访问
+          pagination: {
+            perPagePosts: 10
+          }
+        },
+        {
+          id: "tag",
+          keys: ['tag', 'tags'],
+          path: '/tag/',
+          layout: 'Tags',
+          frontmatter: { title: 'Tags' },
+          itemlayout: 'Tag',
+          // 通过 this.$pagination.$category 访问
+          pagination: {
+            perPagePosts: 10
+          }
+        }
+      ]
+    }],
     [
       '@vuepress/search', {
       searchMaxSuggestions: 10

layouts/Archive.vue

@@ -0,0 +1,44 @@
+<template>
+  <LayoutWrapper>
+    <div class="main">
+      <Content/>
+      <List :items="pages"/>
+      <Pagination :pagination="pagination"/>
+    </div>
+  </LayoutWrapper>
+</template>
+
+<script>
+  export default {
+    created() {
+      this.pagination.setIndexPage('/archive/')
+    },
+    computed: {
+      pagination () {
+        return this.$pagination('archive')
+      },
+      pages () {
+        return this.pagination.pages
+      }
+    }
+  }
+</script>
+
+<style lang="stylus">
+  .post-title
+    font-weight: 300
+    font-size: 2rem
+    margin: 0 0 15px 0
+    a
+      color: #b58900
+      text-decoration: none
+      &:hover
+        color: #ff69b4
+
+  @media screen and (max-width: 768px)
+    .post-title
+      font-size: 16px
+
+    .egoist-tags
+      margin-bottom 10px
+</style>

layouts/Categories.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutWrapper>
     <div class="main">
-      <EgoistTags :tags="$categories.list"/>
+      <EgoistTags :tags="$category.list"/>
     </div>
   </LayoutWrapper>
 </template>

layouts/Category.vue

@@ -5,4 +5,3 @@
     </div>
   </LayoutWrapper>
 </template>
-

layouts/FrontmatterClassification.vue

@@ -0,0 +1,38 @@
+<template>
+  <LayoutWrapper>
+    <div class="main">
+      <div class="page-header">
+        <h2 class="page-title">{{ paths.pid + ' = "' + paths.id + '"'}}</h2>
+      </div>
+      <List :items="pagination.pages"/>
+      <Pagination :pagination="pagination"/>
+    </div>
+  </LayoutWrapper>
+</template>
+
+<script>
+  export default {
+    created () {
+    },
+    computed: {
+      pagination () {
+        const { pid, id } = this.paths
+        return this.$pagination(pid, id)
+      },
+      paths () {
+        const path = this.$route.path
+        const [pid, id] = path.split('/').filter(v => v)
+        return {
+          pid,
+          id
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .page-title {
+    text-transform: uppercase;
+  }
+</style>

layouts/Layout.vue

@@ -2,13 +2,29 @@
   <LayoutWrapper>
     <div class="main">
       <Content/>
-      <EgoistTags :tags="$tags.list.slice(0, 10)"/>
-      <List :items="$pagination.posts"/>
-      <Pagination/>
+      <EgoistTags :tags="$tag.list.slice(0, 10)"/>
+      <List :items="pages"/>
+      <Pagination :pagination="pagination"/>
     </div>
   </LayoutWrapper>
 </template>
 
+<script>
+  export default {
+    created() {
+      this.pagination.setIndexPage('/')
+    },
+    computed: {
+      pagination () {
+        return this.$pagination('post')
+      },
+      pages () {
+        return this.pagination.pages
+      }
+    }
+  }
+</script>
+
 <style lang="stylus">
   .post-title
     font-weight: 300
@@ -19,11 +35,11 @@
       text-decoration: none
       &:hover
         color: #ff69b4
-
+  
   @media screen and (max-width: 768px)
     .post-title
       font-size: 16px
-
+    
     .egoist-tags
       margin-bottom 10px
 </style>

layouts/Tags.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutWrapper>
     <div class="main">
-      <EgoistTags :tags="$tags.list"/>
+      <EgoistTags :tags="$tag.list"/>
     </div>
   </LayoutWrapper>
 </template>