From 0abd52823bdc478bfe39e47c9d158fc095fcfe85 Mon Sep 17 00:00:00 2001 From: Billyyyyy3320 Date: Sun, 24 May 2020 14:02:37 +0800 Subject: [PATCH] feat: support using content excerpt as summary --- docs/README.md | 8 ++++++++ example/_posts/2018-11-7-frontmatter-in-vuepress.md | 2 ++ example/_posts/2019-2-26-markdown-slot.md | 2 ++ .../_posts/2019-5-6-writing-a-vuepress-theme-2.md | 4 ---- .../_posts/2019-5-6-writing-a-vuepress-theme-3.md | 4 ---- .../_posts/2019-5-6-writing-a-vuepress-theme-4.md | 4 ---- example/_posts/2019-5-6-writing-a-vuepress-theme.md | 6 ++---- global-components/BaseListLayout.vue | 12 +++++++++--- 8 files changed, 23 insertions(+), 19 deletions(-) diff --git a/docs/README.md b/docs/README.md index 131bc02..d7f39e2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -137,6 +137,14 @@ location: Taipei --- ``` +### Summary + +By default, summary will be extracted from source markdowns. If you need to override it, we present the following two approaches: + +1. [Writing the summary manually in frontmatter](./front-matter.md#summary) + +2. [Setting up excerpt separator by writing a comment `` right below what you want to extract as summary](https://vuepress.vuejs.org/theme/writing-a-theme.html#content-excerpt) + ## Quick Start To make it easier to get started, you can use [create-vuepress](https://github.com/vuepressjs/create-vuepress) which is indeed an npm package, but it doesn’t mean you need to install it manually first. Here's an example: diff --git a/example/_posts/2018-11-7-frontmatter-in-vuepress.md b/example/_posts/2018-11-7-frontmatter-in-vuepress.md index 9712384..1fa4ebf 100644 --- a/example/_posts/2018-11-7-frontmatter-in-vuepress.md +++ b/example/_posts/2018-11-7-frontmatter-in-vuepress.md @@ -10,6 +10,8 @@ location: Hangzhou Any markdown file that contains a YAML front matter block will be processed by [gray-matter](https://github.com/jonschlinkert/gray-matter). The front matter must be the first thing in the markdown file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example: + + ```markdown --- title: Blogging Like a Hacker diff --git a/example/_posts/2019-2-26-markdown-slot.md b/example/_posts/2019-2-26-markdown-slot.md index ff96d1f..dca7cc0 100644 --- a/example/_posts/2019-2-26-markdown-slot.md +++ b/example/_posts/2019-2-26-markdown-slot.md @@ -10,6 +10,8 @@ location: Hangzhou VuePress implements a content distribution API for Markdown. With this feature, you can split your document into multiple fragments to facilitate flexible composition in the layout component. + + ## Why do I need Markdown Slot? First, let's review the relationship between layout components and markdown files: diff --git a/example/_posts/2019-5-6-writing-a-vuepress-theme-2.md b/example/_posts/2019-5-6-writing-a-vuepress-theme-2.md index faa23c3..fec897e 100644 --- a/example/_posts/2019-5-6-writing-a-vuepress-theme-2.md +++ b/example/_posts/2019-5-6-writing-a-vuepress-theme-2.md @@ -168,10 +168,6 @@ Finally, don't forget that `this.$route` and `this.$router` are also available a `lastUpdated` is the UNIX timestamp of this file's last git commit, for more details, refer to [Last Updated](../theme/default-theme-config.md#last-updated). ::: -## Content Excerpt - -If a markdown file contains a `` comment, any content above the comment will be extracted and exposed as `$page.excerpt`. If you are building custom theme for blogging, this data can be used to render a post list with excerpts. - ## App Level Enhancements Themes can enhance the Vue app that VuePress uses by exposing an `enhanceApp.js` file at the root of the theme. The file should `export default` a hook function which will receive an object containing some app-level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks: diff --git a/example/_posts/2019-5-6-writing-a-vuepress-theme-3.md b/example/_posts/2019-5-6-writing-a-vuepress-theme-3.md index 4e8910c..1b0c005 100644 --- a/example/_posts/2019-5-6-writing-a-vuepress-theme-3.md +++ b/example/_posts/2019-5-6-writing-a-vuepress-theme-3.md @@ -168,10 +168,6 @@ Finally, don't forget that `this.$route` and `this.$router` are also available a `lastUpdated` is the UNIX timestamp of this file's last git commit, for more details, refer to [Last Updated](../theme/default-theme-config.md#last-updated). ::: -## Content Excerpt - -If a markdown file contains a `` comment, any content above the comment will be extracted and exposed as `$page.excerpt`. If you are building custom theme for blogging, this data can be used to render a post list with excerpts. - ## App Level Enhancements Themes can enhance the Vue app that VuePress uses by exposing an `enhanceApp.js` file at the root of the theme. The file should `export default` a hook function which will receive an object containing some app-level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks: diff --git a/example/_posts/2019-5-6-writing-a-vuepress-theme-4.md b/example/_posts/2019-5-6-writing-a-vuepress-theme-4.md index 8ef1143..1905ab0 100644 --- a/example/_posts/2019-5-6-writing-a-vuepress-theme-4.md +++ b/example/_posts/2019-5-6-writing-a-vuepress-theme-4.md @@ -168,10 +168,6 @@ Finally, don't forget that `this.$route` and `this.$router` are also available a `lastUpdated` is the UNIX timestamp of this file's last git commit, for more details, refer to [Last Updated](../theme/default-theme-config.md#last-updated). ::: -## Content Excerpt - -If a markdown file contains a `` comment, any content above the comment will be extracted and exposed as `$page.excerpt`. If you are building custom theme for blogging, this data can be used to render a post list with excerpts. - ## App Level Enhancements Themes can enhance the Vue app that VuePress uses by exposing an `enhanceApp.js` file at the root of the theme. The file should `export default` a hook function which will receive an object containing some app-level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks: diff --git a/example/_posts/2019-5-6-writing-a-vuepress-theme.md b/example/_posts/2019-5-6-writing-a-vuepress-theme.md index a59febc..37f806f 100644 --- a/example/_posts/2019-5-6-writing-a-vuepress-theme.md +++ b/example/_posts/2019-5-6-writing-a-vuepress-theme.md @@ -20,6 +20,8 @@ To write a theme, create a `.vuepress/theme` directory in your docs root, and th From there it's the same as developing a normal Vue application. It is entirely up to you how to organize your theme. + + ## Content Outlet The compiled content of the current `.md` file being rendered will be available as a special `` global component. You will need to render it somewhere in your layout in order to display the content of the page. The simplest theme can be just a single `Layout.vue` component with the following content: @@ -168,10 +170,6 @@ Finally, don't forget that `this.$route` and `this.$router` are also available a `lastUpdated` is the UNIX timestamp of this file's last git commit, for more details, refer to [Last Updated](../theme/default-theme-config.md#last-updated). ::: -## Content Excerpt - -If a markdown file contains a `` comment, any content above the comment will be extracted and exposed as `$page.excerpt`. If you are building custom theme for blogging, this data can be used to render a post list with excerpts. - ## App Level Enhancements Themes can enhance the Vue app that VuePress uses by exposing an `enhanceApp.js` file at the root of the theme. The file should `export default` a hook function which will receive an object containing some app-level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks: diff --git a/global-components/BaseListLayout.vue b/global-components/BaseListLayout.vue index 3b8ee89..a8376b2 100644 --- a/global-components/BaseListLayout.vue +++ b/global-components/BaseListLayout.vue @@ -14,10 +14,16 @@
{{ page.title }}
- -

+ +

+ +

{{ page.frontmatter.summary || page.summary }} -