chore: update example

vuepress · Jun 5, 2019 · 6704ede · 6704ede
1 parent 7f07a8b
commit 6704ede
Show file tree

Hide file tree

Showing 16 changed files with 1,469 additions and 57 deletions.
diff --git a/example/_posts/2018-11-7-frontmatter-in-vuepress-2.md b/example/_posts/2018-11-7-frontmatter-in-vuepress-2.md
@@ -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).
diff --git a/example/_posts/2018-11-7-frontmatter-in-vuepress-3.md b/example/_posts/2018-11-7-frontmatter-in-vuepress-3.md
@@ -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).
diff --git a/example/_posts/2018-11-7-frontmatter-in-vuepress.md b/example/_posts/2018-11-7-frontmatter-in-vuepress.md
@@ -2,7 +2,9 @@
 date: 2018-11-7
 tag: 
   - frontmatter
-  - vuepress  
+  - vuepress
+author: ULIVZ
+location: Hangzhou  
 ---
 
 # Front Matter in VuePress

diff --git a/example/_posts/2018-4-4-intro-to-vuepress.md b/example/_posts/2018-4-4-intro-to-vuepress.md
diff --git a/example/_posts/2019-2-26-markdown-slot-2.md b/example/_posts/2019-2-26-markdown-slot-2.md
@@ -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.