feat: Support configuring frontmatter classifiers scope layout (#24)

* feat($core): support configure frontmatter classifier scope layout

* docs: update documentation

* feat:  change fallback layout

* docs: update documentation

Author: yyyanghj

docs/config/README.md

@@ -154,6 +154,13 @@ Entry page for current classifier, e.g. `/` or `/post/`.
 
 Layout component name for entry page.
 
+### scopeLayout
+
+- Type: `string`
+- Default: `undefined`
+- Required: `false`
+
+Layout component name for scope page.
 
 ### frontmatter
 

docs/guide/getting-started.md

@@ -1,7 +1,7 @@
 # Getting Started
 
 ::: tip
-This section is a step-by-step tutorial with some concepts, and we recommend that you read it completely before using 
+This section is a step-by-step tutorial with some concepts, and we recommend that you read it completely before using
 this plugin.
 :::
 
@@ -24,8 +24,8 @@ Suppose you have the following files structure:
 
 ```vue
 .
-└── _posts    
-    ├── 2018-4-4-intro-to-vuepress.md    
+└── _posts   
+    ├── 2018-4-4-intro-to-vuepress.md   
     └── 2019-6-8-intro-to-vuepress-next.md
 ```
 
@@ -247,7 +247,9 @@ module.exports = {
             // Path of the `entry page` (or `list page`)
             path: '/tag/',
             // Layout of the `entry page`
-            layout: 'Tag',
+            layout: 'Tags',
+            // Layout of the `scope page`
+            scopeLayout: 'Tag'
           },
         ],
       },
@@ -261,13 +263,13 @@ the corresponding layout:
 
 | url         | 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)  |
+| `/tag/`     | `Tags` (fallback to `FrontmatterKey` if not exist)  |
+| `/tag/vue/` | `Tag` (fallback to `FrontmatterPagination` if not exist)  |
+| `/tag/js/`  | `Tag` (fallback to `FrontmatterPagination` if not exist)  |
 
-In the `<Tag />` component, you can use [this.$frontmatterKey.list](../client-api/README.md#frontmatterkey) to get the 
-tag 
-list. The value 
+In the `<Tags />` component, you can use [this.$frontmatterKey.list](../client-api/README.md#frontmatterkey) to get the
+tag
+list. The value
 would be like:
 
 ```json
@@ -290,7 +292,7 @@ would be like:
 ]
 ```
 
-In the `FrontmatterPagination` component, you can use 
+In the `FrontmatterPagination` component, you can use
 [this.$pagination.pages](../client-api/README.md#pagination) to get the matched pages in current tag
 classification:
 
@@ -318,7 +320,7 @@ classification:
 
 ## Writing a blog theme
 
-If everything is ok, you can start to write a blog theme. Actually, there are only 2 necessary layout components to 
+If everything is ok, you can start to write a blog theme. Actually, there are only 2 necessary layout components to
 create a blog theme:
 
 - Layout
@@ -329,4 +331,3 @@ Here are two official examples (A simple & a complex) for you:
 
 - [70-lines-of-vuepress-blog-theme](https://github.com/ulivz/70-lines-of-vuepress-blog-theme): A VuePress Blog Theme implemented in around 70 lines.
 - [@vuepress/theme-blog](https://github.com/ulivz/vuepress-theme-blog): Default blog theme for VuePress.
-

src/node/handleOptions.ts

@@ -133,6 +133,7 @@ export function handleOptions(
       keys,
       path: indexPath,
       layout: indexLayout,
+      scopeLayout,
       frontmatter,
       pagination = {
         lengthPerPage: 10,
@@ -164,6 +165,7 @@ export function handleOptions(
       pagination,
       keys,
       map,
+      scopeLayout,
       _handler: curryFrontmatterHandler(id, map),
     })
   }

src/node/index.ts

@@ -95,7 +95,7 @@ module.exports = (options: BlogPluginOptions, ctx: VuePressContext) => {
         ...extraPages,
         ...frontmatterClassificationPages
           .map(frontmatterClassifiedPage => {
-            const { map, pagination, keys } = frontmatterClassifiedPage
+            const { map, pagination, keys, scopeLayout } = frontmatterClassifiedPage
             return Object.keys(map).map(key => {
               const { path, scope } = map[key]
 
@@ -129,7 +129,7 @@ module.exports = (options: BlogPluginOptions, ctx: VuePressContext) => {
                 pid: scope,
                 id: key,
                 frontmatter: {
-                  layout: DefaultLayoutEnum.FrontmatterPagination,
+                  layout: ctx.getLayout(scopeLayout, DefaultLayoutEnum.FrontmatterPagination),
                   title: `${key} ${scope}`,
                 },
               }

src/node/interface/Frontmatter.ts

@@ -5,6 +5,7 @@ export interface FrontmatterClassificationPage {
   id: string;
   pagination: PaginationConfig;
   keys: string[];
+  scopeLayout?: string;
   map: Record<string, any>;
   _handler: FrontmatterHandler;
 }

src/node/interface/Options.ts

@@ -61,6 +61,12 @@ export interface FrontmatterClassifier {
    * Layout for index page.
    */
   layout?: string;
+  /**
+   * Layout for scope page.
+   * e.g. {id: 'tag', keys: ['tag'], scopeLayout: 'Foo'}
+   * `/tag/vue` will use `Foo.vue` as the layout
+   */
+  scopeLayout?: string;
   /**
    * Frontmatter for index page.
    */