feat: paginationComponent option - ability to cutom pagination component

example/.vuepress/config.js

@@ -10,7 +10,6 @@ module.exports = {
     modifyBlogPluginOptions(blogPlugnOptions) {
       const archiveDirectoryClassifierIndex = blogPlugnOptions.directories.findIndex(d => d.id === 'archive')
       blogPlugnOptions.directories.splice(archiveDirectoryClassifierIndex, 1)
-      console.log(blogPlugnOptions)
       return blogPlugnOptions
     },
     /**
@@ -51,5 +50,7 @@ module.exports = {
         },
       ],
     },
+
+    // paginationComponent: 'SimplePagination'
   },
 }

global-components/BaseListLayout.vue

@@ -20,23 +20,50 @@
       </div>
     </div>
 
-    <Pagination :pagination="pagination"/>
+    <component v-if="paginationComponent" :is="paginationComponent"></component>
   </div>
 </template>
 
 <script>
+  /* global THEME_BLOG_PAGINATION_COMPONENT */
+  
   import Toc from '@theme/components/Toc.vue'
-  import Pagination from '@theme/components/Pagination.vue'
   import { NavigationIcon, ClockIcon } from 'vue-feather-icons'
+  import { Pagination, SimplePagination } from '@vuepress/plugin-blog/lib/client/components'
+  
+  console.log(SimplePagination)
   
   export default {
     components: { Toc, Pagination, NavigationIcon, ClockIcon },
     props: ['pagination'],
+    data() {
+      return {
+        paginationComponent: null
+      }
+    },
+    
+    created() {
+      this.paginationComponent = this.getPaginationComponent()
+    },
+    
     computed: {
       pages() {
         return this.pagination.pages
-      }
+      },
     },
+    
+    methods: {
+      getPaginationComponent() {
+        const n = THEME_BLOG_PAGINATION_COMPONENT
+        if (n === 'Pagination') {
+          return Pagination
+        }
+        if (n === 'SimplePagination') {
+          return SimplePagination
+        }
+        return Vue.component(n) || Pagination
+      }
+    }
   }
 </script>
 

index.js

@@ -21,7 +21,7 @@ module.exports = (themeConfig, ctx) => {
         itemLayout: 'Post',
         itemPermalink: '/:year/:month/:day/:slug',
         pagination: {
-          perPagePosts: 5,
+          lengthPerPage: 5,
         },
       },
       {
@@ -32,7 +32,7 @@ module.exports = (themeConfig, ctx) => {
         itemLayout: 'Post',
         itemPermalink: '/archive/:year/:month/:day/:slug',
         pagination: {
-          perPagePosts: 5,
+          lengthPerPage: 5,
         },
       },
     ],
@@ -41,8 +41,8 @@ module.exports = (themeConfig, ctx) => {
         id: "tag",
         keys: ['tag', 'tags'],
         path: '/tag/',
-        layout: 'Tags',
-        frontmatter: { title: 'Tags' },
+        layout: 'Tag',
+        frontmatter: { title: 'Tag' },
         itemlayout: 'Tag',
         pagination: {
           perPagePosts: 5
@@ -80,6 +80,11 @@ module.exports = (themeConfig, ctx) => {
 
   const config = {
     plugins,
+    define: {
+      THEME_BLOG_PAGINATION_COMPONENT: themeConfig.paginationComponent
+        ? themeConfig.paginationComponent
+        : 'Pagination'
+    }
   }
 
   /**

package.json

@@ -26,7 +26,7 @@
   "author": "ulivz<chl814@foxmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@vuepress/plugin-blog": "1.0.0",
+    "@vuepress/plugin-blog": "1.1.0",
     "@vuepress/plugin-medium-zoom": "1.0.0",
     "@vuepress/plugin-nprogress": "1.0.0",
     "@vuepress/plugin-pwa": "1.0.0",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "eslint-config-sherry": "0.0.1",
-    "vuepress": "1.0.0-beta.1"
+    "vuepress": "^1.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"