From d06ae6cd2faf4925735a30a49a7043b5ef14207f Mon Sep 17 00:00:00 2001 From: coolyang <504575307@qq.com> Date: Wed, 18 Sep 2019 23:24:42 +0800 Subject: [PATCH 1/4] feat($core): support configure frontmatter classifier scope layout --- src/node/handleOptions.ts | 2 ++ src/node/index.ts | 4 ++-- src/node/interface/Frontmatter.ts | 1 + src/node/interface/Options.ts | 6 ++++++ 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/node/handleOptions.ts b/src/node/handleOptions.ts index 3b007fa..11a3d00 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..ffb2a2e 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: scopeLayout || DefaultLayoutEnum.FrontmatterPagination, title: `${key} ${scope}`, }, } diff --git a/src/node/interface/Frontmatter.ts b/src/node/interface/Frontmatter.ts index d160ffa..3b6bc66 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. */ From 7b65454fd3d379ad9facf97052893f37a141a24e Mon Sep 17 00:00:00 2001 From: coolyang <504575307@qq.com> Date: Wed, 18 Sep 2019 23:35:09 +0800 Subject: [PATCH 2/4] docs: update documentation --- docs/config/README.md | 7 +++++++ docs/guide/getting-started.md | 27 ++++++++++++++------------- 2 files changed, 21 insertions(+), 13 deletions(-) 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..94de90c 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` or `Layout` if not exist) | +| `/tag/js/` | `Tag` (fallback to `FrontmatterPagination` or `Layout` 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. - From 2785c061cf85fe86ad533bb8880b7d2edbe240c3 Mon Sep 17 00:00:00 2001 From: coolyang <504575307@qq.com> Date: Mon, 23 Sep 2019 19:11:39 +0800 Subject: [PATCH 3/4] feat: change fallback layout --- src/node/handleOptions.ts | 2 +- src/node/index.ts | 2 +- src/node/interface/Frontmatter.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/node/handleOptions.ts b/src/node/handleOptions.ts index 11a3d00..92cf379 100644 --- a/src/node/handleOptions.ts +++ b/src/node/handleOptions.ts @@ -133,7 +133,7 @@ export function handleOptions( keys, path: indexPath, layout: indexLayout, - scopeLayout = '', + scopeLayout, frontmatter, pagination = { lengthPerPage: 10, diff --git a/src/node/index.ts b/src/node/index.ts index ffb2a2e..40b392a 100644 --- a/src/node/index.ts +++ b/src/node/index.ts @@ -129,7 +129,7 @@ module.exports = (options: BlogPluginOptions, ctx: VuePressContext) => { pid: scope, id: key, frontmatter: { - layout: scopeLayout || 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 3b6bc66..b7c3ad4 100644 --- a/src/node/interface/Frontmatter.ts +++ b/src/node/interface/Frontmatter.ts @@ -5,7 +5,7 @@ export interface FrontmatterClassificationPage { id: string; pagination: PaginationConfig; keys: string[]; - scopeLayout: string; + scopeLayout?: string; map: Record; _handler: FrontmatterHandler; } From deef96cf36293e885ac6c9f42c6677b9628d7aad Mon Sep 17 00:00:00 2001 From: coolyang <504575307@qq.com> Date: Mon, 23 Sep 2019 19:14:35 +0800 Subject: [PATCH 4/4] docs: update documentation --- docs/guide/getting-started.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 94de90c..1faf8af 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -264,8 +264,8 @@ the corresponding layout: | url | layout | | ----------- | ---------------------------------- | | `/tag/` | `Tags` (fallback to `FrontmatterKey` if not exist) | -| `/tag/vue/` | `Tag` (fallback to `FrontmatterPagination` or `Layout` if not exist) | -| `/tag/js/` | `Tag` (fallback to `FrontmatterPagination` or `Layout` 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