docs: enhance client api

Author: ulivz

docs/.vuepress/config.js

@@ -7,6 +7,7 @@ module.exports = {
       { text: 'Guide', link: '/guide/' },
       { text: 'Config', link: '/config/' },
       { text: 'Pagination', link: '/pagination/' },
+      { text: 'Client API', link: '/client-api/' },
       { text: 'Components', link: '/components/' },
     ],
     sidebarDepth: 3,

docs/client-api/README.md

@@ -0,0 +1,101 @@
+---
+sidebar: auto
+---
+
+# Client API
+
+::: tip TIP
+We strongly recommend that you read the [Getting Started](../guide/getting-started.md) section before using this plugin.
+:::
+
+## $pagination
+
+### $pagination.pages
+
+Matched pages for current route. example:
+
+```json
+[
+  { "relativePath": "b.md", "path": "/b.html" ... },
+  { "relativePath": "a.md", "path": "/a.html" ... },
+]
+```
+
+### $pagination.length
+
+Length of current paginations.
+
+### $pagination.hasPrev
+
+Whether previous pagination page exists.
+
+### $pagination.prevLink
+
+Link of previous pagination page.
+
+### $pagination.hasNext
+
+Whether next pagination page exists.
+
+### $pagination.nextLink
+
+Link of next pagination page.
+
+### $pagination.getSpecificPageLink
+
+Get specific pagination page via page number.
+
+::: tip TIP
+You can use this function to custom the pagination component as the internal 
+[`<Pagnination />`](../components/#pagination) component.
+:::
+
+
+## `$${FCID}`
+
+FCID, i.e the id of [Frontmatter Classifier](../guide/getting-started.md#frontmatter-classifier), if you create a 
+[Frontmatter Classifier](../guide/getting-started.md#frontmatter-classifier) as follows:
+
+```js
+module.exports = {
+  plugins: [
+    [
+      '@vuepress/blog',
+      {
+        frontmatters: [
+          {
+            // Unique ID of current classification
+            id: 'tag',
+            // Decide that the frontmatter keys will be grouped under this classification
+            keys: ['tag'],
+            // Path of the `entry page` (or `list page`)
+            path: '/tag/',
+            // Layout of the `entry page`
+            layout: 'Tag',
+          },
+        ],
+      },
+    ],
+  ],
+}
+```
+
+Then this plugin will inject a `$tag` object to the prototype of Vue, so you can use it directly at your 
+layout component (`<Tag />`).
+
+### `$${FCID}.list`
+
+Get the list of matched frontmatter classifier types.
+
+The interface is as follows:
+
+```typescript
+type FCID = Array<{
+  name: string;
+  path: string;
+  pages: Array<VuePressPage>;
+}>
+```
+
+You can re-read the [Frontmatter Classifier](../guide/getting-started.md#frontmatter-classifier) to see the live 
+example of `tag`.

docs/components/README.md

@@ -8,7 +8,9 @@ In order to better enjoy the convenience of this plugin, the plugin provides som
 
 ## `<SimplePagination>`
 
-- Using it at your layout component:
+- Source Code: 
+[SimplePagination.vue](https://github.com/ulivz/vuepress-plugin-blog/blob/master/src/client/components/SimplePagination.vue)
+- Usage:
 
 ```vue
 <template>
@@ -36,7 +38,8 @@ default colors of this component.
 
 ## `<Pagination>`
 
-- Using it at your layout component:
+- Source Code: [Pagination.vue](https://github.com/ulivz/vuepress-plugin-blog/blob/master/src/client/components/Pagination.vue)
+- Usage:
 
 ```vue
 <template>

docs/guide/getting-started.md

@@ -257,7 +257,7 @@ the corresponding layout:
 | `/tag/vue/` | `FrontmatterPagination` / `Layout` |
 | `/tag/js/`  | `FrontmatterPagination` / `Layout` |
 
-In the `Tags` component, you can use `this.$tag.list` to get the tag list. The value would be like:
+In the `<Tag />` component, you can use `this.$tag.list` to get the tag list. The value would be like:
 
 ```json
 [

docs/pagination/README.md

@@ -2,15 +2,13 @@
 sidebar: auto
 ---
 
-# Pagination
+# Pagination Config
 
 ::: tip TIP
 We strongly recommend that you read the [Getting Started](../guide/getting-started.md) section before using this plugin.
 :::
 
-## Config
-
-### sorter
+## sorter
 
 - Type: string
 - Default: `See Below`
@@ -25,21 +23,21 @@ function sorter(prev: VuePressPage, next: VuePressPage){
 },
 ```
 
-### lengthPerPage
+## lengthPerPage
 
 - Type: string
 - Default: `10`
 
 Maximum number of posts per page.
 
-### layout
+## layout
 
 - Type: string
 - Default: `DirectoryPagination || Layout`
 
 Layout for pagination page (Except the index page.)
 
-### getPaginationPageUrl
+## getPaginationPageUrl
 
 - Type: string
 - Default: `See Below`
@@ -62,39 +60,4 @@ function getPaginationPageUrl(index) {
 `/tag/js/`)
 
 
-## Client API
-
-### $pagination
-
-#### $pagination.pages
-
-Matched pages for current route.
-
-#### $pagination.length
-
-Length of current paginations.
-
-#### $pagination.hasPrev
-
-Whether previous pagination page exists.
-
-#### $pagination.prevLink
-
-Link of previous pagination page.
-
-#### $pagination.hasNext
-
-Whether next pagination page exists.
-
-#### $pagination.nextLink
-
-Link of next pagination page.
-
-#### $pagination.getSpecificPageLink
-
-Get specific pagination page via page number.
-
-
-
-