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. */