diff --git a/2018/11/07/frontmatter-in-vuepress-2/index.html b/2018/11/07/frontmatter-in-vuepress-2/index.html deleted file mode 100644 index 356438f..0000000 --- a/2018/11/07/frontmatter-in-vuepress-2/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - vue源码分析 | VuePress Blog Example - - - - - - - -

# vue源码分析

Any markdown file that contains a YAML front matter block will be processed by 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:

---
-title: Blogging Like a Hacker
-lang: en-US
----
-

Between these triple-dashed lines, you can set predefined variables (see below for a reference), or even create custom ones of your own. These variables will then be available to you to access using $frontmatter 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 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.

  • Type: string
  • Default: siteConfig.permalink

Refer to: Permalinks.

# metaTitle

  • Type: string
  • Default: `${page.title} | ${siteConfig.title}`

Override the default meta title.

# meta

  • Type: array
  • Default: undefined

Specify extra meta tags to be injected:

---
-meta:
-  - name: description
-    content: hello
-  - name: keywords
-    content: super duper SEO
----
-

# Predefined Variables Powered By Default Theme

  • Type: boolean
  • Default: undefined

See: Default Theme Config > Disable the Navbar.

  • Type: boolean|'auto'
  • Default: undefined

See: Default Theme Config > Sidebar.

Alternative Front Matter Formats
Predefined Variables
title
lang
description
layout
permalink
metaTitle
meta
Predefined Variables Powered By Default Theme
navbar
sidebar
- - - diff --git a/2018/11/07/frontmatter-in-vuepress-3/index.html b/2018/11/07/frontmatter-in-vuepress-3/index.html deleted file mode 100644 index 4d53e5e..0000000 --- a/2018/11/07/frontmatter-in-vuepress-3/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Front Matter in VuePress | VuePress Blog Example - - - - - - - -

# Front Matter in VuePress

Any markdown file that contains a YAML front matter block will be processed by 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:

---
-title: Blogging Like a Hacker
-lang: en-US
----
-

Between these triple-dashed lines, you can set predefined variables (see below for a reference), or even create custom ones of your own. These variables will then be available to you to access using $frontmatter 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 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.

  • Type: string
  • Default: siteConfig.permalink

Refer to: Permalinks.

# metaTitle

  • Type: string
  • Default: `${page.title} | ${siteConfig.title}`

Override the default meta title.

# meta

  • Type: array
  • Default: undefined

Specify extra meta tags to be injected:

---
-meta:
-  - name: description
-    content: hello
-  - name: keywords
-    content: super duper SEO
----
-

# Predefined Variables Powered By Default Theme

  • Type: boolean
  • Default: undefined

See: Default Theme Config > Disable the Navbar.

  • Type: boolean|'auto'
  • Default: undefined

See: Default Theme Config > Sidebar.

Alternative Front Matter Formats
Predefined Variables
title
lang
description
layout
permalink
metaTitle
meta
Predefined Variables Powered By Default Theme
navbar
sidebar
- - - diff --git a/2018/11/07/frontmatter-in-vuepress/index.html b/2018/11/07/frontmatter-in-vuepress/index.html deleted file mode 100644 index 4950b22..0000000 --- a/2018/11/07/frontmatter-in-vuepress/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Front Matter in VuePress | VuePress Blog Example - - - - - - - -

# Front Matter in VuePress

Any markdown file that contains a YAML front matter block will be processed by 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:

---
-title: Blogging Like a Hacker
-lang: en-US
----
-

Between these triple-dashed lines, you can set predefined variables (see below for a reference), or even create custom ones of your own. These variables will then be available to you to access using $frontmatter 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 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.

  • Type: string
  • Default: siteConfig.permalink

Refer to: Permalinks.

# metaTitle

  • Type: string
  • Default: `${page.title} | ${siteConfig.title}`

Override the default meta title.

# meta

  • Type: array
  • Default: undefined

Specify extra meta tags to be injected:

---
-meta:
-  - name: description
-    content: hello
-  - name: keywords
-    content: super duper SEO
----
-

# Predefined Variables Powered By Default Theme

  • Type: boolean
  • Default: undefined

See: Default Theme Config > Disable the Navbar.

  • Type: boolean|'auto'
  • Default: undefined

See: Default Theme Config > Sidebar.

Alternative Front Matter Formats
Predefined Variables
title
lang
description
layout
permalink
metaTitle
meta
Predefined Variables Powered By Default Theme
navbar
sidebar
- - - diff --git a/2019/02/26/markdown-slot-2/index.html b/2019/02/26/markdown-slot-2/index.html deleted file mode 100644 index b76c687..0000000 --- a/2019/02/26/markdown-slot-2/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - Markdown Slot | VuePress Blog Example - - - - - - - -

# 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:

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:

::: slot name
-
-:::
-

Use the Content component to use the slot in the layout component:

<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:

<Content/>
-

# Example

Suppose your layout component is as follows:

<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:

::: 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:

<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 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.
Why do I need Markdown Slot?
Named Slots
Default Slot Content
Example
- - - diff --git a/2019/02/26/markdown-slot-3/index.html b/2019/02/26/markdown-slot-3/index.html deleted file mode 100644 index 9f08b89..0000000 --- a/2019/02/26/markdown-slot-3/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - Markdown Slot | VuePress Blog Example - - - - - - - -

# 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:

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:

::: slot name
-
-:::
-

Use the Content component to use the slot in the layout component:

<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:

<Content/>
-

# Example

Suppose your layout component is as follows:

<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:

::: 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:

<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 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.
Why do I need Markdown Slot?
Named Slots
Default Slot Content
Example
- - - diff --git a/2019/02/26/markdown-slot-4/index.html b/2019/02/26/markdown-slot-4/index.html deleted file mode 100644 index d3c132d..0000000 --- a/2019/02/26/markdown-slot-4/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - Markdown Slot | VuePress Blog Example - - - - - - - -

# 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:

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:

::: slot name
-
-:::
-

Use the Content component to use the slot in the layout component:

<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:

<Content/>
-

# Example

Suppose your layout component is as follows:

<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:

::: 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:

<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 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.
Why do I need Markdown Slot?
Named Slots
Default Slot Content
Example
- - - diff --git a/2019/02/26/markdown-slot/index.html b/2019/02/26/markdown-slot/index.html deleted file mode 100644 index 77e16a1..0000000 --- a/2019/02/26/markdown-slot/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - Markdown Slot | VuePress Blog Example - - - - - - - -

# 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:

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:

::: slot name
-
-:::
-

Use the Content component to use the slot in the layout component:

<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:

<Content/>
-

# Example

Suppose your layout component is as follows:

<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:

::: 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:

<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 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.
Why do I need Markdown Slot?
Named Slots
Default Slot Content
Example
- - - diff --git a/2019/05/06/writing-a-vuepress-theme-2/index.html b/2019/05/06/writing-a-vuepress-theme-2/index.html deleted file mode 100644 index 4923e75..0000000 --- a/2019/05/06/writing-a-vuepress-theme-2/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - Writing a VuePress theme | VuePress Blog Example - - - - - - - -

# Writing a VuePress theme

To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file:

.
-└─ .vuepress
-   └─ `theme`
-       └─ Layout.vue
-

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 <Content/> 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:

<template>
-  <div class="theme-container">
-    <Content/>
-  </div>
-</template>
-

Also see:

# Directory Structure

Just one Layout.vue might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the palette, and even apply some plugins.

So it's time to reorganize your theme, an agreed theme directory structure is as follows:

::: vue -theme -├── global-components -│ └── xxx.vue -├── components -│ └── xxx.vue -├── layouts -│   ├── Layout.vue (Mandatory) -│   └── 404.vue -├── styles -│   ├── index.styl -│   └── palette.styl -├── templates -│   ├── dev.html -│   └── ssr.html -├── index.js -├── enhanceApp.js -└── package.json -:::

  • theme/global-components: Components under this directory will be automatically registered as global components. For details, please refer to @vuepress/plugin-register-components.
  • theme/components: Your components.
  • theme/layouts: Layout components of the theme, where Layout.vue is required.
  • theme/styles: Global style and palette.
  • theme/templates: Modify default template.
  • theme/index.js: Entry file of theme configuration.
  • theme/enhanceApp.js: Theme level enhancements.

::: warning Note -When you publish your theme as an NPM package, if you don't have any theme configuration, that means you don't have theme/index.js, you'll need to set the "main" field to layouts/Layout.vue in package.json, only in this way VuePress can correctly resolve the theme.

{
-  ...
-  "main": "layouts/Layout.vue",
-  ...
-}
-

:::

# Layout Component

Suppose your theme layouts folder is as follows:

::: vue -theme -└── layouts -   ├── Layout.vue -   ├── AnotherLayout.vue -   └── 404.vue -:::

Then, all the pages will use Layout.vue as layout component by default, while the routes not matching will use 404.vue.

If you want to switch the layout of some pages to AnotherLayout.vue, you just need to update the frontmatter of this page:

---
-layout: AnotherLayout
----
-

::: tip -Each layout component may render distinct pages. If you want to apply some global UI (e.g. global header), consider using globalLayout。 -:::

# Apply plugins

You can apply some plugins to the theme via theme/index.js.

module.exports = {
-  plugins: [
-    ['@vuepress/pwa', { 
-      serviceWorker: true,
-      updatePopup: true
-    }]
-  ]
-}
-

# Site and Page Metadata

The Layout component will be invoked once for every .md file in docs, and the metadata for the entire site and that specific page will be exposed respectively as this.$site and this.$page properties which are injected into every component in the app.

This is the value of $site of this very website:

{
-  "title": "VuePress",
-  "description": "Vue-powered Static Site Generator",
-  "base": "/",
-  "pages": [
-    {
-      "lastUpdated": 1524027677000,
-      "path": "/",
-      "title": "VuePress",
-      "frontmatter": {}
-    },
-    ...
-  ]
-}
-

title, description and base are copied from respective fields in .vuepress/config.js. pages contains an array of metadata objects for each page, including its path, page title (explicitly specified in YAML front matter or inferred from the first header on the page), and any YAML front matter data in that file.

This is the $page object for this page you are looking at:

{
-  "lastUpdated": 1524847549000,
-  "path": "/guide/custom-themes.html",
-  "title": "Custom Themes",
-  "headers": [/* ... */],
-  "frontmatter": {}
-}
-

If the user provided themeConfig in .vuepress/config.js, it will also be available as $site.themeConfig. You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with $site.pages to dynamically construct navigation links.

Finally, don't forget that this.$route and this.$router are also available as part of Vue Router's API.

::: tip -lastUpdated is the UNIX timestamp of this file's last git commit, for more details, refer to Last Updated. -:::

# Content Excerpt

If a markdown file contains a <!-- more --> 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:

export default ({
-  Vue, // the version of Vue being used in the VuePress app
-  options, // the options for the root Vue instance
-  router, // the router instance for the app
-  siteData // site metadata
-}) => {
-  // ...apply enhancements to the app
-}
-
Content Outlet
Directory Structure
Layout Component
Apply plugins
Site and Page Metadata
Content Excerpt
App Level Enhancements
- - - diff --git a/2019/05/06/writing-a-vuepress-theme-3/index.html b/2019/05/06/writing-a-vuepress-theme-3/index.html deleted file mode 100644 index 5586818..0000000 --- a/2019/05/06/writing-a-vuepress-theme-3/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - Writing a VuePress theme | VuePress Blog Example - - - - - - - -

# Writing a VuePress theme

To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file:

.
-└─ .vuepress
-   └─ `theme`
-       └─ Layout.vue
-

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 <Content/> 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:

<template>
-  <div class="theme-container">
-    <Content/>
-  </div>
-</template>
-

Also see:

# Directory Structure

Just one Layout.vue might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the palette, and even apply some plugins.

So it's time to reorganize your theme, an agreed theme directory structure is as follows:

::: vue -theme -├── global-components -│ └── xxx.vue -├── components -│ └── xxx.vue -├── layouts -│   ├── Layout.vue (Mandatory) -│   └── 404.vue -├── styles -│   ├── index.styl -│   └── palette.styl -├── templates -│   ├── dev.html -│   └── ssr.html -├── index.js -├── enhanceApp.js -└── package.json -:::

  • theme/global-components: Components under this directory will be automatically registered as global components. For details, please refer to @vuepress/plugin-register-components.
  • theme/components: Your components.
  • theme/layouts: Layout components of the theme, where Layout.vue is required.
  • theme/styles: Global style and palette.
  • theme/templates: Modify default template.
  • theme/index.js: Entry file of theme configuration.
  • theme/enhanceApp.js: Theme level enhancements.

::: warning Note -When you publish your theme as an NPM package, if you don't have any theme configuration, that means you don't have theme/index.js, you'll need to set the "main" field to layouts/Layout.vue in package.json, only in this way VuePress can correctly resolve the theme.

{
-  ...
-  "main": "layouts/Layout.vue",
-  ...
-}
-

:::

# Layout Component

Suppose your theme layouts folder is as follows:

::: vue -theme -└── layouts -   ├── Layout.vue -   ├── AnotherLayout.vue -   └── 404.vue -:::

Then, all the pages will use Layout.vue as layout component by default, while the routes not matching will use 404.vue.

If you want to switch the layout of some pages to AnotherLayout.vue, you just need to update the frontmatter of this page:

---
-layout: AnotherLayout
----
-

::: tip -Each layout component may render distinct pages. If you want to apply some global UI (e.g. global header), consider using globalLayout。 -:::

# Apply plugins

You can apply some plugins to the theme via theme/index.js.

module.exports = {
-  plugins: [
-    ['@vuepress/pwa', { 
-      serviceWorker: true,
-      updatePopup: true
-    }]
-  ]
-}
-

# Site and Page Metadata

The Layout component will be invoked once for every .md file in docs, and the metadata for the entire site and that specific page will be exposed respectively as this.$site and this.$page properties which are injected into every component in the app.

This is the value of $site of this very website:

{
-  "title": "VuePress",
-  "description": "Vue-powered Static Site Generator",
-  "base": "/",
-  "pages": [
-    {
-      "lastUpdated": 1524027677000,
-      "path": "/",
-      "title": "VuePress",
-      "frontmatter": {}
-    },
-    ...
-  ]
-}
-

title, description and base are copied from respective fields in .vuepress/config.js. pages contains an array of metadata objects for each page, including its path, page title (explicitly specified in YAML front matter or inferred from the first header on the page), and any YAML front matter data in that file.

This is the $page object for this page you are looking at:

{
-  "lastUpdated": 1524847549000,
-  "path": "/guide/custom-themes.html",
-  "title": "Custom Themes",
-  "headers": [/* ... */],
-  "frontmatter": {}
-}
-

If the user provided themeConfig in .vuepress/config.js, it will also be available as $site.themeConfig. You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with $site.pages to dynamically construct navigation links.

Finally, don't forget that this.$route and this.$router are also available as part of Vue Router's API.

::: tip -lastUpdated is the UNIX timestamp of this file's last git commit, for more details, refer to Last Updated. -:::

# Content Excerpt

If a markdown file contains a <!-- more --> 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:

export default ({
-  Vue, // the version of Vue being used in the VuePress app
-  options, // the options for the root Vue instance
-  router, // the router instance for the app
-  siteData // site metadata
-}) => {
-  // ...apply enhancements to the app
-}
-
Content Outlet
Directory Structure
Layout Component
Apply plugins
Site and Page Metadata
Content Excerpt
App Level Enhancements
- - - diff --git a/2019/05/06/writing-a-vuepress-theme-4/index.html b/2019/05/06/writing-a-vuepress-theme-4/index.html deleted file mode 100644 index d320318..0000000 --- a/2019/05/06/writing-a-vuepress-theme-4/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - Writing a VuePress theme | VuePress Blog Example - - - - - - - -

# Writing a VuePress theme

To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file:

.
-└─ .vuepress
-   └─ `theme`
-       └─ Layout.vue
-

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 <Content/> 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:

<template>
-  <div class="theme-container">
-    <Content/>
-  </div>
-</template>
-

Also see:

# Directory Structure

Just one Layout.vue might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the palette, and even apply some plugins.

So it's time to reorganize your theme, an agreed theme directory structure is as follows:

::: vue -theme -├── global-components -│ └── xxx.vue -├── components -│ └── xxx.vue -├── layouts -│   ├── Layout.vue (Mandatory) -│   └── 404.vue -├── styles -│   ├── index.styl -│   └── palette.styl -├── templates -│   ├── dev.html -│   └── ssr.html -├── index.js -├── enhanceApp.js -└── package.json -:::

  • theme/global-components: Components under this directory will be automatically registered as global components. For details, please refer to @vuepress/plugin-register-components.
  • theme/components: Your components.
  • theme/layouts: Layout components of the theme, where Layout.vue is required.
  • theme/styles: Global style and palette.
  • theme/templates: Modify default template.
  • theme/index.js: Entry file of theme configuration.
  • theme/enhanceApp.js: Theme level enhancements.

::: warning Note -When you publish your theme as an NPM package, if you don't have any theme configuration, that means you don't have theme/index.js, you'll need to set the "main" field to layouts/Layout.vue in package.json, only in this way VuePress can correctly resolve the theme.

{
-  ...
-  "main": "layouts/Layout.vue",
-  ...
-}
-

:::

# Layout Component

Suppose your theme layouts folder is as follows:

::: vue -theme -└── layouts -   ├── Layout.vue -   ├── AnotherLayout.vue -   └── 404.vue -:::

Then, all the pages will use Layout.vue as layout component by default, while the routes not matching will use 404.vue.

If you want to switch the layout of some pages to AnotherLayout.vue, you just need to update the frontmatter of this page:

---
-layout: AnotherLayout
----
-

::: tip -Each layout component may render distinct pages. If you want to apply some global UI (e.g. global header), consider using globalLayout。 -:::

# Apply plugins

You can apply some plugins to the theme via theme/index.js.

module.exports = {
-  plugins: [
-    ['@vuepress/pwa', { 
-      serviceWorker: true,
-      updatePopup: true
-    }]
-  ]
-}
-

# Site and Page Metadata

The Layout component will be invoked once for every .md file in docs, and the metadata for the entire site and that specific page will be exposed respectively as this.$site and this.$page properties which are injected into every component in the app.

This is the value of $site of this very website:

{
-  "title": "VuePress",
-  "description": "Vue-powered Static Site Generator",
-  "base": "/",
-  "pages": [
-    {
-      "lastUpdated": 1524027677000,
-      "path": "/",
-      "title": "VuePress",
-      "frontmatter": {}
-    },
-    ...
-  ]
-}
-

title, description and base are copied from respective fields in .vuepress/config.js. pages contains an array of metadata objects for each page, including its path, page title (explicitly specified in YAML front matter or inferred from the first header on the page), and any YAML front matter data in that file.

This is the $page object for this page you are looking at:

{
-  "lastUpdated": 1524847549000,
-  "path": "/guide/custom-themes.html",
-  "title": "Custom Themes",
-  "headers": [/* ... */],
-  "frontmatter": {}
-}
-

If the user provided themeConfig in .vuepress/config.js, it will also be available as $site.themeConfig. You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with $site.pages to dynamically construct navigation links.

Finally, don't forget that this.$route and this.$router are also available as part of Vue Router's API.

::: tip -lastUpdated is the UNIX timestamp of this file's last git commit, for more details, refer to Last Updated. -:::

# Content Excerpt

If a markdown file contains a <!-- more --> 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:

export default ({
-  Vue, // the version of Vue being used in the VuePress app
-  options, // the options for the root Vue instance
-  router, // the router instance for the app
-  siteData // site metadata
-}) => {
-  // ...apply enhancements to the app
-}
-
Content Outlet
Directory Structure
Layout Component
Apply plugins
Site and Page Metadata
Content Excerpt
App Level Enhancements
- - - diff --git a/2019/05/06/writing-a-vuepress-theme/index.html b/2019/05/06/writing-a-vuepress-theme/index.html deleted file mode 100644 index 716efa0..0000000 --- a/2019/05/06/writing-a-vuepress-theme/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - Writing a VuePress theme | VuePress Blog Example - - - - - - - -

# Writing a VuePress theme

To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file:

.
-└─ .vuepress
-   └─ `theme`
-       └─ Layout.vue
-

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 <Content/> 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:

<template>
-  <div class="theme-container">
-    <Content/>
-  </div>
-</template>
-

Also see:

# Directory Structure

Just one Layout.vue might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the palette, and even apply some plugins.

So it's time to reorganize your theme, an agreed theme directory structure is as follows:

::: vue -theme -├── global-components -│ └── xxx.vue -├── components -│ └── xxx.vue -├── layouts -│   ├── Layout.vue (Mandatory) -│   └── 404.vue -├── styles -│   ├── index.styl -│   └── palette.styl -├── templates -│   ├── dev.html -│   └── ssr.html -├── index.js -├── enhanceApp.js -└── package.json -:::

  • theme/global-components: Components under this directory will be automatically registered as global components. For details, please refer to @vuepress/plugin-register-components.
  • theme/components: Your components.
  • theme/layouts: Layout components of the theme, where Layout.vue is required.
  • theme/styles: Global style and palette.
  • theme/templates: Modify default template.
  • theme/index.js: Entry file of theme configuration.
  • theme/enhanceApp.js: Theme level enhancements.

::: warning Note -When you publish your theme as an NPM package, if you don't have any theme configuration, that means you don't have theme/index.js, you'll need to set the "main" field to layouts/Layout.vue in package.json, only in this way VuePress can correctly resolve the theme.

{
-  ...
-  "main": "layouts/Layout.vue",
-  ...
-}
-

:::

# Layout Component

Suppose your theme layouts folder is as follows:

::: vue -theme -└── layouts -   ├── Layout.vue -   ├── AnotherLayout.vue -   └── 404.vue -:::

Then, all the pages will use Layout.vue as layout component by default, while the routes not matching will use 404.vue.

If you want to switch the layout of some pages to AnotherLayout.vue, you just need to update the frontmatter of this page:

---
-layout: AnotherLayout
----
-

::: tip -Each layout component may render distinct pages. If you want to apply some global UI (e.g. global header), consider using globalLayout。 -:::

# Apply plugins

You can apply some plugins to the theme via theme/index.js.

module.exports = {
-  plugins: [
-    ['@vuepress/pwa', { 
-      serviceWorker: true,
-      updatePopup: true
-    }]
-  ]
-}
-

# Site and Page Metadata

The Layout component will be invoked once for every .md file in docs, and the metadata for the entire site and that specific page will be exposed respectively as this.$site and this.$page properties which are injected into every component in the app.

This is the value of $site of this very website:

{
-  "title": "VuePress",
-  "description": "Vue-powered Static Site Generator",
-  "base": "/",
-  "pages": [
-    {
-      "lastUpdated": 1524027677000,
-      "path": "/",
-      "title": "VuePress",
-      "frontmatter": {}
-    },
-    ...
-  ]
-}
-

title, description and base are copied from respective fields in .vuepress/config.js. pages contains an array of metadata objects for each page, including its path, page title (explicitly specified in YAML front matter or inferred from the first header on the page), and any YAML front matter data in that file.

This is the $page object for this page you are looking at:

{
-  "lastUpdated": 1524847549000,
-  "path": "/guide/custom-themes.html",
-  "title": "Custom Themes",
-  "headers": [/* ... */],
-  "frontmatter": {}
-}
-

If the user provided themeConfig in .vuepress/config.js, it will also be available as $site.themeConfig. You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with $site.pages to dynamically construct navigation links.

Finally, don't forget that this.$route and this.$router are also available as part of Vue Router's API.

::: tip -lastUpdated is the UNIX timestamp of this file's last git commit, for more details, refer to Last Updated. -:::

# Content Excerpt

If a markdown file contains a <!-- more --> 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:

export default ({
-  Vue, // the version of Vue being used in the VuePress app
-  options, // the options for the root Vue instance
-  router, // the router instance for the app
-  siteData // site metadata
-}) => {
-  // ...apply enhancements to the app
-}
-
Content Outlet
Directory Structure
Layout Component
Apply plugins
Site and Page Metadata
Content Excerpt
App Level Enhancements
- - - diff --git a/2019/11/17/writing-a-vuepress/index.html b/2019/11/17/writing-a-vuepress/index.html new file mode 100644 index 0000000..bbc5e8a --- /dev/null +++ b/2019/11/17/writing-a-vuepress/index.html @@ -0,0 +1,30 @@ + + + + + + 初尝vuePress | VuePress Blog Example + + + + + + + +

# 初尝vuePress

# vuePress

# 是什么？

官网给出的说法是

img

Vue-powered Static Site Generator(以vue为核心的静态网站生成器

# 如何开始

# 1. 先全局安装vuepress

yarn global add vuepress

或者用npm

npm -g install vuepress

# 2. 创建项目

yarn create vuepress

或者用npm

npm create vuepress

填入一些关于项目的资料后可以选择需要的模板.

# 3. 运行项目

只需要在项目文件中运行

yarn dev

或者npm

npm run dev

然后打开http://localhost:8080/就会看到项目界面了

# 如何修改主题

// .vuepress/config.js
+module.exports = {
+    theme:'vuepress-theme-xx',
+    themeConfig:{
+        ...
+    }
+}
+

# 如何创建自定义主题

eea0795983495a301ef0707366a3a531.png

# 项目目录结构

4f375005f8f0246e24879835d45c0e1f.png

# 插件

官方提供了一些常用的插件,具体使用方法可以查看官网

948b481e0a6499fb7ef3f5380182847b.png

# 自定义插件

# 页面配置文件

首先先找到页面配置文件a2d45330231268164c0a32020a2f14cb.png

1a2ecfef691eedaa3ae9448bda325b9a.png

更多的配置信息应该用到的时候去官网查看

# 搭建博客

可以翻到上面去看如何构建一个vuePress项目,不同之处就是选择的模板不是docs而是blog.

# 博客目录

86551a38dae281292979629ee6ade154.png

posts 里面是项目创建给我们默认生产的一些文章,整个项目看起来和docs的也是差不多的.

# 文章代码

4887f15ffaacfc41ba1a81af01a07db5.png

是什么？
如何开始
1. 先全局安装vuepress
2. 创建项目
3. 运行项目
如何修改主题
如何创建自定义主题
项目目录结构
插件
自定义插件
页面配置文件
搭建博客
博客目录
文章代码
+ + + diff --git a/404.html b/404.html index 0165c32..73ac237 100644 --- a/404.html +++ b/404.html @@ -7,7 +7,7 @@ - + @@ -18,6 +18,6 @@
    • - + diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 1b33508..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2019 THcoder - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index b8953dd..0000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# myBlog -awesome diff --git a/assets/img/134D753C-342C-4EFB-9BFB-F587BBE07CA3_4_5005_c.cbbc6fd4.jpeg b/assets/img/134D753C-342C-4EFB-9BFB-F587BBE07CA3_4_5005_c.cbbc6fd4.jpeg new file mode 100644 index 0000000..6ba5d46 Binary files /dev/null and b/assets/img/134D753C-342C-4EFB-9BFB-F587BBE07CA3_4_5005_c.cbbc6fd4.jpeg differ diff --git a/assets/img/1C52D61A-36AE-4943-924F-B99A0B3676DA_1_105_c.d77aca79.jpeg b/assets/img/1C52D61A-36AE-4943-924F-B99A0B3676DA_1_105_c.d77aca79.jpeg new file mode 100644 index 0000000..170d78a Binary files /dev/null and b/assets/img/1C52D61A-36AE-4943-924F-B99A0B3676DA_1_105_c.d77aca79.jpeg differ diff --git a/assets/img/1CDBB4AC-8D1E-45D5-9FF1-2B6A36C5F598.f13e4c29.jpeg b/assets/img/1CDBB4AC-8D1E-45D5-9FF1-2B6A36C5F598.f13e4c29.jpeg new file mode 100644 index 0000000..c493889 Binary files /dev/null and b/assets/img/1CDBB4AC-8D1E-45D5-9FF1-2B6A36C5F598.f13e4c29.jpeg differ diff --git a/assets/img/2019-11-178.18.85fb4574.jpeg b/assets/img/2019-11-178.18.85fb4574.jpeg new file mode 100644 index 0000000..ea7b25a Binary files /dev/null and b/assets/img/2019-11-178.18.85fb4574.jpeg differ diff --git a/assets/img/696D96F7-AAF0-4EEB-AF0C-34A8CD7D5460.037f4591.jpeg b/assets/img/696D96F7-AAF0-4EEB-AF0C-34A8CD7D5460.037f4591.jpeg new file mode 100644 index 0000000..c23177f Binary files /dev/null and b/assets/img/696D96F7-AAF0-4EEB-AF0C-34A8CD7D5460.037f4591.jpeg differ diff --git a/assets/img/DABCA7EA-3A33-4F1B-AF73-B61653E7A967.4425d011.jpeg b/assets/img/DABCA7EA-3A33-4F1B-AF73-B61653E7A967.4425d011.jpeg new file mode 100644 index 0000000..4ff8bd8 Binary files /dev/null and b/assets/img/DABCA7EA-3A33-4F1B-AF73-B61653E7A967.4425d011.jpeg differ diff --git a/assets/img/DC8E1C82-3CE4-48EF-BC7A-8C00A4A27A7C_4_5005_c.56343c8c.jpeg b/assets/img/DC8E1C82-3CE4-48EF-BC7A-8C00A4A27A7C_4_5005_c.56343c8c.jpeg new file mode 100644 index 0000000..692b832 Binary files /dev/null and b/assets/img/DC8E1C82-3CE4-48EF-BC7A-8C00A4A27A7C_4_5005_c.56343c8c.jpeg differ diff --git a/assets/img/F5B652CD-A442-475E-A47E-CF55907B2D42.93fbc0df.jpeg b/assets/img/F5B652CD-A442-475E-A47E-CF55907B2D42.93fbc0df.jpeg new file mode 100644 index 0000000..6ec64a5 Binary files /dev/null and b/assets/img/F5B652CD-A442-475E-A47E-CF55907B2D42.93fbc0df.jpeg differ diff --git a/assets/js/1.c001ecf8.js b/assets/js/1.4a88c1d8.js similarity index 99% rename from assets/js/1.c001ecf8.js rename to assets/js/1.4a88c1d8.js index 845364d..aa54826 100644 --- a/assets/js/1.c001ecf8.js +++ b/assets/js/1.4a88c1d8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1],Array(88).concat([function(t,n,r){var e=r(134),o="object"==typeof self&&self&&self.Object===Object&&self,i=e||o||Function("return this")();t.exports=i},function(t,n){var r=Array.isArray;t.exports=r},function(t,n,r){var e=r(181),o=r(186);t.exports=function(t,n){var r=o(t,n);return e(r)?r:void 0}},function(t,n,r){var e=r(29)("keys"),o=r(28);t.exports=function(t){return e[t]||(e[t]=o(t))}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n,r){var e=r(98),o=r(92);t.exports=Object.keys||function(t){return e(t,o)}},function(t,n,r){var e=r(101),o=r(182),i=r(183),u="[object Null]",c="[object Undefined]",a=e?e.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?c:u:a&&a in Object(t)?o(t):i(t)}},function(t,n){t.exports=function(t){var n=typeof t;return null!=t&&("object"==n||"function"==n)}},function(t,n){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,n,r){var e=r(121),o=1/0;t.exports=function(t){if("string"==typeof t||e(t))return t;var n=t+"";return"0"==n&&1/t==-o?"-0":n}},function(t,n,r){var e=r(38),o=r(40),i=r(30)(!1),u=r(91)("IE_PROTO");t.exports=function(t,n){var r,c=o(t),a=0,s=[];for(r in c)r!=u&&e(c,r)&&s.push(r);for(;n.length>a;)e(c,r=n[a++])&&(~i(s,r)||s.push(r));return s}},function(t,n,r){var e=r(171),o=r(172),i=r(173),u=r(174),c=r(175);function a(t){var n=-1,r=null==t?0:t.length;for(this.clear();++ndocument.F=Object<\/script>"),t.close(),a=t.F;e--;)delete a.prototype[i[e]];return a()};t.exports=Object.create||function(t,n){var r;return null!==t?(c.prototype=e(t),r=new c,c.prototype=null,r[u]=t):r=a(),void 0===n?r:o(r,n)}},function(t,n,r){var e=r(39),o=r(21),i=r(93);t.exports=r(22)?Object.defineProperties:function(t,n){o(t);for(var r,u=i(n),c=u.length,a=0;c>a;)e.f(t,r=u[a++],n[r]);return t}},function(t,n,r){var e=r(10).document;t.exports=e&&e.documentElement},function(t,n){t.exports=function(t,n){return t===n||t!=t&&n!=n}},function(t,n,r){var e=r(90)(r(88),"Map");t.exports=e},function(t,n,r){var e=r(187),o=r(194),i=r(196),u=r(197),c=r(198);function a(t){var n=-1,r=null==t?0:t.length;for(this.clear();++n-1&&t%1==0&&t-1&&t%1==0&&t<=r}},function(t,n,r){var e=r(104),o=r(97);t.exports=function(t,n){for(var r=0,i=(n=e(n,t)).length;null!=t&&rl))return!1;var h=f.get(t);if(h&&f.get(n))return h==n;var b=-1,y=!0,_=r&c?new e:void 0;for(f.set(t,n),f.set(n,t);++b2){var r,e,o,i=(n=_?n.trim():l(n,3)).charCodeAt(0);if(43===i||45===i){if(88===(r=n.charCodeAt(2))||120===r)return NaN}else if(48===i){switch(n.charCodeAt(1)){case 66:case 98:e=2,o=49;break;case 79:case 111:e=8,o=55;break;default:return+n}for(var u,a=n.slice(2),s=0,f=a.length;so)return NaN;return parseInt(a,e)}}return+n};if(!v(" 0o1")||!v("0b1")||v("+0x1")){v=function(t){var n=arguments.length<1?0:t,r=this;return r instanceof v&&(y?a((function(){b.valueOf.call(r)})):"Number"!=i(r))?u(new h(d(n)),r,v):d(n)};for(var x,g=r(22)?s(h):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),j=0;g.length>j;j++)o(h,x=g[j])&&!o(v,x)&&p(v,x,f(h,x));v.prototype=b,b.constructor=v,r(27)(e,"Number",v)}},function(t,n,r){var e=r(11),o=r(164).set;t.exports=function(t,n,r){var i,u=n.constructor;return u!==r&&"function"==typeof u&&(i=u.prototype)!==r.prototype&&e(i)&&o&&o(t,i),t}},function(t,n,r){var e=r(11),o=r(21),i=function(t,n){if(o(t),!e(n)&&null!==n)throw TypeError(n+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,n,e){try{(e=r(32)(Function.call,r(129).f(Object.prototype,"__proto__").set,2))(t,[]),n=!(t instanceof Array)}catch(t){n=!0}return function(t,r){return i(t,r),n?t.__proto__=r:e(t,r),t}}({},!1):void 0),check:i}},function(t,n){n.f={}.propertyIsEnumerable},function(t,n,r){var e=r(98),o=r(92).concat("length","prototype");n.f=Object.getOwnPropertyNames||function(t){return e(t,o)}},function(t,n,r){var e=r(131),o=r(168),i=r(239),u=r(244);t.exports=function(t,n){if(null==t)return{};var r=e(u(t),(function(t){return[t]}));return n=o(n),i(t,r,(function(t,r){return n(t,r[0])}))}},function(t,n,r){var e=r(169),o=r(226),i=r(130),u=r(89),c=r(236);t.exports=function(t){return"function"==typeof t?t:null==t?i:"object"==typeof t?u(t)?o(t[0],t[1]):e(t):c(t)}},function(t,n,r){var e=r(170),o=r(225),i=r(152);t.exports=function(t){var n=o(t);return 1==n.length&&n[0][2]?i(n[0][0],n[0][1]):function(r){return r===t||e(r,t,n)}}},function(t,n,r){var e=r(132),o=r(136),i=1,u=2;t.exports=function(t,n,r,c){var a=r.length,s=a,f=!c;if(null==t)return!s;for(t=Object(t);a--;){var p=r[a];if(f&&p[2]?p[1]!==t[p[0]]:!(p[0]in t))return!1}for(;++a-1}},function(t,n,r){var e=r(100);t.exports=function(t,n){var r=this.__data__,o=e(r,t);return o<0?(++this.size,r.push([t,n])):r[o][1]=n,this}},function(t,n,r){var e=r(99);t.exports=function(){this.__data__=new e,this.size=0}},function(t,n){t.exports=function(t){var n=this.__data__,r=n.delete(t);return this.size=n.size,r}},function(t,n){t.exports=function(t){return this.__data__.get(t)}},function(t,n){t.exports=function(t){return this.__data__.has(t)}},function(t,n,r){var e=r(99),o=r(115),i=r(116),u=200;t.exports=function(t,n){var r=this.__data__;if(r instanceof e){var c=r.__data__;if(!o||c.lengtha;)e(c,r=n[a++])&&(~i(s,r)||s.push(r));return s}},function(t,n,r){var e=r(171),o=r(172),i=r(173),u=r(174),c=r(175);function a(t){var n=-1,r=null==t?0:t.length;for(this.clear();++ndocument.F=Object<\/script>"),t.close(),a=t.F;e--;)delete a.prototype[i[e]];return a()};t.exports=Object.create||function(t,n){var r;return null!==t?(c.prototype=e(t),r=new c,c.prototype=null,r[u]=t):r=a(),void 0===n?r:o(r,n)}},function(t,n,r){var e=r(39),o=r(21),i=r(93);t.exports=r(22)?Object.defineProperties:function(t,n){o(t);for(var r,u=i(n),c=u.length,a=0;c>a;)e.f(t,r=u[a++],n[r]);return t}},function(t,n,r){var e=r(10).document;t.exports=e&&e.documentElement},function(t,n){t.exports=function(t,n){return t===n||t!=t&&n!=n}},function(t,n,r){var e=r(90)(r(88),"Map");t.exports=e},function(t,n,r){var e=r(187),o=r(194),i=r(196),u=r(197),c=r(198);function a(t){var n=-1,r=null==t?0:t.length;for(this.clear();++n-1&&t%1==0&&t-1&&t%1==0&&t<=r}},function(t,n,r){var e=r(104),o=r(97);t.exports=function(t,n){for(var r=0,i=(n=e(n,t)).length;null!=t&&rl))return!1;var h=f.get(t);if(h&&f.get(n))return h==n;var b=-1,y=!0,_=r&c?new e:void 0;for(f.set(t,n),f.set(n,t);++b2){var r,e,o,i=(n=_?n.trim():l(n,3)).charCodeAt(0);if(43===i||45===i){if(88===(r=n.charCodeAt(2))||120===r)return NaN}else if(48===i){switch(n.charCodeAt(1)){case 66:case 98:e=2,o=49;break;case 79:case 111:e=8,o=55;break;default:return+n}for(var u,a=n.slice(2),s=0,f=a.length;so)return NaN;return parseInt(a,e)}}return+n};if(!v(" 0o1")||!v("0b1")||v("+0x1")){v=function(t){var n=arguments.length<1?0:t,r=this;return r instanceof v&&(y?a((function(){b.valueOf.call(r)})):"Number"!=i(r))?u(new h(d(n)),r,v):d(n)};for(var x,g=r(22)?s(h):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),j=0;g.length>j;j++)o(h,x=g[j])&&!o(v,x)&&p(v,x,f(h,x));v.prototype=b,b.constructor=v,r(27)(e,"Number",v)}},function(t,n,r){var e=r(11),o=r(164).set;t.exports=function(t,n,r){var i,u=n.constructor;return u!==r&&"function"==typeof u&&(i=u.prototype)!==r.prototype&&e(i)&&o&&o(t,i),t}},function(t,n,r){var e=r(11),o=r(21),i=function(t,n){if(o(t),!e(n)&&null!==n)throw TypeError(n+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,n,e){try{(e=r(32)(Function.call,r(129).f(Object.prototype,"__proto__").set,2))(t,[]),n=!(t instanceof Array)}catch(t){n=!0}return function(t,r){return i(t,r),n?t.__proto__=r:e(t,r),t}}({},!1):void 0),check:i}},function(t,n){n.f={}.propertyIsEnumerable},function(t,n,r){var e=r(98),o=r(92).concat("length","prototype");n.f=Object.getOwnPropertyNames||function(t){return e(t,o)}},function(t,n,r){var e=r(131),o=r(168),i=r(239),u=r(244);t.exports=function(t,n){if(null==t)return{};var r=e(u(t),(function(t){return[t]}));return n=o(n),i(t,r,(function(t,r){return n(t,r[0])}))}},function(t,n,r){var e=r(169),o=r(226),i=r(130),u=r(89),c=r(236);t.exports=function(t){return"function"==typeof t?t:null==t?i:"object"==typeof t?u(t)?o(t[0],t[1]):e(t):c(t)}},function(t,n,r){var e=r(170),o=r(225),i=r(152);t.exports=function(t){var n=o(t);return 1==n.length&&n[0][2]?i(n[0][0],n[0][1]):function(r){return r===t||e(r,t,n)}}},function(t,n,r){var e=r(132),o=r(136),i=1,u=2;t.exports=function(t,n,r,c){var a=r.length,s=a,f=!c;if(null==t)return!s;for(t=Object(t);a--;){var p=r[a];if(f&&p[2]?p[1]!==t[p[0]]:!(p[0]in t))return!1}for(;++a-1}},function(t,n,r){var e=r(100);t.exports=function(t,n){var r=this.__data__,o=e(r,t);return o<0?(++this.size,r.push([t,n])):r[o][1]=n,this}},function(t,n,r){var e=r(99);t.exports=function(){this.__data__=new e,this.size=0}},function(t,n){t.exports=function(t){var n=this.__data__,r=n.delete(t);return this.size=n.size,r}},function(t,n){t.exports=function(t){return this.__data__.get(t)}},function(t,n){t.exports=function(t){return this.__data__.has(t)}},function(t,n,r){var e=r(99),o=r(115),i=r(116),u=200;t.exports=function(t,n){var r=this.__data__;if(r instanceof e){var c=r.__data__;if(!o||c.length"}}},i=n(4),a=Object(i.a)(e,(function(){var t=this.$createElement;return(this._self._c||t)("p",{staticClass:"demo"},[this._v("\n "+this._s(this.msg)+"\n")])}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{278:function(t,s,n){"use strict";n.r(s);var e={data:function(){return{msg:"Hello this is "}}},i=n(3),a=Object(i.a)(e,(function(){var t=this.$createElement;return(this._self._c||t)("p",{staticClass:"demo"},[this._v("\n "+this._s(this.msg)+"\n")])}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/11.c7becec3.js b/assets/js/12.d21a18a5.js similarity index 57% rename from assets/js/11.c7becec3.js rename to assets/js/12.d21a18a5.js index ef4f93b..6370809 100644 --- a/assets/js/11.c7becec3.js +++ b/assets/js/12.d21a18a5.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{287:function(t,n,e){"use strict";e.r(n);var s=e(4),i=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("p",{staticClass:"demo"},[this._v("This is another component")])}),[],!1,null,null,null);n.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{284:function(t,n,e){"use strict";e.r(n);var s=e(3),i=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("p",{staticClass:"demo"},[this._v("This is another component")])}),[],!1,null,null,null);n.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/12.f152f56a.js b/assets/js/13.e912dd75.js similarity index 65% rename from assets/js/12.f152f56a.js rename to assets/js/13.e912dd75.js index 58a1beb..ac3e4c3 100644 --- a/assets/js/12.f152f56a.js +++ b/assets/js/13.e912dd75.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{271:function(t,n,s){"use strict";s.r(n);var e={data:function(){return{msg:"Hello this is "}}},i=s(4),o=Object(i.a)(e,(function(){var t=this.$createElement;return(this._self._c||t)("p",{staticClass:"demo"},[this._v("\n "+this._s(this.msg)+"\n")])}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{275:function(t,n,s){"use strict";s.r(n);var e={data:function(){return{msg:"Hello this is "}}},i=s(3),o=Object(i.a)(e,(function(){var t=this.$createElement;return(this._self._c||t)("p",{staticClass:"demo"},[this._v("\n "+this._s(this.msg)+"\n")])}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/13.7b5b0f91.js b/assets/js/14.09782f61.js similarity index 81% rename from assets/js/13.7b5b0f91.js rename to assets/js/14.09782f61.js index 0dd7df4..017b7e5 100644 --- a/assets/js/13.7b5b0f91.js +++ b/assets/js/14.09782f61.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{273:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(4),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{281:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(3),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]); \ No newline at end of file diff --git a/assets/js/14.96cd8e31.js b/assets/js/15.17fdec8f.js similarity index 63% rename from assets/js/14.96cd8e31.js rename to assets/js/15.17fdec8f.js index 9322df0..c286025 100644 --- a/assets/js/14.96cd8e31.js +++ b/assets/js/15.17fdec8f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{281:function(t,e,s){"use strict";s.r(e);var a=s(4),n=Object(a.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"vuperess-theme-blog__tags-layout"}},[e("BlogTags",{attrs:{tags:this.$frontmatterKey.list}})],1)}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{282:function(t,e,s){"use strict";s.r(e);var a=s(3),n=Object(a.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"vuperess-theme-blog__tags-layout"}},[e("BlogTags",{attrs:{tags:this.$frontmatterKey.list}})],1)}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/15.76217a64.js b/assets/js/15.76217a64.js deleted file mode 100644 index bc644b3..0000000 --- a/assets/js/15.76217a64.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{282:function(e,t,a){"use strict";a.r(t);var r=a(4),s=Object(r.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"vue源码分析"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vue源码分析"}},[e._v("#")]),e._v(" vue源码分析")]),e._v(" "),a("p",[e._v("Any markdown file that contains a YAML front matter block will be processed by "),a("a",{attrs:{href:"https://github.com/jonschlinkert/gray-matter",target:"_blank",rel:"noopener noreferrer"}},[e._v("gray-matter"),a("OutboundLink")],1),e._v(". 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:")]),e._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{pre:!0,attrs:{class:"token hr punctuation"}},[e._v("---")]),e._v("\ntitle: Blogging Like a Hacker\n"),a("span",{pre:!0,attrs:{class:"token title important"}},[e._v("lang: en-US\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")])]),e._v("\n")])])]),a("p",[e._v("Between these triple-dashed lines, you can set predefined variables (see "),a("a",{attrs:{href:"#predefined-variables"}},[e._v("below")]),e._v(" for a reference), or even create custom ones of your own. These variables will then be available to you to access using "),a("code",[a("router-link",{attrs:{to:"/_posts/global-computed.html#frontmatter"}},[e._v("$frontmatter")])],1),e._v(" at the rest of the page, plus all custom and theming components.")]),e._v(" "),a("p",[e._v("::: tip\nFront matter variables are "),a("strong",[e._v("optional")]),e._v(" in VuePress.\n:::")]),e._v(" "),a("h2",{attrs:{id:"alternative-front-matter-formats"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alternative-front-matter-formats"}},[e._v("#")]),e._v(" Alternative Front Matter Formats")]),e._v(" "),a("p",[e._v("In addition, VuePress also supports JSON or "),a("a",{attrs:{href:"https://github.com/toml-lang/toml",target:"_blank",rel:"noopener noreferrer"}},[e._v("TOML"),a("OutboundLink")],1),e._v(" front matter.")]),e._v(" "),a("p",[e._v("JSON front matter needs to start and end in curly braces:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v('---\n{\n "title": "Blogging Like a Hacker",\n "lang": "en-US"\n}\n---\n')])])]),a("p",[e._v("TOML front matter needs to be explicitly marked as TOML:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v('---toml\ntitle = "Blogging Like a Hacker"\nlang = "en-US"\n---\n')])])]),a("h2",{attrs:{id:"predefined-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#predefined-variables"}},[e._v("#")]),e._v(" Predefined Variables")]),e._v(" "),a("h3",{attrs:{id:"title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#title"}},[e._v("#")]),e._v(" title")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("h1_title || siteConfig.title")])])]),e._v(" "),a("p",[e._v("Title of current page.")]),e._v(" "),a("h3",{attrs:{id:"lang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lang"}},[e._v("#")]),e._v(" lang")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("en-US")])])]),e._v(" "),a("p",[e._v("Language of current page.")]),e._v(" "),a("h3",{attrs:{id:"description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#description"}},[e._v("#")]),e._v(" description")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("siteConfig.description")])])]),e._v(" "),a("p",[e._v("Description of current page.")]),e._v(" "),a("h3",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout"}},[e._v("#")]),e._v(" layout")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("Layout")])])]),e._v(" "),a("p",[e._v("Set the layout component of the current page.")]),e._v(" "),a("h3",{attrs:{id:"permalink"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#permalink"}},[e._v("#")]),e._v(" permalink")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("siteConfig.permalink")])])]),e._v(" "),a("p",[e._v("Refer to: "),a("router-link",{attrs:{to:"/_posts/permalinks.html"}},[e._v("Permalinks")]),e._v(".")],1),e._v(" "),a("h3",{attrs:{id:"metatitle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metatitle"}},[e._v("#")]),e._v(" metaTitle")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("`${page.title} | ${siteConfig.title}`")])])]),e._v(" "),a("p",[e._v("Override the default meta title.")]),e._v(" "),a("h3",{attrs:{id:"meta"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#meta"}},[e._v("#")]),e._v(" meta")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("array")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("Specify extra meta tags to be injected:")]),e._v(" "),a("div",{staticClass:"language-yaml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-yaml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("meta")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("-")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" description\n "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" hello\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("-")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" keywords\n "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" super duper SEO\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")]),e._v("\n")])])]),a("h2",{attrs:{id:"predefined-variables-powered-by-default-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#predefined-variables-powered-by-default-theme"}},[e._v("#")]),e._v(" Predefined Variables Powered By Default Theme")]),e._v(" "),a("h3",{attrs:{id:"navbar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navbar"}},[e._v("#")]),e._v(" navbar")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("boolean")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("See: "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#disable-the-navbar"}},[e._v("Default Theme Config > Disable the Navbar")]),e._v(".")],1),e._v(" "),a("h3",{attrs:{id:"sidebar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sidebar"}},[e._v("#")]),e._v(" sidebar")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("boolean|'auto'")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("See: "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#sidebar"}},[e._v("Default Theme Config > Sidebar")]),e._v(".")],1)])}),[],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/16.73bb46b5.js b/assets/js/16.73bb46b5.js new file mode 100644 index 0000000..66b74b3 --- /dev/null +++ b/assets/js/16.73bb46b5.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{87:function(n,w,o){}}]); \ No newline at end of file diff --git a/assets/js/16.e0a5abc3.js b/assets/js/16.e0a5abc3.js deleted file mode 100644 index d37eebd..0000000 --- a/assets/js/16.e0a5abc3.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{283:function(e,t,a){"use strict";a.r(t);var r=a(4),s=Object(r.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"front-matter-in-vuepress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#front-matter-in-vuepress"}},[e._v("#")]),e._v(" Front Matter in VuePress")]),e._v(" "),a("p",[e._v("Any markdown file that contains a YAML front matter block will be processed by "),a("a",{attrs:{href:"https://github.com/jonschlinkert/gray-matter",target:"_blank",rel:"noopener noreferrer"}},[e._v("gray-matter"),a("OutboundLink")],1),e._v(". 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:")]),e._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{pre:!0,attrs:{class:"token hr punctuation"}},[e._v("---")]),e._v("\ntitle: Blogging Like a Hacker\n"),a("span",{pre:!0,attrs:{class:"token title important"}},[e._v("lang: en-US\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")])]),e._v("\n")])])]),a("p",[e._v("Between these triple-dashed lines, you can set predefined variables (see "),a("a",{attrs:{href:"#predefined-variables"}},[e._v("below")]),e._v(" for a reference), or even create custom ones of your own. These variables will then be available to you to access using "),a("code",[a("router-link",{attrs:{to:"/_posts/global-computed.html#frontmatter"}},[e._v("$frontmatter")])],1),e._v(" at the rest of the page, plus all custom and theming components.")]),e._v(" "),a("p",[e._v("::: tip\nFront matter variables are "),a("strong",[e._v("optional")]),e._v(" in VuePress.\n:::")]),e._v(" "),a("h2",{attrs:{id:"alternative-front-matter-formats"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alternative-front-matter-formats"}},[e._v("#")]),e._v(" Alternative Front Matter Formats")]),e._v(" "),a("p",[e._v("In addition, VuePress also supports JSON or "),a("a",{attrs:{href:"https://github.com/toml-lang/toml",target:"_blank",rel:"noopener noreferrer"}},[e._v("TOML"),a("OutboundLink")],1),e._v(" front matter.")]),e._v(" "),a("p",[e._v("JSON front matter needs to start and end in curly braces:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v('---\n{\n "title": "Blogging Like a Hacker",\n "lang": "en-US"\n}\n---\n')])])]),a("p",[e._v("TOML front matter needs to be explicitly marked as TOML:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v('---toml\ntitle = "Blogging Like a Hacker"\nlang = "en-US"\n---\n')])])]),a("h2",{attrs:{id:"predefined-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#predefined-variables"}},[e._v("#")]),e._v(" Predefined Variables")]),e._v(" "),a("h3",{attrs:{id:"title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#title"}},[e._v("#")]),e._v(" title")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("h1_title || siteConfig.title")])])]),e._v(" "),a("p",[e._v("Title of current page.")]),e._v(" "),a("h3",{attrs:{id:"lang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lang"}},[e._v("#")]),e._v(" lang")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("en-US")])])]),e._v(" "),a("p",[e._v("Language of current page.")]),e._v(" "),a("h3",{attrs:{id:"description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#description"}},[e._v("#")]),e._v(" description")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("siteConfig.description")])])]),e._v(" "),a("p",[e._v("Description of current page.")]),e._v(" "),a("h3",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout"}},[e._v("#")]),e._v(" layout")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("Layout")])])]),e._v(" "),a("p",[e._v("Set the layout component of the current page.")]),e._v(" "),a("h3",{attrs:{id:"permalink"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#permalink"}},[e._v("#")]),e._v(" permalink")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("siteConfig.permalink")])])]),e._v(" "),a("p",[e._v("Refer to: "),a("router-link",{attrs:{to:"/_posts/permalinks.html"}},[e._v("Permalinks")]),e._v(".")],1),e._v(" "),a("h3",{attrs:{id:"metatitle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metatitle"}},[e._v("#")]),e._v(" metaTitle")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("`${page.title} | ${siteConfig.title}`")])])]),e._v(" "),a("p",[e._v("Override the default meta title.")]),e._v(" "),a("h3",{attrs:{id:"meta"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#meta"}},[e._v("#")]),e._v(" meta")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("array")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("Specify extra meta tags to be injected:")]),e._v(" "),a("div",{staticClass:"language-yaml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-yaml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("meta")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("-")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" description\n "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" hello\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("-")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" keywords\n "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" super duper SEO\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")]),e._v("\n")])])]),a("h2",{attrs:{id:"predefined-variables-powered-by-default-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#predefined-variables-powered-by-default-theme"}},[e._v("#")]),e._v(" Predefined Variables Powered By Default Theme")]),e._v(" "),a("h3",{attrs:{id:"navbar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navbar"}},[e._v("#")]),e._v(" navbar")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("boolean")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("See: "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#disable-the-navbar"}},[e._v("Default Theme Config > Disable the Navbar")]),e._v(".")],1),e._v(" "),a("h3",{attrs:{id:"sidebar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sidebar"}},[e._v("#")]),e._v(" sidebar")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("boolean|'auto'")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("See: "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#sidebar"}},[e._v("Default Theme Config > Sidebar")]),e._v(".")],1)])}),[],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/17.9db812d8.js b/assets/js/17.9db812d8.js deleted file mode 100644 index 6dded67..0000000 --- a/assets/js/17.9db812d8.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{286:function(e,t,a){"use strict";a.r(t);var r=a(4),s=Object(r.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"front-matter-in-vuepress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#front-matter-in-vuepress"}},[e._v("#")]),e._v(" Front Matter in VuePress")]),e._v(" "),a("p",[e._v("Any markdown file that contains a YAML front matter block will be processed by "),a("a",{attrs:{href:"https://github.com/jonschlinkert/gray-matter",target:"_blank",rel:"noopener noreferrer"}},[e._v("gray-matter"),a("OutboundLink")],1),e._v(". 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:")]),e._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{pre:!0,attrs:{class:"token hr punctuation"}},[e._v("---")]),e._v("\ntitle: Blogging Like a Hacker\n"),a("span",{pre:!0,attrs:{class:"token title important"}},[e._v("lang: en-US\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")])]),e._v("\n")])])]),a("p",[e._v("Between these triple-dashed lines, you can set predefined variables (see "),a("a",{attrs:{href:"#predefined-variables"}},[e._v("below")]),e._v(" for a reference), or even create custom ones of your own. These variables will then be available to you to access using "),a("code",[a("router-link",{attrs:{to:"/_posts/global-computed.html#frontmatter"}},[e._v("$frontmatter")])],1),e._v(" at the rest of the page, plus all custom and theming components.")]),e._v(" "),a("p",[e._v("::: tip\nFront matter variables are "),a("strong",[e._v("optional")]),e._v(" in VuePress.\n:::")]),e._v(" "),a("h2",{attrs:{id:"alternative-front-matter-formats"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alternative-front-matter-formats"}},[e._v("#")]),e._v(" Alternative Front Matter Formats")]),e._v(" "),a("p",[e._v("In addition, VuePress also supports JSON or "),a("a",{attrs:{href:"https://github.com/toml-lang/toml",target:"_blank",rel:"noopener noreferrer"}},[e._v("TOML"),a("OutboundLink")],1),e._v(" front matter.")]),e._v(" "),a("p",[e._v("JSON front matter needs to start and end in curly braces:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v('---\n{\n "title": "Blogging Like a Hacker",\n "lang": "en-US"\n}\n---\n')])])]),a("p",[e._v("TOML front matter needs to be explicitly marked as TOML:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v('---toml\ntitle = "Blogging Like a Hacker"\nlang = "en-US"\n---\n')])])]),a("h2",{attrs:{id:"predefined-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#predefined-variables"}},[e._v("#")]),e._v(" Predefined Variables")]),e._v(" "),a("h3",{attrs:{id:"title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#title"}},[e._v("#")]),e._v(" title")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("h1_title || siteConfig.title")])])]),e._v(" "),a("p",[e._v("Title of current page.")]),e._v(" "),a("h3",{attrs:{id:"lang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lang"}},[e._v("#")]),e._v(" lang")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("en-US")])])]),e._v(" "),a("p",[e._v("Language of current page.")]),e._v(" "),a("h3",{attrs:{id:"description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#description"}},[e._v("#")]),e._v(" description")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("siteConfig.description")])])]),e._v(" "),a("p",[e._v("Description of current page.")]),e._v(" "),a("h3",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout"}},[e._v("#")]),e._v(" layout")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("Layout")])])]),e._v(" "),a("p",[e._v("Set the layout component of the current page.")]),e._v(" "),a("h3",{attrs:{id:"permalink"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#permalink"}},[e._v("#")]),e._v(" permalink")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("siteConfig.permalink")])])]),e._v(" "),a("p",[e._v("Refer to: "),a("router-link",{attrs:{to:"/_posts/permalinks.html"}},[e._v("Permalinks")]),e._v(".")],1),e._v(" "),a("h3",{attrs:{id:"metatitle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metatitle"}},[e._v("#")]),e._v(" metaTitle")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("string")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("`${page.title} | ${siteConfig.title}`")])])]),e._v(" "),a("p",[e._v("Override the default meta title.")]),e._v(" "),a("h3",{attrs:{id:"meta"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#meta"}},[e._v("#")]),e._v(" meta")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("array")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("Specify extra meta tags to be injected:")]),e._v(" "),a("div",{staticClass:"language-yaml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-yaml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("meta")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("-")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" description\n "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" hello\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("-")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" keywords\n "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[e._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" super duper SEO\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("---")]),e._v("\n")])])]),a("h2",{attrs:{id:"predefined-variables-powered-by-default-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#predefined-variables-powered-by-default-theme"}},[e._v("#")]),e._v(" Predefined Variables Powered By Default Theme")]),e._v(" "),a("h3",{attrs:{id:"navbar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navbar"}},[e._v("#")]),e._v(" navbar")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("boolean")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("See: "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#disable-the-navbar"}},[e._v("Default Theme Config > Disable the Navbar")]),e._v(".")],1),e._v(" "),a("h3",{attrs:{id:"sidebar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sidebar"}},[e._v("#")]),e._v(" sidebar")]),e._v(" "),a("ul",[a("li",[e._v("Type: "),a("code",[e._v("boolean|'auto'")])]),e._v(" "),a("li",[e._v("Default: "),a("code",[e._v("undefined")])])]),e._v(" "),a("p",[e._v("See: "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#sidebar"}},[e._v("Default Theme Config > Sidebar")]),e._v(".")],1)])}),[],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/18.200a3309.js b/assets/js/18.200a3309.js deleted file mode 100644 index 7684f31..0000000 --- a/assets/js/18.200a3309.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{284:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#markdown-slot"}},[t._v("#")]),t._v(" Markdown Slot")]),t._v(" "),s("p",[t._v("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.")]),t._v(" "),s("h2",{attrs:{id:"why-do-i-need-markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#why-do-i-need-markdown-slot"}},[t._v("#")]),t._v(" Why do I need Markdown Slot?")]),t._v(" "),s("p",[t._v("First, let's review the relationship between layout components and markdown files:")]),t._v(" "),s("diagram-markdown-slot-relationship"),t._v(" "),s("p",[t._v("Markdown files are providers of metadata (Page content, Configuration, etc.), while layout components consume them. We can use "),s("code",[t._v("frontmatter")]),t._v(" to define some metadata for common data types, but "),s("code",[t._v("frontmatter")]),t._v(" is hard to do something about markdown / HTML, a complex metadata that involves differences before and after compilation.")]),t._v(" "),s("p",[t._v("Markdown Slot is to solve this kind of problem.")]),t._v(" "),s("h2",{attrs:{id:"named-slots"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#named-slots"}},[t._v("#")]),t._v(" Named Slots")]),t._v(" "),s("p",[t._v("You can define a named markdown slot through the following markdown syntax:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: slot name\n\n:::\n")])])]),s("p",[t._v("Use the "),s("code",[t._v("Content")]),t._v(" component to use the slot in the layout component:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("::: tip\nHere we are using "),s("code",[t._v("slot-key")]),t._v(" instead of "),s("code",[t._v("slot")]),t._v(", because in Vue, "),s("code",[t._v("slot")]),t._v(" is a reserved prop name.\n:::")]),t._v(" "),s("h2",{attrs:{id:"default-slot-content"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#default-slot-content"}},[t._v("#")]),t._v(" Default Slot Content")]),t._v(" "),s("p",[t._v("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 "),s("code",[t._v("Content")]),t._v(" component:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("h2",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),s("p",[t._v("Suppose your layout component is as follows:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("If the markdown content of a page is like this:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: slot header\n"),s("span",{pre:!0,attrs:{class:"token title important"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("#")]),t._v(" Here might be a page title")]),t._v("\n:::\n\n"),s("span",{pre:!0,attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" A Paragraph\n"),s("span",{pre:!0,attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" Another Paragraph\n\n::: slot footer\nHere's some contact info\n:::\n")])])]),s("p",[t._v("Then the rendered HTML of this page will be:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here might be a page title"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content default"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("A Paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Another Paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here's some contact info"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Note that:")]),t._v(" "),s("ol",[s("li",[t._v("Unlike the slot mechanism provided by "),s("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),s("OutboundLink")],1),t._v(" itself, each content distribution is wrapped in a "),s("code",[t._v("div")]),t._v(" whose class is "),s("code",[t._v("content")]),t._v(" with the name of the slot.")]),t._v(" "),s("li",[t._v("Please ensure the uniqueness of the slot defined.")])])],1)}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/19.fd4b3ed2.js b/assets/js/19.fd4b3ed2.js deleted file mode 100644 index 20f1931..0000000 --- a/assets/js/19.fd4b3ed2.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{285:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#markdown-slot"}},[t._v("#")]),t._v(" Markdown Slot")]),t._v(" "),s("p",[t._v("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.")]),t._v(" "),s("h2",{attrs:{id:"why-do-i-need-markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#why-do-i-need-markdown-slot"}},[t._v("#")]),t._v(" Why do I need Markdown Slot?")]),t._v(" "),s("p",[t._v("First, let's review the relationship between layout components and markdown files:")]),t._v(" "),s("diagram-markdown-slot-relationship"),t._v(" "),s("p",[t._v("Markdown files are providers of metadata (Page content, Configuration, etc.), while layout components consume them. We can use "),s("code",[t._v("frontmatter")]),t._v(" to define some metadata for common data types, but "),s("code",[t._v("frontmatter")]),t._v(" is hard to do something about markdown / HTML, a complex metadata that involves differences before and after compilation.")]),t._v(" "),s("p",[t._v("Markdown Slot is to solve this kind of problem.")]),t._v(" "),s("h2",{attrs:{id:"named-slots"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#named-slots"}},[t._v("#")]),t._v(" Named Slots")]),t._v(" "),s("p",[t._v("You can define a named markdown slot through the following markdown syntax:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: slot name\n\n:::\n")])])]),s("p",[t._v("Use the "),s("code",[t._v("Content")]),t._v(" component to use the slot in the layout component:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("::: tip\nHere we are using "),s("code",[t._v("slot-key")]),t._v(" instead of "),s("code",[t._v("slot")]),t._v(", because in Vue, "),s("code",[t._v("slot")]),t._v(" is a reserved prop name.\n:::")]),t._v(" "),s("h2",{attrs:{id:"default-slot-content"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#default-slot-content"}},[t._v("#")]),t._v(" Default Slot Content")]),t._v(" "),s("p",[t._v("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 "),s("code",[t._v("Content")]),t._v(" component:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("h2",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),s("p",[t._v("Suppose your layout component is as follows:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("If the markdown content of a page is like this:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: slot header\n"),s("span",{pre:!0,attrs:{class:"token title important"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("#")]),t._v(" Here might be a page title")]),t._v("\n:::\n\n"),s("span",{pre:!0,attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" A Paragraph\n"),s("span",{pre:!0,attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" Another Paragraph\n\n::: slot footer\nHere's some contact info\n:::\n")])])]),s("p",[t._v("Then the rendered HTML of this page will be:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here might be a page title"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content default"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("A Paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Another Paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here's some contact info"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Note that:")]),t._v(" "),s("ol",[s("li",[t._v("Unlike the slot mechanism provided by "),s("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),s("OutboundLink")],1),t._v(" itself, each content distribution is wrapped in a "),s("code",[t._v("div")]),t._v(" whose class is "),s("code",[t._v("content")]),t._v(" with the name of the slot.")]),t._v(" "),s("li",[t._v("Please ensure the uniqueness of the slot defined.")])])],1)}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/20.c215a7d7.js b/assets/js/20.c215a7d7.js deleted file mode 100644 index ee0ba0e..0000000 --- a/assets/js/20.c215a7d7.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{280:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#markdown-slot"}},[t._v("#")]),t._v(" Markdown Slot")]),t._v(" "),s("p",[t._v("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.")]),t._v(" "),s("h2",{attrs:{id:"why-do-i-need-markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#why-do-i-need-markdown-slot"}},[t._v("#")]),t._v(" Why do I need Markdown Slot?")]),t._v(" "),s("p",[t._v("First, let's review the relationship between layout components and markdown files:")]),t._v(" "),s("diagram-markdown-slot-relationship"),t._v(" "),s("p",[t._v("Markdown files are providers of metadata (Page content, Configuration, etc.), while layout components consume them. We can use "),s("code",[t._v("frontmatter")]),t._v(" to define some metadata for common data types, but "),s("code",[t._v("frontmatter")]),t._v(" is hard to do something about markdown / HTML, a complex metadata that involves differences before and after compilation.")]),t._v(" "),s("p",[t._v("Markdown Slot is to solve this kind of problem.")]),t._v(" "),s("h2",{attrs:{id:"named-slots"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#named-slots"}},[t._v("#")]),t._v(" Named Slots")]),t._v(" "),s("p",[t._v("You can define a named markdown slot through the following markdown syntax:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: slot name\n\n:::\n")])])]),s("p",[t._v("Use the "),s("code",[t._v("Content")]),t._v(" component to use the slot in the layout component:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("::: tip\nHere we are using "),s("code",[t._v("slot-key")]),t._v(" instead of "),s("code",[t._v("slot")]),t._v(", because in Vue, "),s("code",[t._v("slot")]),t._v(" is a reserved prop name.\n:::")]),t._v(" "),s("h2",{attrs:{id:"default-slot-content"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#default-slot-content"}},[t._v("#")]),t._v(" Default Slot Content")]),t._v(" "),s("p",[t._v("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 "),s("code",[t._v("Content")]),t._v(" component:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("h2",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),s("p",[t._v("Suppose your layout component is as follows:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("If the markdown content of a page is like this:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: slot header\n"),s("span",{pre:!0,attrs:{class:"token title important"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("#")]),t._v(" Here might be a page title")]),t._v("\n:::\n\n"),s("span",{pre:!0,attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" A Paragraph\n"),s("span",{pre:!0,attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" Another Paragraph\n\n::: slot footer\nHere's some contact info\n:::\n")])])]),s("p",[t._v("Then the rendered HTML of this page will be:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here might be a page title"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content default"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("A Paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Another Paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here's some contact info"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Note that:")]),t._v(" "),s("ol",[s("li",[t._v("Unlike the slot mechanism provided by "),s("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),s("OutboundLink")],1),t._v(" itself, each content distribution is wrapped in a "),s("code",[t._v("div")]),t._v(" whose class is "),s("code",[t._v("content")]),t._v(" with the name of the slot.")]),t._v(" "),s("li",[t._v("Please ensure the uniqueness of the slot defined.")])])],1)}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/21.f9259165.js b/assets/js/21.f9259165.js deleted file mode 100644 index f7e66b5..0000000 --- a/assets/js/21.f9259165.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{277:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#markdown-slot"}},[t._v("#")]),t._v(" Markdown Slot")]),t._v(" "),s("p",[t._v("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.")]),t._v(" "),s("h2",{attrs:{id:"why-do-i-need-markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#why-do-i-need-markdown-slot"}},[t._v("#")]),t._v(" Why do I need Markdown Slot?")]),t._v(" "),s("p",[t._v("First, let's review the relationship between layout components and markdown files:")]),t._v(" "),s("diagram-markdown-slot-relationship"),t._v(" "),s("p",[t._v("Markdown files are providers of metadata (Page content, Configuration, etc.), while layout components consume them. We can use "),s("code",[t._v("frontmatter")]),t._v(" to define some metadata for common data types, but "),s("code",[t._v("frontmatter")]),t._v(" is hard to do something about markdown / HTML, a complex metadata that involves differences before and after compilation.")]),t._v(" "),s("p",[t._v("Markdown Slot is to solve this kind of problem.")]),t._v(" "),s("h2",{attrs:{id:"named-slots"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#named-slots"}},[t._v("#")]),t._v(" Named Slots")]),t._v(" "),s("p",[t._v("You can define a named markdown slot through the following markdown syntax:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: slot name\n\n:::\n")])])]),s("p",[t._v("Use the "),s("code",[t._v("Content")]),t._v(" component to use the slot in the layout component:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("::: tip\nHere we are using "),s("code",[t._v("slot-key")]),t._v(" instead of "),s("code",[t._v("slot")]),t._v(", because in Vue, "),s("code",[t._v("slot")]),t._v(" is a reserved prop name.\n:::")]),t._v(" "),s("h2",{attrs:{id:"default-slot-content"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#default-slot-content"}},[t._v("#")]),t._v(" Default Slot Content")]),t._v(" "),s("p",[t._v("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 "),s("code",[t._v("Content")]),t._v(" component:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("h2",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),s("p",[t._v("Suppose your layout component is as follows:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("If the markdown content of a page is like this:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: slot header\n"),s("span",{pre:!0,attrs:{class:"token title important"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("#")]),t._v(" Here might be a page title")]),t._v("\n:::\n\n"),s("span",{pre:!0,attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" A Paragraph\n"),s("span",{pre:!0,attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" Another Paragraph\n\n::: slot footer\nHere's some contact info\n:::\n")])])]),s("p",[t._v("Then the rendered HTML of this page will be:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here might be a page title"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content default"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("A Paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Another Paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here's some contact info"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Note that:")]),t._v(" "),s("ol",[s("li",[t._v("Unlike the slot mechanism provided by "),s("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),s("OutboundLink")],1),t._v(" itself, each content distribution is wrapped in a "),s("code",[t._v("div")]),t._v(" whose class is "),s("code",[t._v("content")]),t._v(" with the name of the slot.")]),t._v(" "),s("li",[t._v("Please ensure the uniqueness of the slot defined.")])])],1)}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/22.6095ccd8.js b/assets/js/22.6095ccd8.js deleted file mode 100644 index 2d1dd67..0000000 --- a/assets/js/22.6095ccd8.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{279:function(t,e,a){"use strict";a.r(e);var s=a(4),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"writing-a-vuepress-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#writing-a-vuepress-theme"}},[t._v("#")]),t._v(" Writing a VuePress theme")]),t._v(" "),a("p",[t._v("To write a theme, create a "),a("code",[t._v(".vuepress/theme")]),t._v(" directory in your docs root, and then create a "),a("code",[t._v("Layout.vue")]),t._v(" file:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v(".\n└─ .vuepress\n  └─ `theme`\n    └─ Layout.vue\n")])])]),a("p",[t._v("From there it's the same as developing a normal Vue application. It is entirely up to you how to organize your theme.")]),t._v(" "),a("h2",{attrs:{id:"content-outlet"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-outlet"}},[t._v("#")]),t._v(" Content Outlet")]),t._v(" "),a("p",[t._v("The compiled content of the current "),a("code",[t._v(".md")]),t._v(" file being rendered will be available as a special "),a("code",[t._v("")]),t._v(" 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 "),a("code",[t._v("Layout.vue")]),t._v(" component with the following content:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("theme-container"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("Also see:")])]),t._v(" "),a("ul",[a("li",[a("router-link",{attrs:{to:"/guide/markdown-slot.html"}},[t._v("Markdown Slot")])],1)]),t._v(" "),a("h2",{attrs:{id:"directory-structure"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#directory-structure"}},[t._v("#")]),t._v(" Directory Structure")]),t._v(" "),a("p",[t._v("Just one "),a("code",[t._v("Layout.vue")]),t._v(" might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the "),a("router-link",{attrs:{to:"/config/#palette-styl"}},[t._v("palette")]),t._v(", and even apply some plugins.")],1),t._v(" "),a("p",[t._v("So it's time to reorganize your theme, an agreed theme directory structure is as follows:")]),t._v(" "),a("p",[t._v("::: vue\ntheme\n├── "),a("code",[t._v("global-components")]),t._v("\n│ └── xxx.vue\n├── "),a("code",[t._v("components")]),t._v("\n│ └── xxx.vue\n├── "),a("code",[t._v("layouts")]),t._v("\n│   ├── Layout.vue "),a("em",[t._v("("),a("strong",[t._v("Mandatory")]),t._v(")")]),t._v("\n│   └── 404.vue\n├── "),a("code",[t._v("styles")]),t._v("\n│   ├── index.styl\n│   └── palette.styl\n├── "),a("code",[t._v("templates")]),t._v("\n│   ├── dev.html\n│   └── ssr.html\n├── "),a("code",[t._v("index.js")]),t._v("\n├── "),a("code",[t._v("enhanceApp.js")]),t._v("\n└── package.json\n:::")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("theme/global-components")]),t._v(": Components under this directory will be automatically registered as global components. For details, please refer to "),a("a",{attrs:{href:"https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-register-components",target:"_blank",rel:"noopener noreferrer"}},[t._v("@vuepress/plugin-register-components"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("li",[a("code",[t._v("theme/components")]),t._v(": Your components.")]),t._v(" "),a("li",[a("code",[t._v("theme/layouts")]),t._v(": Layout components of the theme, where "),a("code",[t._v("Layout.vue")]),t._v(" is required.")]),t._v(" "),a("li",[a("code",[t._v("theme/styles")]),t._v(": Global style and palette.")]),t._v(" "),a("li",[a("code",[t._v("theme/templates")]),t._v(": Modify default template.")]),t._v(" "),a("li",[a("code",[t._v("theme/index.js")]),t._v(": Entry file of theme configuration.")]),t._v(" "),a("li",[a("code",[t._v("theme/enhanceApp.js")]),t._v(": Theme level enhancements.")])]),t._v(" "),a("p",[t._v("::: warning Note\nWhen you publish your theme as an NPM package, if you don't have any theme configuration, that means you don't have "),a("code",[t._v("theme/index.js")]),t._v(", you'll need to set the "),a("code",[t._v('"main"')]),t._v(" field to "),a("code",[t._v("layouts/Layout.vue")]),t._v(" in "),a("code",[t._v("package.json")]),t._v(", only in this way VuePress can correctly resolve the theme.")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"main"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"layouts/Layout.vue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v(":::")]),t._v(" "),a("h2",{attrs:{id:"layout-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-component"}},[t._v("#")]),t._v(" Layout Component")]),t._v(" "),a("p",[t._v("Suppose your theme layouts folder is as follows:")]),t._v(" "),a("p",[t._v("::: vue\ntheme\n└── "),a("code",[t._v("layouts")]),t._v("\n   ├── Layout.vue\n   ├── AnotherLayout.vue\n   └── 404.vue\n:::")]),t._v(" "),a("p",[t._v("Then, all the pages will use "),a("code",[t._v("Layout.vue")]),t._v(" as layout component by default, while the routes not matching will use "),a("code",[t._v("404.vue")]),t._v(".")]),t._v(" "),a("p",[t._v("If you want to switch the layout of some pages to "),a("code",[t._v("AnotherLayout.vue")]),t._v(", you just need to update the frontmatter of this page:")]),t._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{pre:!0,attrs:{class:"token hr punctuation"}},[t._v("---")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token title important"}},[t._v("layout: AnotherLayout\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("---")])]),t._v("\n")])])]),a("p",[t._v("::: tip\nEach layout component may render distinct pages. If you want to apply some global UI (e.g. global header), consider using "),a("router-link",{attrs:{to:"/_posts/option-api.html#globallayout"}},[t._v("globalLayout")]),t._v("。\n:::")],1),t._v(" "),a("h2",{attrs:{id:"apply-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#apply-plugins"}},[t._v("#")]),t._v(" Apply plugins")]),t._v(" "),a("p",[t._v("You can apply some plugins to the theme via "),a("code",[t._v("theme/index.js")]),t._v(".")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n plugins"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vuepress/pwa'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n serviceWorker"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n updatePopup"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"site-and-page-metadata"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#site-and-page-metadata"}},[t._v("#")]),t._v(" Site and Page Metadata")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("Layout")]),t._v(" component will be invoked once for every "),a("code",[t._v(".md")]),t._v(" file in "),a("code",[t._v("docs")]),t._v(", and the metadata for the entire site and that specific page will be exposed respectively as "),a("code",[t._v("this.$site")]),t._v(" and "),a("code",[t._v("this.$page")]),t._v(" properties which are injected into every component in the app.")]),t._v(" "),a("p",[t._v("This is the value of "),a("code",[t._v("$site")]),t._v(" of this very website:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"description"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vue-powered Static Site Generator"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"base"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1524027677000")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("code",[t._v("title")]),t._v(", "),a("code",[t._v("description")]),t._v(" and "),a("code",[t._v("base")]),t._v(" are copied from respective fields in "),a("code",[t._v(".vuepress/config.js")]),t._v(". "),a("code",[t._v("pages")]),t._v(" contains an array of metadata objects for each page, including its path, page title (explicitly specified in "),a("router-link",{attrs:{to:"/guide/markdown.html#front-matter"}},[t._v("YAML front matter")]),t._v(" or inferred from the first header on the page), and any YAML front matter data in that file.")],1),t._v(" "),a("p",[t._v("This is the "),a("code",[t._v("$page")]),t._v(" object for this page you are looking at:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1524847549000")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/guide/custom-themes.html"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Custom Themes"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"headers"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("If the user provided "),a("code",[t._v("themeConfig")]),t._v(" in "),a("code",[t._v(".vuepress/config.js")]),t._v(", it will also be available as "),a("code",[t._v("$site.themeConfig")]),t._v(". You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with "),a("code",[t._v("$site.pages")]),t._v(" to dynamically construct navigation links.")]),t._v(" "),a("p",[t._v("Finally, don't forget that "),a("code",[t._v("this.$route")]),t._v(" and "),a("code",[t._v("this.$router")]),t._v(" are also available as part of Vue Router's API.")]),t._v(" "),a("p",[t._v("::: tip\n"),a("code",[t._v("lastUpdated")]),t._v(" is the UNIX timestamp of this file's last git commit, for more details, refer to "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#last-updated"}},[t._v("Last Updated")]),t._v(".\n:::")],1),t._v(" "),a("h2",{attrs:{id:"content-excerpt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-excerpt"}},[t._v("#")]),t._v(" Content Excerpt")]),t._v(" "),a("p",[t._v("If a markdown file contains a "),a("code",[t._v("\x3c!-- more --\x3e")]),t._v(" comment, any content above the comment will be extracted and exposed as "),a("code",[t._v("$page.excerpt")]),t._v(". If you are building custom theme for blogging, this data can be used to render a post list with excerpts.")]),t._v(" "),a("h2",{attrs:{id:"app-level-enhancements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#app-level-enhancements"}},[t._v("#")]),t._v(" App Level Enhancements")]),t._v(" "),a("p",[t._v("Themes can enhance the Vue app that VuePress uses by exposing an "),a("code",[t._v("enhanceApp.js")]),t._v(" file at the root of the theme. The file should "),a("code",[t._v("export default")]),t._v(" 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:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n Vue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the version of Vue being used in the VuePress app")]),t._v("\n options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the options for the root Vue instance")]),t._v("\n router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the router instance for the app")]),t._v("\n siteData "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// site metadata")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...apply enhancements to the app")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/23.90cbf2fd.js b/assets/js/23.90cbf2fd.js deleted file mode 100644 index f598ab6..0000000 --- a/assets/js/23.90cbf2fd.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{274:function(t,e,a){"use strict";a.r(e);var s=a(4),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"writing-a-vuepress-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#writing-a-vuepress-theme"}},[t._v("#")]),t._v(" Writing a VuePress theme")]),t._v(" "),a("p",[t._v("To write a theme, create a "),a("code",[t._v(".vuepress/theme")]),t._v(" directory in your docs root, and then create a "),a("code",[t._v("Layout.vue")]),t._v(" file:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v(".\n└─ .vuepress\n  └─ `theme`\n    └─ Layout.vue\n")])])]),a("p",[t._v("From there it's the same as developing a normal Vue application. It is entirely up to you how to organize your theme.")]),t._v(" "),a("h2",{attrs:{id:"content-outlet"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-outlet"}},[t._v("#")]),t._v(" Content Outlet")]),t._v(" "),a("p",[t._v("The compiled content of the current "),a("code",[t._v(".md")]),t._v(" file being rendered will be available as a special "),a("code",[t._v("")]),t._v(" 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 "),a("code",[t._v("Layout.vue")]),t._v(" component with the following content:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("theme-container"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("Also see:")])]),t._v(" "),a("ul",[a("li",[a("router-link",{attrs:{to:"/guide/markdown-slot.html"}},[t._v("Markdown Slot")])],1)]),t._v(" "),a("h2",{attrs:{id:"directory-structure"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#directory-structure"}},[t._v("#")]),t._v(" Directory Structure")]),t._v(" "),a("p",[t._v("Just one "),a("code",[t._v("Layout.vue")]),t._v(" might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the "),a("router-link",{attrs:{to:"/config/#palette-styl"}},[t._v("palette")]),t._v(", and even apply some plugins.")],1),t._v(" "),a("p",[t._v("So it's time to reorganize your theme, an agreed theme directory structure is as follows:")]),t._v(" "),a("p",[t._v("::: vue\ntheme\n├── "),a("code",[t._v("global-components")]),t._v("\n│ └── xxx.vue\n├── "),a("code",[t._v("components")]),t._v("\n│ └── xxx.vue\n├── "),a("code",[t._v("layouts")]),t._v("\n│   ├── Layout.vue "),a("em",[t._v("("),a("strong",[t._v("Mandatory")]),t._v(")")]),t._v("\n│   └── 404.vue\n├── "),a("code",[t._v("styles")]),t._v("\n│   ├── index.styl\n│   └── palette.styl\n├── "),a("code",[t._v("templates")]),t._v("\n│   ├── dev.html\n│   └── ssr.html\n├── "),a("code",[t._v("index.js")]),t._v("\n├── "),a("code",[t._v("enhanceApp.js")]),t._v("\n└── package.json\n:::")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("theme/global-components")]),t._v(": Components under this directory will be automatically registered as global components. For details, please refer to "),a("a",{attrs:{href:"https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-register-components",target:"_blank",rel:"noopener noreferrer"}},[t._v("@vuepress/plugin-register-components"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("li",[a("code",[t._v("theme/components")]),t._v(": Your components.")]),t._v(" "),a("li",[a("code",[t._v("theme/layouts")]),t._v(": Layout components of the theme, where "),a("code",[t._v("Layout.vue")]),t._v(" is required.")]),t._v(" "),a("li",[a("code",[t._v("theme/styles")]),t._v(": Global style and palette.")]),t._v(" "),a("li",[a("code",[t._v("theme/templates")]),t._v(": Modify default template.")]),t._v(" "),a("li",[a("code",[t._v("theme/index.js")]),t._v(": Entry file of theme configuration.")]),t._v(" "),a("li",[a("code",[t._v("theme/enhanceApp.js")]),t._v(": Theme level enhancements.")])]),t._v(" "),a("p",[t._v("::: warning Note\nWhen you publish your theme as an NPM package, if you don't have any theme configuration, that means you don't have "),a("code",[t._v("theme/index.js")]),t._v(", you'll need to set the "),a("code",[t._v('"main"')]),t._v(" field to "),a("code",[t._v("layouts/Layout.vue")]),t._v(" in "),a("code",[t._v("package.json")]),t._v(", only in this way VuePress can correctly resolve the theme.")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"main"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"layouts/Layout.vue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v(":::")]),t._v(" "),a("h2",{attrs:{id:"layout-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-component"}},[t._v("#")]),t._v(" Layout Component")]),t._v(" "),a("p",[t._v("Suppose your theme layouts folder is as follows:")]),t._v(" "),a("p",[t._v("::: vue\ntheme\n└── "),a("code",[t._v("layouts")]),t._v("\n   ├── Layout.vue\n   ├── AnotherLayout.vue\n   └── 404.vue\n:::")]),t._v(" "),a("p",[t._v("Then, all the pages will use "),a("code",[t._v("Layout.vue")]),t._v(" as layout component by default, while the routes not matching will use "),a("code",[t._v("404.vue")]),t._v(".")]),t._v(" "),a("p",[t._v("If you want to switch the layout of some pages to "),a("code",[t._v("AnotherLayout.vue")]),t._v(", you just need to update the frontmatter of this page:")]),t._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{pre:!0,attrs:{class:"token hr punctuation"}},[t._v("---")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token title important"}},[t._v("layout: AnotherLayout\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("---")])]),t._v("\n")])])]),a("p",[t._v("::: tip\nEach layout component may render distinct pages. If you want to apply some global UI (e.g. global header), consider using "),a("router-link",{attrs:{to:"/_posts/option-api.html#globallayout"}},[t._v("globalLayout")]),t._v("。\n:::")],1),t._v(" "),a("h2",{attrs:{id:"apply-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#apply-plugins"}},[t._v("#")]),t._v(" Apply plugins")]),t._v(" "),a("p",[t._v("You can apply some plugins to the theme via "),a("code",[t._v("theme/index.js")]),t._v(".")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n plugins"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vuepress/pwa'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n serviceWorker"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n updatePopup"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"site-and-page-metadata"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#site-and-page-metadata"}},[t._v("#")]),t._v(" Site and Page Metadata")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("Layout")]),t._v(" component will be invoked once for every "),a("code",[t._v(".md")]),t._v(" file in "),a("code",[t._v("docs")]),t._v(", and the metadata for the entire site and that specific page will be exposed respectively as "),a("code",[t._v("this.$site")]),t._v(" and "),a("code",[t._v("this.$page")]),t._v(" properties which are injected into every component in the app.")]),t._v(" "),a("p",[t._v("This is the value of "),a("code",[t._v("$site")]),t._v(" of this very website:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"description"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vue-powered Static Site Generator"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"base"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1524027677000")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("code",[t._v("title")]),t._v(", "),a("code",[t._v("description")]),t._v(" and "),a("code",[t._v("base")]),t._v(" are copied from respective fields in "),a("code",[t._v(".vuepress/config.js")]),t._v(". "),a("code",[t._v("pages")]),t._v(" contains an array of metadata objects for each page, including its path, page title (explicitly specified in "),a("router-link",{attrs:{to:"/guide/markdown.html#front-matter"}},[t._v("YAML front matter")]),t._v(" or inferred from the first header on the page), and any YAML front matter data in that file.")],1),t._v(" "),a("p",[t._v("This is the "),a("code",[t._v("$page")]),t._v(" object for this page you are looking at:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1524847549000")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/guide/custom-themes.html"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Custom Themes"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"headers"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("If the user provided "),a("code",[t._v("themeConfig")]),t._v(" in "),a("code",[t._v(".vuepress/config.js")]),t._v(", it will also be available as "),a("code",[t._v("$site.themeConfig")]),t._v(". You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with "),a("code",[t._v("$site.pages")]),t._v(" to dynamically construct navigation links.")]),t._v(" "),a("p",[t._v("Finally, don't forget that "),a("code",[t._v("this.$route")]),t._v(" and "),a("code",[t._v("this.$router")]),t._v(" are also available as part of Vue Router's API.")]),t._v(" "),a("p",[t._v("::: tip\n"),a("code",[t._v("lastUpdated")]),t._v(" is the UNIX timestamp of this file's last git commit, for more details, refer to "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#last-updated"}},[t._v("Last Updated")]),t._v(".\n:::")],1),t._v(" "),a("h2",{attrs:{id:"content-excerpt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-excerpt"}},[t._v("#")]),t._v(" Content Excerpt")]),t._v(" "),a("p",[t._v("If a markdown file contains a "),a("code",[t._v("\x3c!-- more --\x3e")]),t._v(" comment, any content above the comment will be extracted and exposed as "),a("code",[t._v("$page.excerpt")]),t._v(". If you are building custom theme for blogging, this data can be used to render a post list with excerpts.")]),t._v(" "),a("h2",{attrs:{id:"app-level-enhancements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#app-level-enhancements"}},[t._v("#")]),t._v(" App Level Enhancements")]),t._v(" "),a("p",[t._v("Themes can enhance the Vue app that VuePress uses by exposing an "),a("code",[t._v("enhanceApp.js")]),t._v(" file at the root of the theme. The file should "),a("code",[t._v("export default")]),t._v(" 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:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n Vue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the version of Vue being used in the VuePress app")]),t._v("\n options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the options for the root Vue instance")]),t._v("\n router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the router instance for the app")]),t._v("\n siteData "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// site metadata")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...apply enhancements to the app")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/24.cf7f0a28.js b/assets/js/24.cf7f0a28.js deleted file mode 100644 index 2f80be2..0000000 --- a/assets/js/24.cf7f0a28.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{278:function(t,e,a){"use strict";a.r(e);var s=a(4),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"writing-a-vuepress-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#writing-a-vuepress-theme"}},[t._v("#")]),t._v(" Writing a VuePress theme")]),t._v(" "),a("p",[t._v("To write a theme, create a "),a("code",[t._v(".vuepress/theme")]),t._v(" directory in your docs root, and then create a "),a("code",[t._v("Layout.vue")]),t._v(" file:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v(".\n└─ .vuepress\n  └─ `theme`\n    └─ Layout.vue\n")])])]),a("p",[t._v("From there it's the same as developing a normal Vue application. It is entirely up to you how to organize your theme.")]),t._v(" "),a("h2",{attrs:{id:"content-outlet"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-outlet"}},[t._v("#")]),t._v(" Content Outlet")]),t._v(" "),a("p",[t._v("The compiled content of the current "),a("code",[t._v(".md")]),t._v(" file being rendered will be available as a special "),a("code",[t._v("")]),t._v(" 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 "),a("code",[t._v("Layout.vue")]),t._v(" component with the following content:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("theme-container"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("Also see:")])]),t._v(" "),a("ul",[a("li",[a("router-link",{attrs:{to:"/guide/markdown-slot.html"}},[t._v("Markdown Slot")])],1)]),t._v(" "),a("h2",{attrs:{id:"directory-structure"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#directory-structure"}},[t._v("#")]),t._v(" Directory Structure")]),t._v(" "),a("p",[t._v("Just one "),a("code",[t._v("Layout.vue")]),t._v(" might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the "),a("router-link",{attrs:{to:"/config/#palette-styl"}},[t._v("palette")]),t._v(", and even apply some plugins.")],1),t._v(" "),a("p",[t._v("So it's time to reorganize your theme, an agreed theme directory structure is as follows:")]),t._v(" "),a("p",[t._v("::: vue\ntheme\n├── "),a("code",[t._v("global-components")]),t._v("\n│ └── xxx.vue\n├── "),a("code",[t._v("components")]),t._v("\n│ └── xxx.vue\n├── "),a("code",[t._v("layouts")]),t._v("\n│   ├── Layout.vue "),a("em",[t._v("("),a("strong",[t._v("Mandatory")]),t._v(")")]),t._v("\n│   └── 404.vue\n├── "),a("code",[t._v("styles")]),t._v("\n│   ├── index.styl\n│   └── palette.styl\n├── "),a("code",[t._v("templates")]),t._v("\n│   ├── dev.html\n│   └── ssr.html\n├── "),a("code",[t._v("index.js")]),t._v("\n├── "),a("code",[t._v("enhanceApp.js")]),t._v("\n└── package.json\n:::")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("theme/global-components")]),t._v(": Components under this directory will be automatically registered as global components. For details, please refer to "),a("a",{attrs:{href:"https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-register-components",target:"_blank",rel:"noopener noreferrer"}},[t._v("@vuepress/plugin-register-components"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("li",[a("code",[t._v("theme/components")]),t._v(": Your components.")]),t._v(" "),a("li",[a("code",[t._v("theme/layouts")]),t._v(": Layout components of the theme, where "),a("code",[t._v("Layout.vue")]),t._v(" is required.")]),t._v(" "),a("li",[a("code",[t._v("theme/styles")]),t._v(": Global style and palette.")]),t._v(" "),a("li",[a("code",[t._v("theme/templates")]),t._v(": Modify default template.")]),t._v(" "),a("li",[a("code",[t._v("theme/index.js")]),t._v(": Entry file of theme configuration.")]),t._v(" "),a("li",[a("code",[t._v("theme/enhanceApp.js")]),t._v(": Theme level enhancements.")])]),t._v(" "),a("p",[t._v("::: warning Note\nWhen you publish your theme as an NPM package, if you don't have any theme configuration, that means you don't have "),a("code",[t._v("theme/index.js")]),t._v(", you'll need to set the "),a("code",[t._v('"main"')]),t._v(" field to "),a("code",[t._v("layouts/Layout.vue")]),t._v(" in "),a("code",[t._v("package.json")]),t._v(", only in this way VuePress can correctly resolve the theme.")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"main"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"layouts/Layout.vue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v(":::")]),t._v(" "),a("h2",{attrs:{id:"layout-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-component"}},[t._v("#")]),t._v(" Layout Component")]),t._v(" "),a("p",[t._v("Suppose your theme layouts folder is as follows:")]),t._v(" "),a("p",[t._v("::: vue\ntheme\n└── "),a("code",[t._v("layouts")]),t._v("\n   ├── Layout.vue\n   ├── AnotherLayout.vue\n   └── 404.vue\n:::")]),t._v(" "),a("p",[t._v("Then, all the pages will use "),a("code",[t._v("Layout.vue")]),t._v(" as layout component by default, while the routes not matching will use "),a("code",[t._v("404.vue")]),t._v(".")]),t._v(" "),a("p",[t._v("If you want to switch the layout of some pages to "),a("code",[t._v("AnotherLayout.vue")]),t._v(", you just need to update the frontmatter of this page:")]),t._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{pre:!0,attrs:{class:"token hr punctuation"}},[t._v("---")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token title important"}},[t._v("layout: AnotherLayout\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("---")])]),t._v("\n")])])]),a("p",[t._v("::: tip\nEach layout component may render distinct pages. If you want to apply some global UI (e.g. global header), consider using "),a("router-link",{attrs:{to:"/_posts/option-api.html#globallayout"}},[t._v("globalLayout")]),t._v("。\n:::")],1),t._v(" "),a("h2",{attrs:{id:"apply-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#apply-plugins"}},[t._v("#")]),t._v(" Apply plugins")]),t._v(" "),a("p",[t._v("You can apply some plugins to the theme via "),a("code",[t._v("theme/index.js")]),t._v(".")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n plugins"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vuepress/pwa'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n serviceWorker"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n updatePopup"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"site-and-page-metadata"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#site-and-page-metadata"}},[t._v("#")]),t._v(" Site and Page Metadata")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("Layout")]),t._v(" component will be invoked once for every "),a("code",[t._v(".md")]),t._v(" file in "),a("code",[t._v("docs")]),t._v(", and the metadata for the entire site and that specific page will be exposed respectively as "),a("code",[t._v("this.$site")]),t._v(" and "),a("code",[t._v("this.$page")]),t._v(" properties which are injected into every component in the app.")]),t._v(" "),a("p",[t._v("This is the value of "),a("code",[t._v("$site")]),t._v(" of this very website:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"description"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vue-powered Static Site Generator"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"base"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1524027677000")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("code",[t._v("title")]),t._v(", "),a("code",[t._v("description")]),t._v(" and "),a("code",[t._v("base")]),t._v(" are copied from respective fields in "),a("code",[t._v(".vuepress/config.js")]),t._v(". "),a("code",[t._v("pages")]),t._v(" contains an array of metadata objects for each page, including its path, page title (explicitly specified in "),a("router-link",{attrs:{to:"/guide/markdown.html#front-matter"}},[t._v("YAML front matter")]),t._v(" or inferred from the first header on the page), and any YAML front matter data in that file.")],1),t._v(" "),a("p",[t._v("This is the "),a("code",[t._v("$page")]),t._v(" object for this page you are looking at:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1524847549000")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/guide/custom-themes.html"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Custom Themes"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"headers"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("If the user provided "),a("code",[t._v("themeConfig")]),t._v(" in "),a("code",[t._v(".vuepress/config.js")]),t._v(", it will also be available as "),a("code",[t._v("$site.themeConfig")]),t._v(". You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with "),a("code",[t._v("$site.pages")]),t._v(" to dynamically construct navigation links.")]),t._v(" "),a("p",[t._v("Finally, don't forget that "),a("code",[t._v("this.$route")]),t._v(" and "),a("code",[t._v("this.$router")]),t._v(" are also available as part of Vue Router's API.")]),t._v(" "),a("p",[t._v("::: tip\n"),a("code",[t._v("lastUpdated")]),t._v(" is the UNIX timestamp of this file's last git commit, for more details, refer to "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#last-updated"}},[t._v("Last Updated")]),t._v(".\n:::")],1),t._v(" "),a("h2",{attrs:{id:"content-excerpt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-excerpt"}},[t._v("#")]),t._v(" Content Excerpt")]),t._v(" "),a("p",[t._v("If a markdown file contains a "),a("code",[t._v("\x3c!-- more --\x3e")]),t._v(" comment, any content above the comment will be extracted and exposed as "),a("code",[t._v("$page.excerpt")]),t._v(". If you are building custom theme for blogging, this data can be used to render a post list with excerpts.")]),t._v(" "),a("h2",{attrs:{id:"app-level-enhancements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#app-level-enhancements"}},[t._v("#")]),t._v(" App Level Enhancements")]),t._v(" "),a("p",[t._v("Themes can enhance the Vue app that VuePress uses by exposing an "),a("code",[t._v("enhanceApp.js")]),t._v(" file at the root of the theme. The file should "),a("code",[t._v("export default")]),t._v(" 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:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n Vue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the version of Vue being used in the VuePress app")]),t._v("\n options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the options for the root Vue instance")]),t._v("\n router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the router instance for the app")]),t._v("\n siteData "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// site metadata")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...apply enhancements to the app")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/25.140d13ba.js b/assets/js/25.140d13ba.js deleted file mode 100644 index 5d7015f..0000000 --- a/assets/js/25.140d13ba.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{276:function(t,e,a){"use strict";a.r(e);var s=a(4),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"writing-a-vuepress-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#writing-a-vuepress-theme"}},[t._v("#")]),t._v(" Writing a VuePress theme")]),t._v(" "),a("p",[t._v("To write a theme, create a "),a("code",[t._v(".vuepress/theme")]),t._v(" directory in your docs root, and then create a "),a("code",[t._v("Layout.vue")]),t._v(" file:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v(".\n└─ .vuepress\n  └─ `theme`\n    └─ Layout.vue\n")])])]),a("p",[t._v("From there it's the same as developing a normal Vue application. It is entirely up to you how to organize your theme.")]),t._v(" "),a("h2",{attrs:{id:"content-outlet"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-outlet"}},[t._v("#")]),t._v(" Content Outlet")]),t._v(" "),a("p",[t._v("The compiled content of the current "),a("code",[t._v(".md")]),t._v(" file being rendered will be available as a special "),a("code",[t._v("")]),t._v(" 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 "),a("code",[t._v("Layout.vue")]),t._v(" component with the following content:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("theme-container"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("Also see:")])]),t._v(" "),a("ul",[a("li",[a("router-link",{attrs:{to:"/guide/markdown-slot.html"}},[t._v("Markdown Slot")])],1)]),t._v(" "),a("h2",{attrs:{id:"directory-structure"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#directory-structure"}},[t._v("#")]),t._v(" Directory Structure")]),t._v(" "),a("p",[t._v("Just one "),a("code",[t._v("Layout.vue")]),t._v(" might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the "),a("router-link",{attrs:{to:"/config/#palette-styl"}},[t._v("palette")]),t._v(", and even apply some plugins.")],1),t._v(" "),a("p",[t._v("So it's time to reorganize your theme, an agreed theme directory structure is as follows:")]),t._v(" "),a("p",[t._v("::: vue\ntheme\n├── "),a("code",[t._v("global-components")]),t._v("\n│ └── xxx.vue\n├── "),a("code",[t._v("components")]),t._v("\n│ └── xxx.vue\n├── "),a("code",[t._v("layouts")]),t._v("\n│   ├── Layout.vue "),a("em",[t._v("("),a("strong",[t._v("Mandatory")]),t._v(")")]),t._v("\n│   └── 404.vue\n├── "),a("code",[t._v("styles")]),t._v("\n│   ├── index.styl\n│   └── palette.styl\n├── "),a("code",[t._v("templates")]),t._v("\n│   ├── dev.html\n│   └── ssr.html\n├── "),a("code",[t._v("index.js")]),t._v("\n├── "),a("code",[t._v("enhanceApp.js")]),t._v("\n└── package.json\n:::")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("theme/global-components")]),t._v(": Components under this directory will be automatically registered as global components. For details, please refer to "),a("a",{attrs:{href:"https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-register-components",target:"_blank",rel:"noopener noreferrer"}},[t._v("@vuepress/plugin-register-components"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("li",[a("code",[t._v("theme/components")]),t._v(": Your components.")]),t._v(" "),a("li",[a("code",[t._v("theme/layouts")]),t._v(": Layout components of the theme, where "),a("code",[t._v("Layout.vue")]),t._v(" is required.")]),t._v(" "),a("li",[a("code",[t._v("theme/styles")]),t._v(": Global style and palette.")]),t._v(" "),a("li",[a("code",[t._v("theme/templates")]),t._v(": Modify default template.")]),t._v(" "),a("li",[a("code",[t._v("theme/index.js")]),t._v(": Entry file of theme configuration.")]),t._v(" "),a("li",[a("code",[t._v("theme/enhanceApp.js")]),t._v(": Theme level enhancements.")])]),t._v(" "),a("p",[t._v("::: warning Note\nWhen you publish your theme as an NPM package, if you don't have any theme configuration, that means you don't have "),a("code",[t._v("theme/index.js")]),t._v(", you'll need to set the "),a("code",[t._v('"main"')]),t._v(" field to "),a("code",[t._v("layouts/Layout.vue")]),t._v(" in "),a("code",[t._v("package.json")]),t._v(", only in this way VuePress can correctly resolve the theme.")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"main"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"layouts/Layout.vue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v(":::")]),t._v(" "),a("h2",{attrs:{id:"layout-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-component"}},[t._v("#")]),t._v(" Layout Component")]),t._v(" "),a("p",[t._v("Suppose your theme layouts folder is as follows:")]),t._v(" "),a("p",[t._v("::: vue\ntheme\n└── "),a("code",[t._v("layouts")]),t._v("\n   ├── Layout.vue\n   ├── AnotherLayout.vue\n   └── 404.vue\n:::")]),t._v(" "),a("p",[t._v("Then, all the pages will use "),a("code",[t._v("Layout.vue")]),t._v(" as layout component by default, while the routes not matching will use "),a("code",[t._v("404.vue")]),t._v(".")]),t._v(" "),a("p",[t._v("If you want to switch the layout of some pages to "),a("code",[t._v("AnotherLayout.vue")]),t._v(", you just need to update the frontmatter of this page:")]),t._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{pre:!0,attrs:{class:"token hr punctuation"}},[t._v("---")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token title important"}},[t._v("layout: AnotherLayout\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("---")])]),t._v("\n")])])]),a("p",[t._v("::: tip\nEach layout component may render distinct pages. If you want to apply some global UI (e.g. global header), consider using "),a("router-link",{attrs:{to:"/_posts/option-api.html#globallayout"}},[t._v("globalLayout")]),t._v("。\n:::")],1),t._v(" "),a("h2",{attrs:{id:"apply-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#apply-plugins"}},[t._v("#")]),t._v(" Apply plugins")]),t._v(" "),a("p",[t._v("You can apply some plugins to the theme via "),a("code",[t._v("theme/index.js")]),t._v(".")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n plugins"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vuepress/pwa'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n serviceWorker"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n updatePopup"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"site-and-page-metadata"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#site-and-page-metadata"}},[t._v("#")]),t._v(" Site and Page Metadata")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("Layout")]),t._v(" component will be invoked once for every "),a("code",[t._v(".md")]),t._v(" file in "),a("code",[t._v("docs")]),t._v(", and the metadata for the entire site and that specific page will be exposed respectively as "),a("code",[t._v("this.$site")]),t._v(" and "),a("code",[t._v("this.$page")]),t._v(" properties which are injected into every component in the app.")]),t._v(" "),a("p",[t._v("This is the value of "),a("code",[t._v("$site")]),t._v(" of this very website:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"description"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vue-powered Static Site Generator"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"base"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1524027677000")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("code",[t._v("title")]),t._v(", "),a("code",[t._v("description")]),t._v(" and "),a("code",[t._v("base")]),t._v(" are copied from respective fields in "),a("code",[t._v(".vuepress/config.js")]),t._v(". "),a("code",[t._v("pages")]),t._v(" contains an array of metadata objects for each page, including its path, page title (explicitly specified in "),a("router-link",{attrs:{to:"/guide/markdown.html#front-matter"}},[t._v("YAML front matter")]),t._v(" or inferred from the first header on the page), and any YAML front matter data in that file.")],1),t._v(" "),a("p",[t._v("This is the "),a("code",[t._v("$page")]),t._v(" object for this page you are looking at:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1524847549000")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/guide/custom-themes.html"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Custom Themes"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"headers"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("If the user provided "),a("code",[t._v("themeConfig")]),t._v(" in "),a("code",[t._v(".vuepress/config.js")]),t._v(", it will also be available as "),a("code",[t._v("$site.themeConfig")]),t._v(". You can use this to allow users to customize behavior of your theme - for example, specifying categories and page order. You can then use these data together with "),a("code",[t._v("$site.pages")]),t._v(" to dynamically construct navigation links.")]),t._v(" "),a("p",[t._v("Finally, don't forget that "),a("code",[t._v("this.$route")]),t._v(" and "),a("code",[t._v("this.$router")]),t._v(" are also available as part of Vue Router's API.")]),t._v(" "),a("p",[t._v("::: tip\n"),a("code",[t._v("lastUpdated")]),t._v(" is the UNIX timestamp of this file's last git commit, for more details, refer to "),a("router-link",{attrs:{to:"/theme/default-theme-config.html#last-updated"}},[t._v("Last Updated")]),t._v(".\n:::")],1),t._v(" "),a("h2",{attrs:{id:"content-excerpt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-excerpt"}},[t._v("#")]),t._v(" Content Excerpt")]),t._v(" "),a("p",[t._v("If a markdown file contains a "),a("code",[t._v("\x3c!-- more --\x3e")]),t._v(" comment, any content above the comment will be extracted and exposed as "),a("code",[t._v("$page.excerpt")]),t._v(". If you are building custom theme for blogging, this data can be used to render a post list with excerpts.")]),t._v(" "),a("h2",{attrs:{id:"app-level-enhancements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#app-level-enhancements"}},[t._v("#")]),t._v(" App Level Enhancements")]),t._v(" "),a("p",[t._v("Themes can enhance the Vue app that VuePress uses by exposing an "),a("code",[t._v("enhanceApp.js")]),t._v(" file at the root of the theme. The file should "),a("code",[t._v("export default")]),t._v(" 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:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n Vue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the version of Vue being used in the VuePress app")]),t._v("\n options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the options for the root Vue instance")]),t._v("\n router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the router instance for the app")]),t._v("\n siteData "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// site metadata")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...apply enhancements to the app")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/26.9c1471e7.js b/assets/js/26.9c1471e7.js deleted file mode 100644 index 705c3d7..0000000 --- a/assets/js/26.9c1471e7.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{87:function(n,w,o){}}]); \ No newline at end of file diff --git a/assets/js/4.3b70b518.js b/assets/js/4.d1013ba5.js similarity index 81% rename from assets/js/4.3b70b518.js rename to assets/js/4.d1013ba5.js index f1ed2ce..82e8c0c 100644 --- a/assets/js/4.3b70b518.js +++ b/assets/js/4.d1013ba5.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{106:function(t,n,e){"use strict";e.d(n,"c",(function(){return u})),e.d(n,"d",(function(){return c})),e.d(n,"e",(function(){return a})),e.d(n,"a",(function(){return l})),e.d(n,"b",(function(){return f}));const r=/#.*$/,i=/\.(md|html)$/,o=/\/$/,s=/^(https?:|mailto:|tel:)/;function u(t){return s.test(t)}function c(t){return/^mailto:/.test(t)}function a(t){return/^tel:/.test(t)}function l(t){if(u(t))return t;const n=t.match(r),e=n?n[0]:"",s=function(t){return decodeURI(t).replace(r,"").replace(i,"")}(t);return o.test(s)?t:s+".html"+e}function f(t,n,e){if(!t)return e;let r,i=n;for(;(i=i.$parent)&&!r;)r=i.$refs[t];return r&&r.$el&&(r=r.$el),r||e}},111:function(t,n,e){var r=e(21),i=e(112),o=e(92),s=e(91)("IE_PROTO"),u=function(){},c=function(){var t,n=e(42)("iframe"),r=o.length;for(n.style.display="none",e(113).appendChild(n),n.src="/service/javascript:",(t=n.contentWindow.document).open(),t.write(" + diff --git a/page/2/index.html b/page/2/index.html deleted file mode 100644 index de2534c..0000000 --- a/page/2/index.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - Page 1 | post | VuePress Blog Example - - - - - - - -
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    vue源码分析
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    Front Matter in VuePress
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    - - - diff --git a/page/3/index.html b/page/3/index.html deleted file mode 100644 index b836acc..0000000 --- a/page/3/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - Page 2 | post | VuePress Blog Example - - - - - - - -
    Front Matter in VuePress
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    - - - diff --git a/tag/blog/index.html b/tag/blog/index.html index a0d77f8..8fffb6f 100644 --- a/tag/blog/index.html +++ b/tag/blog/index.html @@ -7,61 +7,32 @@ - +
    Writing a VuePress theme
    +
    初尝vuePress
    +vuePress +是什么？ -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: +官网给出的说法是 -. -└─ .vuepress -  └─ theme -    └─ Layout.vue +img -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: +> Vue-powered Static Site Generator(以vue为核心的静态网站生成器 -. -└─ .vuepress -  └─ theme -    └─ Layout.vue +如何开始 +1. 先全局安装vuepress -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    - + diff --git a/tag/frontmatter/index.html b/tag/frontmatter/index.html deleted file mode 100644 index 2232d62..0000000 --- a/tag/frontmatter/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - frontmatter tag | VuePress Blog Example - - - - - - - -
    Front Matter in VuePress
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    Front Matter in VuePress
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    vue源码分析
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    - - - diff --git a/tag/index.html b/tag/index.html index 9e4e183..004053c 100644 --- a/tag/index.html +++ b/tag/index.html @@ -7,29 +7,21 @@ - + - + diff --git a/tag/markdown/index.html b/tag/markdown/index.html deleted file mode 100644 index 2e2d3db..0000000 --- a/tag/markdown/index.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - markdown tag | VuePress Blog Example - - - - - - - -
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    - - - diff --git a/tag/theme/index.html b/tag/theme/index.html deleted file mode 100644 index 9e22284..0000000 --- a/tag/theme/index.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - theme tag | VuePress Blog Example - - - - - - - -
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    - - - diff --git a/tag/vuepress/index.html b/tag/vuepress/index.html index ece2af8..a313233 100644 --- a/tag/vuepress/index.html +++ b/tag/vuepress/index.html @@ -7,67 +7,32 @@ - +
    Writing a VuePress theme
    +
    初尝vuePress
    +vuePress +是什么？ -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: +官网给出的说法是 -. -└─ .vuepress -  └─ theme -    └─ Layout.vue +img -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Writing a VuePress theme
    - - -To write a theme, create a .vuepress/theme directory in your docs root, and then create a Layout.vue file: - -. -└─ .vuepress -  └─ theme -    └─ Layout.vue - -From there it's the same as ... -
    ULIVZ in Shanghai
    Mon May 06 2019
    Markdown Slot
    - +> Vue-powered Static Site Generator(以vue为核心的静态网站生成器 -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. +如何开始 +1. 先全局安装vuepress -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    - + diff --git a/tag/vuepress/page/2/index.html b/tag/vuepress/page/2/index.html deleted file mode 100644 index 76a9809..0000000 --- a/tag/vuepress/page/2/index.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - Page 1 - vuepress | tag | VuePress Blog Example - - - - - - - -
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    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. - -Wh ... -
    ULIVZ in Hangzhou
    Tue Feb 26 2019
    vue源码分析
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    Front Matter in VuePress
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    - - - diff --git a/tag/vuepress/page/3/index.html b/tag/vuepress/page/3/index.html deleted file mode 100644 index 9bc0c16..0000000 --- a/tag/vuepress/page/3/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - Page 2 - vuepress | tag | VuePress Blog Example - - - - - - - -
    Front Matter in VuePress
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    - - - diff --git "a/tag/\346\272\220\347\240\201\345\210\206\346\236\220/index.html" "b/tag/\346\272\220\347\240\201\345\210\206\346\236\220/index.html" deleted file mode 100644 index 6942012..0000000 --- "a/tag/\346\272\220\347\240\201\345\210\206\346\236\220/index.html" +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - 源码分析 tag | VuePress Blog Example - - - - - - - -
    vue源码分析
    - - -Any markdown file that contains a YAML front matter block will be processed by gray-matter. The front matter must be the first thing in the markdown f ... -
    ULIVZ in Hangzhou
    Wed Nov 07 2018
    - - -