This repository has been archived by the owner on May 13, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 127
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
1,469 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
--- | ||
date: 2018-11-7 | ||
tag: | ||
- frontmatter | ||
- vuepress | ||
author: ULIVZ | ||
location: Hangzhou | ||
--- | ||
|
||
# Front Matter in VuePress | ||
|
||
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 | ||
lang: en-US | ||
--- | ||
``` | ||
|
||
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. | ||
|
||
::: tip | ||
Front matter variables are **optional** in VuePress. | ||
::: | ||
|
||
## Alternative Front Matter Formats | ||
|
||
In addition, VuePress also supports JSON or [TOML](https://github.com/toml-lang/toml) front matter. | ||
|
||
JSON front matter needs to start and end in curly braces: | ||
|
||
``` | ||
--- | ||
{ | ||
"title": "Blogging Like a Hacker", | ||
"lang": "en-US" | ||
} | ||
--- | ||
``` | ||
|
||
TOML front matter needs to be explicitly marked as TOML: | ||
|
||
``` | ||
---toml | ||
title = "Blogging Like a Hacker" | ||
lang = "en-US" | ||
--- | ||
``` | ||
|
||
|
||
## Predefined Variables | ||
|
||
### title | ||
|
||
- Type: `string` | ||
- Default: `h1_title || siteConfig.title` | ||
|
||
Title of current page. | ||
|
||
### lang | ||
|
||
- Type: `string` | ||
- Default: `en-US` | ||
|
||
Language of current page. | ||
|
||
### description | ||
|
||
- Type: `string` | ||
- Default: `siteConfig.description` | ||
|
||
Description of current page. | ||
|
||
### layout | ||
|
||
- Type: `string` | ||
- Default: `Layout` | ||
|
||
Set the layout component of the current page. | ||
|
||
### permalink | ||
|
||
- Type: `string` | ||
- Default: `siteConfig.permalink` | ||
|
||
Refer to: [Permalinks](./permalinks.md). | ||
|
||
### metaTitle | ||
|
||
- Type: `string` | ||
- Default: <code>\`${page.title} | ${siteConfig.title}\`</code> | ||
|
||
Override the default meta title. | ||
|
||
### meta | ||
|
||
- Type: `array` | ||
- Default: `undefined` | ||
|
||
Specify extra meta tags to be injected: | ||
|
||
``` yaml | ||
--- | ||
meta: | ||
- name: description | ||
content: hello | ||
- name: keywords | ||
content: super duper SEO | ||
--- | ||
``` | ||
|
||
## Predefined Variables Powered By Default Theme | ||
|
||
### navbar | ||
|
||
- Type: `boolean` | ||
- Default: `undefined` | ||
|
||
See: [Default Theme Config > Disable the Navbar](../theme/default-theme-config.md#disable-the-navbar). | ||
|
||
### sidebar | ||
|
||
- Type: `boolean|'auto'` | ||
- Default: `undefined` | ||
|
||
See: [Default Theme Config > Sidebar](../theme/default-theme-config.md#sidebar). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
--- | ||
date: 2018-11-7 | ||
tag: | ||
- frontmatter | ||
- vuepress | ||
author: ULIVZ | ||
location: Hangzhou | ||
--- | ||
|
||
# Front Matter in VuePress | ||
|
||
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 | ||
lang: en-US | ||
--- | ||
``` | ||
|
||
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. | ||
|
||
::: tip | ||
Front matter variables are **optional** in VuePress. | ||
::: | ||
|
||
## Alternative Front Matter Formats | ||
|
||
In addition, VuePress also supports JSON or [TOML](https://github.com/toml-lang/toml) front matter. | ||
|
||
JSON front matter needs to start and end in curly braces: | ||
|
||
``` | ||
--- | ||
{ | ||
"title": "Blogging Like a Hacker", | ||
"lang": "en-US" | ||
} | ||
--- | ||
``` | ||
|
||
TOML front matter needs to be explicitly marked as TOML: | ||
|
||
``` | ||
---toml | ||
title = "Blogging Like a Hacker" | ||
lang = "en-US" | ||
--- | ||
``` | ||
|
||
|
||
## Predefined Variables | ||
|
||
### title | ||
|
||
- Type: `string` | ||
- Default: `h1_title || siteConfig.title` | ||
|
||
Title of current page. | ||
|
||
### lang | ||
|
||
- Type: `string` | ||
- Default: `en-US` | ||
|
||
Language of current page. | ||
|
||
### description | ||
|
||
- Type: `string` | ||
- Default: `siteConfig.description` | ||
|
||
Description of current page. | ||
|
||
### layout | ||
|
||
- Type: `string` | ||
- Default: `Layout` | ||
|
||
Set the layout component of the current page. | ||
|
||
### permalink | ||
|
||
- Type: `string` | ||
- Default: `siteConfig.permalink` | ||
|
||
Refer to: [Permalinks](./permalinks.md). | ||
|
||
### metaTitle | ||
|
||
- Type: `string` | ||
- Default: <code>\`${page.title} | ${siteConfig.title}\`</code> | ||
|
||
Override the default meta title. | ||
|
||
### meta | ||
|
||
- Type: `array` | ||
- Default: `undefined` | ||
|
||
Specify extra meta tags to be injected: | ||
|
||
``` yaml | ||
--- | ||
meta: | ||
- name: description | ||
content: hello | ||
- name: keywords | ||
content: super duper SEO | ||
--- | ||
``` | ||
|
||
## Predefined Variables Powered By Default Theme | ||
|
||
### navbar | ||
|
||
- Type: `boolean` | ||
- Default: `undefined` | ||
|
||
See: [Default Theme Config > Disable the Navbar](../theme/default-theme-config.md#disable-the-navbar). | ||
|
||
### sidebar | ||
|
||
- Type: `boolean|'auto'` | ||
- Default: `undefined` | ||
|
||
See: [Default Theme Config > Sidebar](../theme/default-theme-config.md#sidebar). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
--- | ||
date: 2019-2-26 | ||
tag: | ||
- markdown | ||
- vuepress | ||
author: ULIVZ | ||
location: Hangzhou | ||
--- | ||
|
||
# Markdown Slot | ||
|
||
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: | ||
|
||
<diagram-markdown-slot-relationship/> | ||
|
||
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. | ||
|
||
Markdown Slot is to solve this kind of problem. | ||
|
||
## Named Slots | ||
|
||
You can define a named markdown slot through the following markdown syntax: | ||
|
||
``` md | ||
::: slot name | ||
|
||
::: | ||
``` | ||
|
||
Use the `Content` component to use the slot in the layout component: | ||
|
||
``` vue | ||
<Content slot-key="name"/> | ||
``` | ||
|
||
::: tip | ||
Here we are using `slot-key` instead of `slot`, because in Vue, `slot` is a reserved prop name. | ||
::: | ||
|
||
## Default Slot Content | ||
|
||
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: | ||
|
||
``` vue | ||
<Content/> | ||
``` | ||
|
||
## Example | ||
|
||
Suppose your layout component is as follows: | ||
|
||
``` vue | ||
<template> | ||
<div class="container"> | ||
<header> | ||
<Content slot-key="header"/> | ||
</header> | ||
<main> | ||
<Content/> | ||
</main> | ||
<footer> | ||
<Content slot-key="footer"/> | ||
</footer> | ||
</div> | ||
</template> | ||
``` | ||
|
||
If the markdown content of a page is like this: | ||
|
||
```md | ||
::: slot header | ||
# Here might be a page title | ||
::: | ||
|
||
- A Paragraph | ||
- Another Paragraph | ||
|
||
::: slot footer | ||
Here's some contact info | ||
::: | ||
``` | ||
|
||
Then the rendered HTML of this page will be: | ||
|
||
```html | ||
<div class="container"> | ||
<header> | ||
<div class="content header"> | ||
<h1>Here might be a page title</h1> | ||
</div> | ||
</header> | ||
<main> | ||
<div class="content default"> | ||
<ul> | ||
<li>A Paragraph</li> | ||
<li>Another Paragraph</li> | ||
</ul> | ||
</div> | ||
</main> | ||
<footer> | ||
<div class="content footer"> | ||
<p>Here's some contact info</p> | ||
</div> | ||
</footer> | ||
</div> | ||
``` | ||
|
||
Note that: | ||
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. | ||
2. Please ensure the uniqueness of the slot defined. |
Oops, something went wrong.