feat: more abstract $frontmatterKey to yield multiple frontmatter classifiers

Author: ulivz

docs/client-api/README.md

@@ -59,10 +59,9 @@ You can use this function to custom the pagination component as the internal
 :::
 
 
-## `$${FCID}`
+## $frontmatterKey
 
-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:
+if you create a [Frontmatter Classifier](../guide/getting-started.md#frontmatter-classifier) as follows:
 
 ```js
 module.exports = {
@@ -88,17 +87,17 @@ module.exports = {
 }
 ```
 
-Then this plugin will inject a `$tag` object to the prototype of Vue, so you can use it directly at your 
+Then this plugin will inject a `$frontmatterKey` object to the prototype of Vue, so you can use it directly at your 
 layout component (`<Tag />`).
 
-### `$${FCID}.list`
+### `$frontmatterKey.list`
 
 Get the list of matched frontmatter classifier types.
 
 The interface is as follows:
 
 ```typescript
-type FCID = Array<{
+type FrontmatterKeyList = Array<{
   name: string;
   path: string;
   pages: Array<VuePressPage>;
@@ -107,3 +106,12 @@ type FCID = Array<{
 
 You can re-read the [Frontmatter Classifier](../guide/getting-started.md#frontmatter-classifier) to see the live 
 example of `tag`.
+
+::: tip Multiple Frontmatter Classifiers
+
+If you create two frontmatter classifiers, e.g. `tag` and `category`, then in `/tag/` route, the `$frontmatterKey` will 
+automatically point to `tag`, while in `/category/`, it will point to `category`.
+
+This variable is essentially designed to generalize the list page of frontmatter keys
+
+:::

docs/guide/getting-started.md

@@ -200,7 +200,7 @@ the data structure of `$page` at the [official documentation](https://v1.vuepres
 
 - [Pagination Config](../pagination/README.md)
 
-### Frontmatter Classifier
+## Frontmatter Classifier
 
 Frontmatter Classifier, which classifies pages that have the same frontmatter key values.
 
@@ -261,11 +261,14 @@ the corresponding layout:
 
 | url         | layout                             |
 | ----------- | ---------------------------------- |
-| `/tag/`     | `Tag`                              |
-| `/tag/vue/` | `FrontmatterPagination` / `Layout` |
-| `/tag/js/`  | `FrontmatterPagination` / `Layout` |
+| `/tag/`     | `Tag` (fallback to `FrontmatterKey` if not exist)  |
+| `/tag/vue/` | `FrontmatterPagination` (fallback to `Layout` if not exist)  |
+| `/tag/js/`  | `FrontmatterPagination` (fallback to `Layout` if not exist)  |
 
-In the `<Tag />` 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.$frontmatterKey.list](../client-api/README.md#frontmatterkey) to get the 
+tag 
+list. The value 
+would be like:
 
 ```json
 [
@@ -287,7 +290,8 @@ In the `<Tag />` component, you can use `this.$tag.list` to get the tag list. Th
 ]
 ```
 
-In the `FrontmatterPagination` component, you can use `this.$pagination.pages` to get the matched pages in current tag
+In the `FrontmatterPagination` component, you can use 
+[this.$pagination.pages](../client-api/README.md#pagination) to get the matched pages in current tag
 classification:
 
 - If you visit `/tag/vue/`, the `this.$pagination.pages` will be:
@@ -319,7 +323,7 @@ create a blog theme:
 
 - Layout
 - Post
-- Tag (Only required when you set up a `tag` frontmatter classification.)
+- FrontmatterKey (Only required when you set up a frontmatter classification.)
 
 Here are two official examples (A simple & a complex) for you:
 

src/client/classification.ts

@@ -76,6 +76,15 @@ export default ({ Vue }) => {
       return map
     }, {})
 
+  computed.$frontmatterKey = function() {
+    // @ts-ignore
+    const target = this[`$${this.$route.meta.id}`]
+    if (target) {
+      return target
+    }
+    return null
+  }
+
   Vue.mixin({
     computed,
   })

src/node/handleOptions.ts

@@ -130,10 +130,14 @@ export function handleOptions(
       permalink: indexPath,
       frontmatter: {
         // Set layout for index page.
-        layout: ctx.getLayout(indexLayout),
+        layout: ctx.getLayout(indexLayout, 'FrontmatterKey'),
         title: `${UpperFirstChar(id)}`,
         ...frontmatter,
       },
+      meta: {
+        pid: id,
+        id,
+      },
     })
 
     const map = {} as FrontmatterTempMap