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

Commit 6704ede

Browse files
ulivzulivz
committed
chore: update example
1 parent 7f07a8b commit 6704ede

16 files changed

+1469
-57
lines changed

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

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

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

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

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
date: 2018-11-7
33
tag:
44
- frontmatter
5-
- vuepress
5+
- vuepress
6+
author: ULIVZ
7+
location: Hangzhou
68
---
79

810
# Front Matter in VuePress

‎example/_posts/2018-4-4-intro-to-vuepress.md‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎example/_posts/2019-2-26-markdown-slot-2.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
date: 2019-2-26
3+
tag:
4+
- markdown
5+
- vuepress
6+
author: ULIVZ
7+
location: Hangzhou
8+
---
9+
10+
# Markdown Slot
11+
12+
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.
13+
14+
## Why do I need Markdown Slot?
15+
16+
First, let's review the relationship between layout components and markdown files:
17+
18+
<diagram-markdown-slot-relationship/>
19+
20+
Markdown files are providers of metadata (Page content, Configuration, etc.), while layout components consume them. We can use `frontmatter` to define some metadata for common data types, but `frontmatter` is hard to do something about markdown / HTML, a complex metadata that involves differences before and after compilation.
21+
22+
Markdown Slot is to solve this kind of problem.
23+
24+
## Named Slots
25+
26+
You can define a named markdown slot through the following markdown syntax:
27+
28+
``` md
29+
::: slot name
30+
31+
:::
32+
```
33+
34+
Use the `Content` component to use the slot in the layout component:
35+
36+
``` vue
37+
<Content slot-key="name"/>
38+
```
39+
40+
::: tip
41+
Here we are using `slot-key` instead of `slot`, because in Vue, `slot` is a reserved prop name.
42+
:::
43+
44+
## Default Slot Content
45+
46+
By default, the slot-free part of a markdown file becomes the default content of a markdown slot, which you can access directly using the `Content` component:
47+
48+
``` vue
49+
<Content/>
50+
```
51+
52+
## Example
53+
54+
Suppose your layout component is as follows:
55+
56+
``` vue
57+
<template>
58+
<div class="container">
59+
<header>
60+
<Content slot-key="header"/>
61+
</header>
62+
<main>
63+
<Content/>
64+
</main>
65+
<footer>
66+
<Content slot-key="footer"/>
67+
</footer>
68+
</div>
69+
</template>
70+
```
71+
72+
If the markdown content of a page is like this:
73+
74+
```md
75+
::: slot header
76+
# Here might be a page title
77+
:::
78+
79+
- A Paragraph
80+
- Another Paragraph
81+
82+
::: slot footer
83+
Here's some contact info
84+
:::
85+
```
86+
87+
Then the rendered HTML of this page will be:
88+
89+
```html
90+
<div class="container">
91+
<header>
92+
<div class="content header">
93+
<h1>Here might be a page title</h1>
94+
</div>
95+
</header>
96+
<main>
97+
<div class="content default">
98+
<ul>
99+
<li>A Paragraph</li>
100+
<li>Another Paragraph</li>
101+
</ul>
102+
</div>
103+
</main>
104+
<footer>
105+
<div class="content footer">
106+
<p>Here's some contact info</p>
107+
</div>
108+
</footer>
109+
</div>
110+
```
111+
112+
Note that:
113+
1. Unlike the slot mechanism provided by [Vue](https://vuejs.org/v2/guide/components-slots.html) itself, each content distribution is wrapped in a `div` whose class is `content` with the name of the slot.
114+
2. Please ensure the uniqueness of the slot defined.

0 commit comments

Comments
 (0)