diff --git a/docs/config/README.md b/docs/config/README.md
index eca8181..ce63b3c 100644
--- a/docs/config/README.md
+++ b/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
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 9e68f3f..1faf8af 100644
--- a/docs/guide/getting-started.md
+++ b/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 `` component, you can use [this.$frontmatterKey.list](../client-api/README.md#frontmatterkey) to get the
-tag
-list. The value
+In the `` 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.
-
diff --git a/src/node/handleOptions.ts b/src/node/handleOptions.ts
index 3b007fa..92cf379 100644
--- a/src/node/handleOptions.ts
+++ b/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),
})
}
diff --git a/src/node/index.ts b/src/node/index.ts
index a2ed07d..40b392a 100644
--- a/src/node/index.ts
+++ b/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}`,
},
}
diff --git a/src/node/interface/Frontmatter.ts b/src/node/interface/Frontmatter.ts
index d160ffa..b7c3ad4 100644
--- a/src/node/interface/Frontmatter.ts
+++ b/src/node/interface/Frontmatter.ts
@@ -5,6 +5,7 @@ export interface FrontmatterClassificationPage {
id: string;
pagination: PaginationConfig;
keys: string[];
+ scopeLayout?: string;
map: Record;
_handler: FrontmatterHandler;
}
diff --git a/src/node/interface/Options.ts b/src/node/interface/Options.ts
index a054df7..0d846de 100644
--- a/src/node/interface/Options.ts
+++ b/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.
*/