Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit 7f07a8b

Browse files
ulivzulivz
committed
feat: summary & summary option
1 parent dc8f71b commit 7f07a8b

File tree

12 files changed

+277
-41
lines changed

12 files changed

+277
-41
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
.temp

‎components/Header.vue‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<header id="header">
33
<div class="header-wrapper">
4-
<h1 class="title">
5-
<router-link
6-
:to="$site.base"
4+
<div class="title">
5+
<NavLink
6+
:link="$site.base"
77
class="home-link"
8-
>{{ $site.title }}</router-link>
9-
</h1>
8+
>{{ $site.title }}</NavLink>
9+
</div>
1010
<div class="header-right-wrap">
1111
<ul class="nav" v-if="$themeConfig.nav">
1212
<li class="nav-item" v-for="item in $themeConfig.nav">
@@ -61,7 +61,7 @@
6161
height 40px
6262
6363
.title
64-
flex 0 0 200px
64+
/*flex 0 0 200px*/
6565
// color #3eaf7c
6666
// color lighten(#3eaf7c, 10%)
6767
color #000
@@ -92,14 +92,10 @@
9292
9393
a
9494
font-size 20px
95-
color #000
9695
// color lighten(#3eaf7c, 30%)
9796
text-decoration none
9897
transition color .3s
9998
100-
&:hover
101-
color $accentColor
102-
10399
.search-box
104100
margin-left 20px
105101

‎docs/README.md‎

Lines changed: 68 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
sidebar: auto
33
---
44

5-
# @vuepress/plugin-blog
5+
# @vuepress/theme-blog
66

77
> Default blog theme for VuePress
88
@@ -29,8 +29,8 @@ module.exports = {
2929

3030
### nav
3131

32-
- 类型: `Array<{ text: string, link: string }>`
33-
- 默认值: `undefined`
32+
- Type: `Array<{ text: string, link: string }>`
33+
- Default: `undefined`
3434

3535
e.g.
3636

@@ -60,8 +60,8 @@ module.exports = {
6060
#### footer.contact
6161

6262

63-
- 类型: `Array<{ type: ContactType, link: string }>`
64-
- 默认值: `undefined`
63+
- Type: `Array<{ type: ContactType, link: string }>`
64+
- Default: `undefined`
6565

6666
Contact information, displayed on the left side of footer.
6767

@@ -119,7 +119,7 @@ module.exports = {
119119

120120
### modifyBlogPluginOptions
121121

122-
A function used to modify the default blog plugin options. It's common to used it to add custom classifiers. e.g.
122+
A function used to modify the default blog plugin options of [@vuepress/plugin-blog](https://vuepress-plugin-blog.ulivz.com/). It's common to used it to add apply custom [document classifiers](https://vuepress-plugin-blog.ulivz.com/#document-classifier). e.g.
123123

124124
```js
125125
module.exports = {
@@ -188,3 +188,65 @@ Here is the default blog plugin options:
188188
}
189189
```
190190

191+
**Also see:**
192+
193+
- [Document Classifier](https://vuepress-plugin-blog.ulivz.com/#document-classifier)
194+
195+
196+
### summary
197+
198+
- Type: `boolean`
199+
- Default: `true`
200+
201+
Whether to extract summary from source markdowns.
202+
203+
204+
### summaryLength
205+
206+
- Type: `number`
207+
- Default: `200`
208+
209+
Set the length of summary.
210+
211+
212+
## Front Matter
213+
214+
### tag/tags
215+
216+
- Type: `string|string[]`
217+
- Default: `200`
218+
219+
e.g.
220+
221+
```markdown
222+
---
223+
tags:
224+
- JavaScript
225+
- DOM
226+
---
227+
```
228+
229+
### date
230+
231+
```markdown
232+
---
233+
date: 2016-10-20 20:44:40
234+
---
235+
```
236+
237+
### author
238+
239+
```markdown
240+
---
241+
author: ULIVZ
242+
---
243+
```
244+
245+
### location
246+
247+
```markdown
248+
---
249+
location: Hangzhou
250+
---
251+
```
252+

‎example/.vuepress/config.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
const { name, description } = require('../../package')
2-
31
module.exports = {
4-
name,
5-
description,
2+
title: 'VuePress Blog Example',
3+
description: 'This is a blog example built by VuePress',
64
theme: require.resolve('../../'),
75
themeConfig: {
86
/**

‎example/.vuepress/styles/palette.styl‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Custom palette here.
3+
*
4+
* ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
5+
*/
6+
7+
$accentColor = lighten(#4a154b, 20%)
8+
$textColor = #2c3e50
9+
$borderColor = rgba(0,0,0,.05)
10+
$codeBgColor = #000
11+
$arrowBgColor = #ccc

‎example/_posts/2018-11-7-frontmatter-in-vuepress.md‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
date: 2018-11-7
3+
tag:
4+
- frontmatter
5+
- vuepress
6+
---
7+
8+
# Front Matter in VuePress
9+
10+
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:
11+
12+
```markdown
13+
---
14+
title: Blogging Like a Hacker
15+
lang: en-US
16+
---
17+
```
18+
19+
Between these triple-dashed lines, you can set predefined variables (see [below](#predefined-variables) for a reference), or even create custom ones of your own. These variables will then be available to you to access using <code>[$frontmatter](./global-computed.md#frontmatter)</code> at the rest of the page, plus all custom and theming components.
20+
21+
::: tip
22+
Front matter variables are **optional** in VuePress.
23+
:::
24+
25+
## Alternative Front Matter Formats
26+
27+
In addition, VuePress also supports JSON or [TOML](https://github.com/toml-lang/toml) front matter.
28+
29+
JSON front matter needs to start and end in curly braces:
30+
31+
```
32+
---
33+
{
34+
"title": "Blogging Like a Hacker",
35+
"lang": "en-US"
36+
}
37+
---
38+
```
39+
40+
TOML front matter needs to be explicitly marked as TOML:
41+
42+
```
43+
---toml
44+
title = "Blogging Like a Hacker"
45+
lang = "en-US"
46+
---
47+
```
48+
49+
50+
## Predefined Variables
51+
52+
### title
53+
54+
- Type: `string`
55+
- Default: `h1_title || siteConfig.title`
56+
57+
Title of current page.
58+
59+
### lang
60+
61+
- Type: `string`
62+
- Default: `en-US`
63+
64+
Language of current page.
65+
66+
### description
67+
68+
- Type: `string`
69+
- Default: `siteConfig.description`
70+
71+
Description of current page.
72+
73+
### layout
74+
75+
- Type: `string`
76+
- Default: `Layout`
77+
78+
Set the layout component of the current page.
79+
80+
### permalink
81+
82+
- Type: `string`
83+
- Default: `siteConfig.permalink`
84+
85+
Refer to: [Permalinks](./permalinks.md).
86+
87+
### metaTitle
88+
89+
- Type: `string`
90+
- Default: <code>\`${page.title} | ${siteConfig.title}\`</code>
91+
92+
Override the default meta title.
93+
94+
### meta
95+
96+
- Type: `array`
97+
- Default: `undefined`
98+
99+
Specify extra meta tags to be injected:
100+
101+
``` yaml
102+
---
103+
meta:
104+
- name: description
105+
content: hello
106+
- name: keywords
107+
content: super duper SEO
108+
---
109+
```
110+
111+
## Predefined Variables Powered By Default Theme
112+
113+
### navbar
114+
115+
- Type: `boolean`
116+
- Default: `undefined`
117+
118+
See: [Default Theme Config > Disable the Navbar](../theme/default-theme-config.md#disable-the-navbar).
119+
120+
### sidebar
121+
122+
- Type: `boolean|'auto'`
123+
- Default: `undefined`
124+
125+
See: [Default Theme Config > Sidebar](../theme/default-theme-config.md#sidebar).

‎global-components/BaseListLayout.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<NavLink :link="page.path">{{ page.title }}</NavLink>
66
</div>
77
<div class="ui-post-summary">
8-
<Content :page-key="page.key" slot-key="intro"/>
8+
{{ page.frontmatter.summary || page.summary }}
9+
<!-- <Content :page-key="page.key" slot-key="intro"/>-->
910
</div>
1011
<div class="ui-post-author" v-if="page.frontmatter.author">
1112
<NavigationIcon/>

‎global-components/NavLink.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,12 @@ export default {
4848
}
4949
}
5050
</script>
51+
52+
<style lang="stylus">
53+
.nav-link
54+
color #000
55+
56+
.nav-link
57+
&:hover, &.router-link-active
58+
color $accentColor
59+
</style>

‎index.js‎

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1+
const removeMd = require('remove-markdown')
2+
13
module.exports = (themeConfig, ctx) => {
4+
themeConfig = Object.assign(
5+
{},
6+
themeConfig,
7+
{
8+
summary: true,
9+
summaryLength: 200
10+
}
11+
)
12+
213
const defaultBlogPluginOptions = {
314
directories: [
415
{
@@ -45,21 +56,44 @@ module.exports = (themeConfig, ctx) => {
4556
? modifyBlogPluginOptions(defaultBlogPluginOptions)
4657
: themeConfig
4758

48-
return {
49-
plugins: [
50-
'@vuepress/plugin-nprogress',
51-
['@vuepress/medium-zoom', true],
52-
['@vuepress/search', {
53-
searchMaxSuggestions: 10
54-
}],
55-
['@vuepress/pwa', {
56-
serviceWorker: true,
57-
updatePopup: true
58-
}],
59-
[
60-
'@vuepress/blog',
61-
blogPluginOptions,
62-
],
59+
const plugins = [
60+
'@vuepress/plugin-nprogress',
61+
['@vuepress/medium-zoom', true],
62+
['@vuepress/search', {
63+
searchMaxSuggestions: 10
64+
}],
65+
['@vuepress/pwa', {
66+
serviceWorker: true,
67+
updatePopup: true
68+
}],
69+
[
70+
'@vuepress/blog',
71+
blogPluginOptions,
6372
],
73+
]
74+
75+
const config = {
76+
plugins,
6477
}
78+
79+
/**
80+
* Generate summary.
81+
*/
82+
if (themeConfig.summary) {
83+
config.extendPageData = function (pageCtx) {
84+
console.log('extendPageData', pageCtx.path)
85+
const strippedContent = pageCtx._strippedContent
86+
if (!strippedContent) {
87+
return
88+
}
89+
pageCtx.summary = removeMd(
90+
strippedContent
91+
.trim()
92+
.replace(/^#+\s+(.*)/, '')
93+
.slice(0, themeConfig.summaryLength)
94+
) + ' ...'
95+
}
96+
}
97+
98+
return config
6599
}

0 commit comments

Comments
 (0)