diff --git a/packages/@vuepress/core/lib/prepare/AppContext.js b/packages/@vuepress/core/lib/prepare/AppContext.js
index c1176a154b..235fbb5851 100644
--- a/packages/@vuepress/core/lib/prepare/AppContext.js
+++ b/packages/@vuepress/core/lib/prepare/AppContext.js
@@ -292,6 +292,7 @@ module.exports = class AppContext {
async addPage (options) {
options.permalinkPattern = this.siteConfig.permalink
+ options.siteConfig = this.siteConfig
const page = new Page(options, this)
await page.process({
markdown: this.markdown,
diff --git a/packages/@vuepress/core/lib/prepare/Page.js b/packages/@vuepress/core/lib/prepare/Page.js
index 04b7178a50..77bbf2118c 100644
--- a/packages/@vuepress/core/lib/prepare/Page.js
+++ b/packages/@vuepress/core/lib/prepare/Page.js
@@ -45,7 +45,8 @@ module.exports = class Page {
relative,
permalink,
frontmatter = {},
- permalinkPattern
+ permalinkPattern,
+ siteConfig
}, context) {
this.title = title
this._meta = meta
@@ -54,7 +55,9 @@ module.exports = class Page {
this._permalink = permalink
this.frontmatter = frontmatter
this._permalinkPattern = permalinkPattern
+ this._siteConfig = siteConfig
this._context = context
+ this._siteConfig = siteConfig
if (relative) {
this.regularPath = encodeURI(fileToPath(relative))
@@ -108,9 +111,13 @@ module.exports = class Page {
}
// headers
+ this.headersToExtract = ['h2', 'h3']
+ if (this._siteConfig.markdown && this._siteConfig.markdown.extractHeaders) {
+ this.headersToExtract = this._siteConfig.markdown.extractHeaders
+ }
const headers = extractHeaders(
this._strippedContent,
- ['h2', 'h3'],
+ this.headersToExtract,
markdown
)
if (headers.length) {
diff --git a/packages/@vuepress/core/lib/webpack/createBaseConfig.js b/packages/@vuepress/core/lib/webpack/createBaseConfig.js
index c04aae63d5..7e49022d80 100644
--- a/packages/@vuepress/core/lib/webpack/createBaseConfig.js
+++ b/packages/@vuepress/core/lib/webpack/createBaseConfig.js
@@ -116,7 +116,7 @@ module.exports = function createBaseConfig ({
mdRule
.use('markdown-loader')
.loader(require.resolve('@vuepress/markdown-loader'))
- .options({ sourceDir, markdown })
+ .options({ sourceDir, markdown, siteConfig })
config.module
.rule('pug')
diff --git a/packages/@vuepress/markdown-loader/index.js b/packages/@vuepress/markdown-loader/index.js
index f4fd02ab9b..8b57fd8fb0 100644
--- a/packages/@vuepress/markdown-loader/index.js
+++ b/packages/@vuepress/markdown-loader/index.js
@@ -22,6 +22,7 @@ module.exports = function (src) {
const isServer = this.target === 'node'
const options = getOptions(this)
const { sourceDir } = options
+ const { siteConfig } = options
let { markdown } = options
if (!markdown) {
markdown = md()
@@ -42,7 +43,11 @@ module.exports = function (src) {
if (!isProd && !isServer) {
const inferredTitle = inferTitle(frontmatter.data, frontmatter.content)
- const headers = extractHeaders(content, ['h2', 'h3'], markdown)
+ let headersToExtract = ['h2', 'h3']
+ if (siteConfig.markdown && siteConfig.markdown.extractHeaders) {
+ headersToExtract = siteConfig.markdown.extractHeaders
+ }
+ const headers = extractHeaders(content, headersToExtract, markdown)
delete frontmatter.content
// diff frontmatter and title, since they are not going to be part of the
diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index e921d46ce2..46a55d52e8 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -154,6 +154,20 @@ module.exports = {
}
```
+### Extract Headers
+
+While preparing the page, headers are extracted from the markdown file and stored in `this.$page.headers`. By default, VuePress will extract `h2` and `h3` elements for you.
+
+You can override the headers it pulls out in your `themeConfig` options.
+
+``` js
+module.exports = {
+ themeConfig: {
+ extractHeaders: [ 'h2', 'h3', 'h4' ]
+ }
+}
+```
+
### Active Header Links
By default, the nested header links and the hash in the URL are updated as the user scrolls to view the different sections of the page. This behavior can be disabled with the following theme config:
@@ -331,7 +345,7 @@ module.exports = {
```
::: warning Note
-Unlike the [built-in search](#built-in-search) engine which works out of the box, [Algolia DocSearch](https://community.algolia.com/docsearch/) requires you to submit your site to them for indexing before it starts working.
+Unlike the [built-in search](#built-in-search) engine which works out of the box, [Algolia DocSearch](https://community.algolia.com/docsearch/) requires you to submit your site to them for indexing before it starts working.
:::
For more options, refer to [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options).
@@ -375,10 +389,10 @@ module.exports = {
themeConfig: {
serviceWorker: {
updatePopup: true // Boolean | Object, default to undefined.
- // If set to true, the default text config will be:
- // updatePopup: {
- // message: "New content is available.",
- // buttonText: "Refresh"
+ // If set to true, the default text config will be:
+ // updatePopup: {
+ // message: "New content is available.",
+ // buttonText: "Refresh"
// }
}
}
diff --git a/vuepress/404.html b/vuepress/404.html
new file mode 100644
index 0000000000..5680f19378
--- /dev/null
+++ b/vuepress/404.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
diff --git a/vuepress/architecture.png b/vuepress/architecture.png
new file mode 100644
index 0000000000..40463fa7ed
Binary files /dev/null and b/vuepress/architecture.png differ
diff --git a/vuepress/assets/css/0.styles.6cc590e0.css b/vuepress/assets/css/0.styles.6cc590e0.css
new file mode 100644
index 0000000000..ac9b3c9795
--- /dev/null
+++ b/vuepress/assets/css/0.styles.6cc590e0.css
@@ -0,0 +1 @@
+.medium-zoom-overlay{z-index:100}.medium-zoom-overlay~img{z-index:101}.go-to-top[data-v-1a383dce]{cursor:pointer;position:fixed;bottom:2rem;right:2.5rem;width:2rem;color:#72cda4;z-index:1}.go-to-top[data-v-1a383dce]:hover{color:#3eaf7c}@media (max-width:959px){.go-to-top[data-v-1a383dce]{display:none}}.fade-enter-active[data-v-1a383dce],.fade-leave-active[data-v-1a383dce]{transition:opacity .3s}.fade-enter[data-v-1a383dce],.fade-leave-to[data-v-1a383dce]{opacity:0}@media screen and (min-width:719px){.content.content-loading>svg{max-width:400px!important}}@media screen and (max-width:719px){.content.content-loading>svg{max-width:320px!important}}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.icon.outbound{color:#aaa;display:inline-block}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#3eaf7c;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #389d70}.home .hero .action-button:hover{background-color:#4abf8a}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.algolia-search-wrapper>span{vertical-align:middle}.algolia-search-wrapper .algolia-autocomplete{line-height:normal}.algolia-search-wrapper .algolia-autocomplete .ds-dropdown-menu{background-color:#fff;border:1px solid #999;border-radius:4px;font-size:16px;margin:6px 0 0;padding:4px;text-align:left}.algolia-search-wrapper .algolia-autocomplete .ds-dropdown-menu:before{border-color:#999}.algolia-search-wrapper .algolia-autocomplete .ds-dropdown-menu [class*=ds-dataset-]{border:none;padding:0}.algolia-search-wrapper .algolia-autocomplete .ds-dropdown-menu .ds-suggestions{margin-top:0}.algolia-search-wrapper .algolia-autocomplete .ds-dropdown-menu .ds-suggestion{border-bottom:1px solid #eaecef}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion--highlight{color:#2c815b}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion{border-color:#eaecef;padding:0}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--category-header{padding:5px 10px;margin-top:0;background:#3eaf7c;color:#fff;font-weight:600}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background:hsla(0,0%,100%,.6)}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--wrapper{padding:0}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--title{font-weight:600;margin-bottom:0;color:#2c3e50}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{vertical-align:top;padding:5px 7px 5px 5px;border-color:#eaecef;background:#f1f3f5}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:after{display:none}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column-text{color:#555}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-footer{border-color:#eaecef}.algolia-search-wrapper .algolia-autocomplete .ds-cursor .algolia-docsearch-suggestion--content{background-color:#e7edf3!important;color:#2c3e50}@media (min-width:719px){.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{float:none;width:150px;min-width:150px;display:table-cell}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content{float:none;display:table-cell;width:100%;vertical-align:top}.algolia-search-wrapper .algolia-autocomplete .algolia-docsearch-suggestion .ds-dropdown-menu{min-width:515px!important}}@media (max-width:719px){.algolia-search-wrapper .ds-dropdown-menu{min-width:calc(100vw - 4rem)!important;max-width:calc(100vw - 4rem)!important}.algolia-search-wrapper .algolia-docsearch-suggestion--wrapper{padding:5px 7px 5px 5px!important}.algolia-search-wrapper .algolia-docsearch-suggestion--subcategory-column{padding:0!important;background:#fff!important}.algolia-search-wrapper .algolia-docsearch-suggestion--subcategory-column-text:after{content:" > ";font-size:10px;line-height:14.4px;display:inline-block;width:5px;margin:-3px 3px 0;vertical-align:middle}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#3eaf7c}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:1.5rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#3eaf7c}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title{display:block}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #3eaf7c;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .dropdown-title .arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ccc;border-bottom:0}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#3eaf7c}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #46bd87}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}}.page-edit,.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit,.page-nav{padding:2rem}}@media (max-width:419px){.page-edit,.page-nav{padding:1.5rem}}.page{padding-bottom:2rem}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#aaa}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#3eaf7c}a.sidebar-link.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar-group:not(.first){margin-top:1em}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading{cursor:auto;color:inherit}.sidebar-heading{color:#999;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:0 1.5rem;margin-top:0;margin-bottom:.5rem}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading:.open .arrow{top:-.18em}.sidebar-group-items{transition:height .1s ease-out;overflow:hidden}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem 0}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar .sidebar-links{padding:1.5rem 0}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar .sidebar-links{padding:1rem 0}}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}#nprogress{pointer-events:none}#nprogress .bar{background:#3eaf7c;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #3eaf7c,0 0 5px #3eaf7c;opacity:1;-webkit-transform:rotate(3deg) translateY(-4px);transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#3eaf7c;border-left-color:#3eaf7c;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.content code .token.deleted{color:#ec5975}.content code .token.inserted{color:#3eaf7c}.content pre,.content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.content pre[class*=language-] code,.content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number,div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}pre.vue-container{border-left-width:.5rem;border-left-style:solid;border-color:#42b983;border-radius:0}pre.vue-container>code{font-size:14px!important}pre.vue-container>code>p{margin:-5px 0 -20px 0}pre.vue-container>code code{background-color:#42b983!important;padding:3px 5px;border-radius:3px;color:#000}pre.vue-container>code em{color:gray;font-weight:light}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.content:not(.custom){padding:2rem}}@media (max-width:419px){.content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:15px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.content:not(.custom)>:first-child{margin-top:3.6rem}.content:not(.custom) a:hover{text-decoration:underline}.content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.content:not(.custom) img{max-width:100%}.content.custom{padding:0;margin:0}.content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#3eaf7c}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:.9rem;color:#999;border-left:.5rem solid #dfe2e5;margin:.5rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.content:not(.custom)>h1,.content:not(.custom)>h2,.content:not(.custom)>h3,.content:not(.custom)>h4,.content:not(.custom)>h5,.content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.content:not(.custom)>h1:first-child,.content:not(.custom)>h2:first-child,.content:not(.custom)>h3:first-child,.content:not(.custom)>h4:first-child,.content:not(.custom)>h5:first-child,.content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.content:not(.custom)>h1:first-child+.custom-block,.content:not(.custom)>h1:first-child+p,.content:not(.custom)>h1:first-child+pre,.content:not(.custom)>h2:first-child+.custom-block,.content:not(.custom)>h2:first-child+p,.content:not(.custom)>h2:first-child+pre,.content:not(.custom)>h3:first-child+.custom-block,.content:not(.custom)>h3:first-child+p,.content:not(.custom)>h3:first-child+pre,.content:not(.custom)>h4:first-child+.custom-block,.content:not(.custom)>h4:first-child+p,.content:not(.custom)>h4:first-child+pre,.content:not(.custom)>h5:first-child+.custom-block,.content:not(.custom)>h5:first-child+p,.content:not(.custom)>h5:first-child+pre,.content:not(.custom)>h6:first-child+.custom-block,.content:not(.custom)>h6:first-child+p,.content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{-webkit-transform:translateX(0);transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.carbon-ads{min-height:102px;padding:1.5rem 1.5rem 0;margin-bottom:-.5rem;font-size:.75rem}.carbon-ads a{color:#444;font-weight:400;display:inline}.carbon-ads .carbon-img{float:left;margin-right:1rem;border:1px solid #eaecef}.carbon-ads .carbon-img img{display:block}.carbon-ads .carbon-poweredby{color:#999;display:block;margin-top:.5em}@media (max-width:719px){.carbon-ads .carbon-img img{width:100px;height:77px}}.bsa-cpc-wrapper{font-size:.95rem;max-width:740px;margin:0 auto;padding:1rem 2rem 0;margin-bottom:-1rem}@media (max-width:419px){.bsa-cpc-wrapper{padding:0 1.5rem}}.bsa-cpc{font-size:.9em;background-color:#f8f8f8;border-radius:6px}.bsa-cpc a._default_{text-align:left;display:block;padding:10px 15px 12px;margin-bottom:20px;color:#666;font-weight:400;line-height:18px}.bsa-cpc a._default_ .default-image img{height:20px;border-radius:3px;vertical-align:middle;position:relative;top:-1px}.bsa-cpc a._default_ .default-title{font-weight:600}.bsa-cpc a._default_ .default-description:after{font-size:.85em;content:"Sponsored";color:#1c90f3;border:1px solid #1c90f3;border-radius:3px;padding:0 4px 1px;margin-left:6px}.bsa-cpc .default-ad{display:none}.bsa-cpc a._default_ .default-description,.bsa-cpc a._default_ .default-image,.bsa-cpc a._default_ .default-title{display:inline;vertical-align:middle;margin-right:6px}.example_2DuOfB6G{color:#41b883}@media screen and (min-width:719px){.line-numbers-mobile-snap{display:none}}@media screen and (max-width:719px){.line-numbers-desktop-snap{display:none}.line-numbers-mobile-snap{max-width:none!important;margin:0 -1.5rem;width:100vw}}.example_1g94-agb{color:#41b883}.toasted-container.compatibility-notification.top-right{right:4vw}.toasted-container.compatibility-notification .toasted{font-weight:400;width:400px;background-color:#3eaf7c;padding:20px 20px;line-height:1.5;display:block;box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}.toasted-container.compatibility-notification .toasted .action.ripple{border:1px solid #fff;color:#fff;float:right;white-space:nowrap;margin:0}.toasted-container.compatibility-notification .toasted code{text-decoration:underline}@media (max-width:719px){.toasted-container.compatibility-notification.top-right{right:5vw}.toasted-container.compatibility-notification .toasted{width:80vw}}.bit-sponsor{font-weight:600;background-color:#f3f6f8;padding:.6em 1.2em;border-radius:8px;display:inline-block;margin:1em 0!important}.bit-sponsor a{color:#999}.bit-sponsor img{height:40px;margin-left:15px}.bit-sponsor img,.bit-sponsor span{vertical-align:middle}.upgrade-path{margin-top:2em;padding:2em;background:rgba(73,195,140,.1);border-radius:2px}.upgrade-path>h4{margin-top:0}.upgrade-path>p:last-child{margin-bottom:0;padding-bottom:0}.svg-container{margin:30px auto;text-align:center}.svg-container>svg{max-width:100%}.badge[data-v-8525d186]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff;margin-right:5px;background-color:#42b983}.badge.middle[data-v-8525d186]{vertical-align:middle}.badge.top[data-v-8525d186]{vertical-align:top}.badge.green[data-v-8525d186],.badge.tip[data-v-8525d186]{background-color:#42b983}.badge.error[data-v-8525d186]{background-color:#da5961}.badge.warn[data-v-8525d186],.badge.warning[data-v-8525d186],.badge.yellow[data-v-8525d186]{background-color:#e7c000}.sw-update-popup[data-v-17203e57]{position:fixed;right:1em;bottom:1em;padding:1em;border:1px solid #3eaf7c;border-radius:3px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5);text-align:center;z-index:2}.sw-update-popup>button[data-v-17203e57]{margin-top:.5em;padding:.25em 2em}.sw-update-popup-enter-active[data-v-17203e57],.sw-update-popup-leave-active[data-v-17203e57]{transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s}.sw-update-popup-enter[data-v-17203e57],.sw-update-popup-leave-to[data-v-17203e57]{opacit:0;-webkit-transform:translateY(50%) scale(.5);transform:translateY(50%) scale(.5)}.searchbox{display:inline-block;position:relative;width:200px;height:32px!important;white-space:nowrap;box-sizing:border-box;visibility:visible!important}.searchbox .algolia-autocomplete{display:block;width:100%;height:100%}.searchbox__wrapper{width:100%;height:100%;z-index:1;position:relative}.searchbox__input{display:inline-block;box-sizing:border-box;transition:box-shadow .4s ease,background .4s ease;border:0;border-radius:16px;box-shadow:inset 0 0 0 1px #ccc;background:#fff!important;padding:0;padding-right:26px;padding-left:32px;width:100%;height:100%;vertical-align:middle;white-space:normal;font-size:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbox__input::-webkit-search-cancel-button,.searchbox__input::-webkit-search-decoration,.searchbox__input::-webkit-search-results-button,.searchbox__input::-webkit-search-results-decoration{display:none}.searchbox__input:hover{box-shadow:inset 0 0 0 1px #b3b3b3}.searchbox__input:active,.searchbox__input:focus{outline:0;box-shadow:inset 0 0 0 1px #aaa;background:#fff}.searchbox__input:-ms-input-placeholder,.searchbox__input::-ms-input-placeholder{color:#aaa}.searchbox__input::-webkit-input-placeholder{color:#aaa}.searchbox__input:-ms-input-placeholder,.searchbox__input::-ms-input-placeholder{color:#aaa}.searchbox__input::placeholder{color:#aaa}.searchbox__submit{position:absolute;top:0;margin:0;border:0;border-radius:16px 0 0 16px;background-color:rgba(69,142,225,0);padding:0;width:32px;height:100%;vertical-align:middle;text-align:center;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;right:inherit;left:0}.searchbox__submit:before{display:inline-block;margin-right:-4px;height:100%;vertical-align:middle;content:""}.searchbox__submit:active,.searchbox__submit:hover{cursor:pointer}.searchbox__submit:focus{outline:0}.searchbox__submit svg{width:14px;height:14px;vertical-align:middle;fill:#6d7e96}.searchbox__reset{display:block;position:absolute;top:8px;right:8px;margin:0;border:0;background:none;cursor:pointer;padding:0;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:rgba(0,0,0,.5)}.searchbox__reset.hide{display:none}.searchbox__reset:focus{outline:0}.searchbox__reset svg{display:block;margin:4px;width:8px;height:8px}.searchbox__input:valid~.searchbox__reset{display:block;-webkit-animation-name:a;animation-name:a;-webkit-animation-duration:.15s;animation-duration:.15s}@-webkit-keyframes a{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu{right:0!important;left:inherit!important}.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before{right:48px}.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu{left:0!important;right:inherit!important}.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu:before{left:48px}.algolia-autocomplete .ds-dropdown-menu{top:-6px;border-radius:4px;margin:6px 0 0;padding:0;text-align:left;height:auto;position:relative;background:transparent;border:none;z-index:1;max-width:600px;min-width:500px;box-shadow:0 1px 0 0 rgba(0,0,0,.2),0 2px 3px 0 rgba(0,0,0,.1)}.algolia-autocomplete .ds-dropdown-menu:before{display:block;position:absolute;content:"";width:14px;height:14px;background:#fff;z-index:2;top:-7px;border-top:1px solid #d9d9d9;border-right:1px solid #d9d9d9;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border-radius:2px}.algolia-autocomplete .ds-dropdown-menu .ds-suggestions{position:relative;z-index:2;margin-top:8px}.algolia-autocomplete .ds-dropdown-menu .ds-suggestion{cursor:pointer}.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple,.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content{background-color:rgba(69,142,225,.05)}.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-]{position:relative;border:1px solid #d9d9d9;background:#fff;border-radius:4px;overflow:auto;padding:0 8px 8px}.algolia-autocomplete .ds-dropdown-menu *{box-sizing:border-box}.algolia-autocomplete .algolia-docsearch-suggestion{position:relative;padding:0 8px;background:#fff;color:#02060c;overflow:hidden}.algolia-autocomplete .algolia-docsearch-suggestion--highlight{color:#174d8c;background:rgba(143,187,237,.1);padding:.1em .05em}.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight{color:inherit;background:inherit}.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{padding:0 0 1px;background:inherit;box-shadow:inset 0 -2px 0 0 rgba(69,142,225,.8);color:inherit}.algolia-autocomplete .algolia-docsearch-suggestion--content{display:block;float:right;width:70%;position:relative;padding:5.33333px 0 5.33333px 10.66667px;cursor:pointer}.algolia-autocomplete .algolia-docsearch-suggestion--content:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;left:-1px}.algolia-autocomplete .algolia-docsearch-suggestion--category-header{position:relative;border-bottom:1px solid #ddd;display:none;margin-top:8px;padding:4px 0;font-size:1em;color:#33363d}.algolia-autocomplete .algolia-docsearch-suggestion--wrapper{width:100%;float:left;padding:8px 0 0}.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column{float:left;width:30%;padding-left:0;text-align:right;position:relative;padding:5.33333px 10.66667px;color:#a4a7ae;font-size:.9em;word-wrap:break-word}.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;right:0}.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight{background-color:inherit;color:inherit}.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline{display:none}.algolia-autocomplete .algolia-docsearch-suggestion--title{margin-bottom:4px;color:#02060c;font-size:.9em;font-weight:700}.algolia-autocomplete .algolia-docsearch-suggestion--text{display:block;line-height:1.2em;font-size:.85em;color:#63676d}.algolia-autocomplete .algolia-docsearch-suggestion--no-results{width:100%;padding:8px 0;text-align:center;font-size:1.2em}.algolia-autocomplete .algolia-docsearch-suggestion--no-results:before{display:none}.algolia-autocomplete .algolia-docsearch-suggestion code{padding:1px 5px;font-size:90%;border:none;color:#222;background-color:#ebebeb;border-radius:3px;font-family:Menlo,Monaco,Consolas,Courier New,monospace}.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight{background:none}.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header,.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary{display:block}@media (min-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:block}}@media (max-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:inline-block;width:auto;float:left;color:#02060c;font-size:.9em;font-weight:700;text-align:left;padding:0;opacity:.5}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:before{display:none}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:after{content:"|"}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content{display:inline-block;width:auto;text-align:left;float:left;padding:0}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content:before{display:none}}.algolia-autocomplete .suggestion-layout-simple.algolia-docsearch-suggestion{border-bottom:1px solid #eee;padding:8px;margin:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content{width:100%;padding:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content:before{display:none}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header{margin:0;padding:0;display:block;width:100%;border:none}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl0,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1{opacity:.6;font-size:.85em}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1:before{background-image:url('data:image/svg+xml;utf8,');content:"";width:10px;height:10px;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;box-shadow:none}.algolia-autocomplete .algolia-docsearch-footer{width:110px;height:20px;z-index:3;margin-top:10.66667px;float:right;font-size:0;line-height:0}.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block}
\ No newline at end of file
diff --git a/vuepress/assets/img/search.83621669.svg b/vuepress/assets/img/search.83621669.svg
new file mode 100644
index 0000000000..03d83913e8
--- /dev/null
+++ b/vuepress/assets/img/search.83621669.svg
@@ -0,0 +1 @@
+
diff --git a/vuepress/assets/js/10.90b6f866.js b/vuepress/assets/js/10.90b6f866.js
new file mode 100644
index 0000000000..cb761c886c
--- /dev/null
+++ b/vuepress/assets/js/10.90b6f866.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{207:function(e,t,o){"use strict";o.r(t);var s={props:["slot-key"],mounted:function(){this.$nextTick(function(){this.$vuepress.$emit("AsyncMarkdownContentMounted",this.slotKey)})}},v=o(5),n=Object(v.a)(s,function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("ContentSlotsDistributor",{attrs:{"slot-key":e.slotKey}},[o("h1",{attrs:{id:"directory-structure"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#directory-structure","aria-hidden":"true"}},[e._v("#")]),e._v(" Directory Structure")]),e._v(" "),o("p",[e._v("VuePress follows the principle of "),o("strong",[e._v('"Convention is better than configuration"')]),e._v(", the recommended document structure is as follows:")]),e._v(" "),o("pre",{staticClass:"vue-container"},[o("code",[o("p",[e._v(".\n├── docs\n│ ├── .vuepress "),o("em",[e._v("("),o("strong",[e._v("Optional")]),e._v(")")]),e._v("\n│ │ ├── "),o("code",[e._v("components")]),e._v(" "),o("em",[e._v("("),o("strong",[e._v("Optional")]),e._v(")")]),e._v("\n│ │ ├── "),o("code",[e._v("theme")]),e._v(" "),o("em",[e._v("("),o("strong",[e._v("Optional")]),e._v(")")]),e._v("\n│ │ │ └── Layout.vue\n│ │ ├── "),o("code",[e._v("public")]),e._v(" "),o("em",[e._v("("),o("strong",[e._v("Optional")]),e._v(")")]),e._v("\n│ │ ├── "),o("code",[e._v("styles")]),e._v(" "),o("em",[e._v("("),o("strong",[e._v("Optional")]),e._v(")")]),e._v("\n│ │ │ ├── index.styl\n│ │ │ └── palette.styl\n│ │ ├── "),o("code",[e._v("templates")]),e._v(" "),o("em",[e._v("("),o("strong",[e._v("Optional, Danger Zone")]),e._v(")")]),e._v("\n│ │ │ ├── dev.html\n│ │ │ └── ssr.html\n│ │ ├── "),o("code",[e._v("config.js")]),e._v(" "),o("em",[e._v("("),o("strong",[e._v("Optional")]),e._v(")")]),e._v("\n│ │ └── "),o("code",[e._v("enhanceApp.js")]),e._v(" "),o("em",[e._v("("),o("strong",[e._v("Optional")]),e._v(")")]),e._v("\n│ │ \n│ ├── README.md\n│ ├── guide\n│ │ └── README.md\n│ └── config.md\n│ \n└── package.json")]),e._v("\n")])]),o("div",{staticClass:"warning custom-block"},[o("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),o("p",[e._v("Please note the capitalization of the directory name.")])]),e._v(" "),o("ul",[o("li",[o("code",[e._v("docs/.vuepress")]),e._v(": It is used to store global configuration, components, static resources, etc.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/components")]),e._v(": The Vue components in this directory will be automatically registered as global components.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/theme")]),e._v(": Used to store local theme.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/styles")]),e._v(": Stores style related files.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/styles/index.styl")]),e._v(": Automatically applied global style files, generated at the ending of the CSS file, have a higher priority than the default style.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/styles/palette.styl")]),e._v(": The palette is used to override the default color constants and to set the color constants of Stylus.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/public")]),e._v(": Static resource directory.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/templates")]),e._v(": Store HTML template files.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/templates/dev.html")]),e._v(": HTML template file for development environment.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/templates/ssr.html")]),e._v(": Vue SSR based HTML template file in the built time.")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/config.js")]),e._v(": Entry file of configuration, can also be "),o("code",[e._v("yml")]),e._v(" or "),o("code",[e._v("toml")]),e._v(".")]),e._v(" "),o("li",[o("code",[e._v("docs/.vuepress/enhanceApp.js")]),e._v(": App level enhancement.")])]),e._v(" "),o("div",{staticClass:"warning custom-block"},[o("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),o("p",[e._v("When customizing "),o("code",[e._v("templates/ssr.html")]),e._v(", or "),o("code",[e._v("templates/dev.html")]),e._v(", it is best to modify it on the basis of the "),o("a",{attrs:{href:"https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/core/lib/app/index.dev.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("default template files"),o("OutboundLink")],1),e._v(", otherwise it may cause a build failure.")])]),e._v(" "),o("h2",{attrs:{id:"default-page-routing"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#default-page-routing","aria-hidden":"true"}},[e._v("#")]),e._v(" Default Page Routing")]),e._v(" "),o("p",[e._v("For the above directory structure, the default page routing paths are as follows:")]),e._v(" "),o("table",[o("thead",[o("tr",[o("th",[e._v("Relative Path")]),e._v(" "),o("th",[e._v("Page Routing")])])]),e._v(" "),o("tbody",[o("tr",[o("td",[o("code",[e._v("/README.md")])]),e._v(" "),o("td",[o("code",[e._v("/")])])]),e._v(" "),o("tr",[o("td",[o("code",[e._v("/guide/README.md")])]),e._v(" "),o("td",[o("code",[e._v("/guide/")])])]),e._v(" "),o("tr",[o("td",[o("code",[e._v("/config.md")])]),e._v(" "),o("td",[o("code",[e._v("/config.html")])])])])]),e._v(" "),o("p",[o("strong",[e._v("Also see:")])]),e._v(" "),o("ul",[o("li",[o("router-link",{attrs:{to:"./../config/"}},[e._v("Config")])],1),e._v(" "),o("li",[o("router-link",{attrs:{to:"./../theme/"}},[e._v("Theme")])],1),e._v(" "),o("li",[o("router-link",{attrs:{to:"./../theme/default-theme-config.html"}},[e._v("Default Theme Config")])],1)])])},[],!1,null,null,null);t.default=n.exports}}]);
\ No newline at end of file
diff --git a/vuepress/assets/js/11.bb178c57.js b/vuepress/assets/js/11.bb178c57.js
new file mode 100644
index 0000000000..6f246a436c
--- /dev/null
+++ b/vuepress/assets/js/11.bb178c57.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{208:function(t,e,a){"use strict";a.r(e);var r={props:["slot-key"],mounted:function(){this.$nextTick(function(){this.$vuepress.$emit("AsyncMarkdownContentMounted",this.slotKey)})}},s=a(5),n=Object(s.a)(r,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.slotKey}},[a("h1",{attrs:{id:"front-matter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#front-matter","aria-hidden":"true"}},[t._v("#")]),t._v(" Front Matter")]),t._v(" "),a("p",[t._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"}},[t._v("gray-matter"),a("OutboundLink")],1),t._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:")]),t._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{attrs:{class:"token hr punctuation"}},[t._v("---")]),t._v("\ntitle: Blogging Like a Hacker\n"),a("span",{attrs:{class:"token title important"}},[t._v("lang: en-US\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("---")])]),t._v("\n")])])]),a("p",[t._v("Between these triple-dashed lines, you can set predefined variables (see "),a("a",{attrs:{href:"#predefined-variables"}},[t._v("below")]),t._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:"./global-computed.html#frontmatter"}},[t._v("$frontmatter")])],1),t._v(" at the rest of the page, plus all custom and theming components.")]),t._v(" "),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("Front matter variables are "),a("strong",[t._v("optional")]),t._v(" in VuePress.")])]),t._v(" "),a("h2",{attrs:{id:"alternative-front-matter-formats"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alternative-front-matter-formats","aria-hidden":"true"}},[t._v("#")]),t._v(" Alternative Front Matter Formats")]),t._v(" "),a("p",[t._v("In addition, VuePress also supports JSON or "),a("a",{attrs:{href:"https://github.com/toml-lang/toml",target:"_blank",rel:"noopener noreferrer"}},[t._v("TOML"),a("OutboundLink")],1),t._v(" front matter.")]),t._v(" "),a("p",[t._v("JSON front matter needs to start and end in curly braces:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v('---\n{\n "title": "Blogging Like a Hacker",\n "lang": "en-US"\n}\n---\n')])])]),a("p",[t._v("TOML front matter needs to be explicitly marked as TOML:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._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","aria-hidden":"true"}},[t._v("#")]),t._v(" Predefined Variables")]),t._v(" "),a("h3",{attrs:{id:"title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#title","aria-hidden":"true"}},[t._v("#")]),t._v(" title")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("string")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("h1_title || siteConfig.title")])])]),t._v(" "),a("p",[t._v("Title of current page.")]),t._v(" "),a("h3",{attrs:{id:"lang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lang","aria-hidden":"true"}},[t._v("#")]),t._v(" lang")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("string")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("en-US")])])]),t._v(" "),a("p",[t._v("Language of current page.")]),t._v(" "),a("h3",{attrs:{id:"description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[t._v("#")]),t._v(" description")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("string")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("siteConfig.description")])])]),t._v(" "),a("p",[t._v("Description of current page.")]),t._v(" "),a("h3",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[t._v("#")]),t._v(" layout")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("string")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("Layout")])])]),t._v(" "),a("p",[t._v("Set the layout component of the current page.")]),t._v(" "),a("h3",{attrs:{id:"permalink"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#permalink","aria-hidden":"true"}},[t._v("#")]),t._v(" permalink")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("string")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("siteConfig.permalink")])])]),t._v(" "),a("p",[t._v("Refer to: "),a("router-link",{attrs:{to:"./permalinks.html"}},[t._v("Permalinks")]),t._v(".")],1),t._v(" "),a("h3",{attrs:{id:"metatitle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metatitle","aria-hidden":"true"}},[t._v("#")]),t._v(" metaTitle")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("string")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("`${page.title} | ${siteConfig.title}`")])])]),t._v(" "),a("p",[t._v("Override the default meta title.")]),t._v(" "),a("h3",{attrs:{id:"meta"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#meta","aria-hidden":"true"}},[t._v("#")]),t._v(" meta")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("array")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("undefined")])])]),t._v(" "),a("p",[t._v("Specify extra meta tags to be injected:")]),t._v(" "),a("div",{staticClass:"language-yaml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-yaml"}},[a("code",[a("span",{attrs:{class:"token punctuation"}},[t._v("---")]),t._v("\n"),a("span",{attrs:{class:"token key atrule"}},[t._v("meta")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("-")]),t._v(" "),a("span",{attrs:{class:"token key atrule"}},[t._v("name")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" description\n "),a("span",{attrs:{class:"token key atrule"}},[t._v("content")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hello\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("-")]),t._v(" "),a("span",{attrs:{class:"token key atrule"}},[t._v("name")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" keywords\n "),a("span",{attrs:{class:"token key atrule"}},[t._v("content")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" super duper SEO\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("---")]),t._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","aria-hidden":"true"}},[t._v("#")]),t._v(" Predefined Variables Powered By Default Theme")]),t._v(" "),a("h3",{attrs:{id:"navbar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navbar","aria-hidden":"true"}},[t._v("#")]),t._v(" navbar")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("boolean")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("undefined")])])]),t._v(" "),a("p",[t._v("See: "),a("router-link",{attrs:{to:"./../theme/default-theme-config.html#disable-the-navbar"}},[t._v("Default Theme Config > Disable the Navbar")]),t._v(".")],1),t._v(" "),a("h3",{attrs:{id:"sidebar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sidebar","aria-hidden":"true"}},[t._v("#")]),t._v(" sidebar")]),t._v(" "),a("ul",[a("li",[t._v("Type: "),a("code",[t._v("boolean|'auto'")])]),t._v(" "),a("li",[t._v("Default: "),a("code",[t._v("undefined")])])]),t._v(" "),a("p",[t._v("See: "),a("router-link",{attrs:{to:"./../theme/default-theme-config.html#sidebar"}},[t._v("Default Theme Config > Sidebar")]),t._v(".")],1)])},[],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/vuepress/assets/js/12.1501540a.js b/vuepress/assets/js/12.1501540a.js
new file mode 100644
index 0000000000..c9cab3ac29
--- /dev/null
+++ b/vuepress/assets/js/12.1501540a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{209:function(s,t,a){"use strict";a.r(t);var e={props:["slot-key"],mounted:function(){this.$nextTick(function(){this.$vuepress.$emit("AsyncMarkdownContentMounted",this.slotKey)})}},n=a(5),o=Object(n.a)(e,function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":s.slotKey}},[a("h1",{attrs:{id:"getting-started"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[s._v("#")]),s._v(" Getting Started")]),s._v(" "),a("div",{staticClass:"warning custom-block"},[a("p",{staticClass:"custom-block-title"},[s._v("COMPATIBILITY NOTE")]),s._v(" "),a("p",[s._v("VuePress requires Node.js >= 8.")])]),s._v(" "),a("h2",{attrs:{id:"global-installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-installation","aria-hidden":"true"}},[s._v("#")]),s._v(" Global Installation")]),s._v(" "),a("p",[s._v("If you just want to play around with VuePress, you can install it globally:")]),s._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[a("span",{attrs:{class:"token comment"}},[s._v("# install globally")]),s._v("\nyarn global add vuepress "),a("span",{attrs:{class:"token comment"}},[s._v("# OR npm install -g vuepress")]),s._v("\n\n"),a("span",{attrs:{class:"token comment"}},[s._v("# create a markdown file")]),s._v("\n"),a("span",{attrs:{class:"token keyword"}},[s._v("echo")]),s._v(" "),a("span",{attrs:{class:"token string"}},[s._v("'# Hello VuePress'")]),s._v(" "),a("span",{attrs:{class:"token operator"}},[s._v(">")]),s._v(" README.md\n\n"),a("span",{attrs:{class:"token comment"}},[s._v("# start writing")]),s._v("\nvuepress dev\n\n"),a("span",{attrs:{class:"token comment"}},[s._v("# build")]),s._v("\nvuepress build\n")])])]),a("h2",{attrs:{id:"inside-an-existing-project"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inside-an-existing-project","aria-hidden":"true"}},[s._v("#")]),s._v(" Inside an Existing Project")]),s._v(" "),a("p",[s._v("If you have an existing project and would like to keep documentation inside the project, you should install VuePress as a local dependency. This setup also allows you to use CI or services like Netlify for automatic deployment on push.")]),s._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[a("span",{attrs:{class:"token comment"}},[s._v("# install as a local dependency")]),s._v("\nyarn add -D vuepress "),a("span",{attrs:{class:"token comment"}},[s._v("# OR npm install -D vuepress")]),s._v("\n\n"),a("span",{attrs:{class:"token comment"}},[s._v("# create a docs directory")]),s._v("\n"),a("span",{attrs:{class:"token function"}},[s._v("mkdir")]),s._v(" docs\n"),a("span",{attrs:{class:"token comment"}},[s._v("# create a markdown file")]),s._v("\n"),a("span",{attrs:{class:"token keyword"}},[s._v("echo")]),s._v(" "),a("span",{attrs:{class:"token string"}},[s._v("'# Hello VuePress'")]),s._v(" "),a("span",{attrs:{class:"token operator"}},[s._v(">")]),s._v(" docs/README.md\n")])])]),a("div",{staticClass:"warning custom-block"},[a("p",{staticClass:"custom-block-title"},[s._v("WARNING")]),s._v(" "),a("p",[s._v("It is currently recommended to use "),a("a",{attrs:{href:"https://yarnpkg.com/en/",target:"_blank",rel:"noopener noreferrer"}},[s._v("Yarn"),a("OutboundLink")],1),s._v(" instead of npm when installing VuePress into an existing project that has webpack 3.x as a dependency. Npm fails to generate the correct dependency tree in this case.")])]),s._v(" "),a("p",[s._v("Then, add some scripts to "),a("code",[s._v("package.json")]),s._v(":")]),s._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),a("span",{attrs:{class:"token property"}},[s._v('"scripts"')]),a("span",{attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),a("span",{attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),a("span",{attrs:{class:"token property"}},[s._v('"docs:dev"')]),a("span",{attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),a("span",{attrs:{class:"token string"}},[s._v('"vuepress dev docs"')]),a("span",{attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n "),a("span",{attrs:{class:"token property"}},[s._v('"docs:build"')]),a("span",{attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),a("span",{attrs:{class:"token string"}},[s._v('"vuepress build docs"')]),s._v("\n "),a("span",{attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),a("p",[s._v("You can now start writing with:")]),s._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[s._v("yarn docs:dev "),a("span",{attrs:{class:"token comment"}},[s._v("# OR npm run docs:dev")]),s._v("\n")])])]),a("p",[s._v("To generate static assets, run:")]),s._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[s._v("yarn docs:build "),a("span",{attrs:{class:"token comment"}},[s._v("# Or npm run docs:build")]),s._v("\n")])])]),a("p",[s._v("By default the built files will be in "),a("code",[s._v(".vuepress/dist")]),s._v(", which can be configured via the "),a("code",[s._v("dest")]),s._v(" field in "),a("code",[s._v(".vuepress/config.js")]),s._v(". The built files can be deployed to any static file server. See "),a("router-link",{attrs:{to:"./deploy.html"}},[s._v("Deployment Guide")]),s._v(" for guides on deploying to popular services.")],1)])},[],!1,null,null,null);t.default=o.exports}}]);
\ No newline at end of file
diff --git a/vuepress/assets/js/13.6e978c39.js b/vuepress/assets/js/13.6e978c39.js
new file mode 100644
index 0000000000..5dd71f9747
--- /dev/null
+++ b/vuepress/assets/js/13.6e978c39.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{210:function(t,s,a){"use strict";a.r(s);var n={props:["slot-key"],mounted:function(){this.$nextTick(function(){this.$vuepress.$emit("AsyncMarkdownContentMounted",this.slotKey)})}},e=a(5),r=Object(e.a)(n,function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.slotKey}},[a("h1",{attrs:{id:"global-computed"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-computed","aria-hidden":"true"}},[t._v("#")]),t._v(" Global Computed")]),t._v(" "),a("p",[t._v("In VuePress, some core "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/computed.html#Computed-Properties",target:"_blank",rel:"noopener noreferrer"}},[t._v("computed"),a("OutboundLink")],1),t._v(" properties are built in for use by "),a("router-link",{attrs:{to:"./../theme/default-theme-config.html"}},[t._v("default theme")]),t._v(" or custom themes.")],1),t._v(" "),a("h2",{attrs:{id:"site"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#site","aria-hidden":"true"}},[t._v("#")]),t._v(" $site")]),t._v(" "),a("p",[t._v("This is the "),a("code",[t._v("$site")]),t._v(" value of the website you see now:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"title"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"description"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"Vue 驱动的静态网站生成器"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"base"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"/"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"pages"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"lastUpdated"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1524027677000")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"path"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"/"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"title"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"VuePress"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"page"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#page","aria-hidden":"true"}},[t._v("#")]),t._v(" $page")]),t._v(" "),a("p",[t._v("This is the "),a("code",[t._v("$page")]),t._v(" value of the page you see now:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"title"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"Global Computed"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"frontmatter"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"regularPath"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"/miscellaneous/global-computed.html"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"key"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"v-d4cbeb69eff3d"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"path"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"/miscellaneous/global-computed.html"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"headers"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"level"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("2")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"title"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"$site"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"slug"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"site"')]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"level"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("2")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"title"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"$page"')]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token property"}},[t._v('"slug"')]),a("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v('"$page"')]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"frontmatter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#frontmatter","aria-hidden":"true"}},[t._v("#")]),t._v(" $frontmatter")]),t._v(" "),a("p",[t._v("Reference of "),a("a",{attrs:{href:"#page"}},[t._v("$page")]),t._v(".frontmatter.")]),t._v(" "),a("h2",{attrs:{id:"lang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lang","aria-hidden":"true"}},[t._v("#")]),t._v(" $lang")]),t._v(" "),a("p",[t._v("The language of the current page. default value is "),a("code",[t._v("en-US")]),t._v(".")]),t._v(" "),a("p",[a("strong",[t._v("Also see:")])]),t._v(" "),a("ul",[a("li",[a("router-link",{attrs:{to:"./../guide/i18n.html"}},[t._v("Internationalization")])],1)]),t._v(" "),a("h2",{attrs:{id:"localepath"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#localepath","aria-hidden":"true"}},[t._v("#")]),t._v(" $localePath")]),t._v(" "),a("p",[t._v("The locale path prefix for the current page, the default value is "),a("code",[t._v("/")]),t._v(".")]),t._v(" "),a("p",[a("strong",[t._v("Also see:")])]),t._v(" "),a("ul",[a("li",[a("router-link",{attrs:{to:"./../guide/i18n.html"}},[t._v("Internationalization")])],1)]),t._v(" "),a("h2",{attrs:{id:"title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#title","aria-hidden":"true"}},[t._v("#")]),t._v(" $title")]),t._v(" "),a("p",[t._v("Value of the "),a("code",[t._v("")]),t._v(" label used for the current page.")]),t._v(" "),a("h2",{attrs:{id:"description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[t._v("#")]),t._v(" $description")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("content")]),t._v(" value of the "),a("code",[t._v('')]),t._v(" for the current page.")]),t._v(" "),a("h2",{attrs:{id:"themeconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#themeconfig","aria-hidden":"true"}},[t._v("#")]),t._v(" $themeConfig")]),t._v(" "),a("p",[t._v("i.e. "),a("code",[t._v("siteConfig.themeConfig")]),t._v("。")])])},[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/vuepress/assets/js/14.136ae6a3.js b/vuepress/assets/js/14.136ae6a3.js
new file mode 100644
index 0000000000..810d7ce351
--- /dev/null
+++ b/vuepress/assets/js/14.136ae6a3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{211:function(t,s,n){"use strict";n.r(s);var a={props:["slot-key"],mounted:function(){this.$nextTick(function(){this.$vuepress.$emit("AsyncMarkdownContentMounted",this.slotKey)})}},e=n(5),o=Object(e.a)(a,function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.slotKey}},[n("h1",{attrs:{id:"internationalization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[t._v("#")]),t._v(" Internationalization")]),t._v(" "),n("h2",{attrs:{id:"site-level-i18n-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#site-level-i18n-config","aria-hidden":"true"}},[t._v("#")]),t._v(" Site Level i18n Config")]),t._v(" "),n("p",[t._v("To leverage multi-language support in VuePress, you first need to use the following file structure:")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("docs\n├─ README.md\n├─ foo.md\n├─ nested\n│ └─ README.md\n└─ zh\n ├─ README.md\n ├─ foo.md\n └─ nested\n └─ README.md\n")])])]),n("p",[t._v("Then, specify the "),n("code",[t._v("locales")]),t._v(" option in "),n("code",[t._v(".vuepress/config.js")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("module"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n locales"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// The key is the path for the locale to be nested under.")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// As a special case, the default locale can use '/' as its path.")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'/'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n lang"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'en-US'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// this will be set as the lang attribute on ")]),t._v("\n title"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'VuePress'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n description"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Vue-powered Static Site Generator'")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'/zh/'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n lang"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'zh-CN'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n title"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'VuePress'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n description"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Vue 驱动的静态网站生成器'")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("If a locale does not have "),n("code",[t._v("title")]),t._v(" or "),n("code",[t._v("description")]),t._v(" VuePress will fallback to the root level values. You can omit the root level "),n("code",[t._v("title")]),t._v(" and "),n("code",[t._v("description")]),t._v(" as long as they are provided in each locale.")]),t._v(" "),n("h2",{attrs:{id:"default-theme-i18n-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#default-theme-i18n-config","aria-hidden":"true"}},[t._v("#")]),t._v(" Default Theme i18n Config")]),t._v(" "),n("p",[t._v("The default theme also has built-in i18n support via "),n("code",[t._v("themeConfig.locales")]),t._v(", using the same "),n("code",[t._v("{ path: config }")]),t._v(" format. Each locale can have its own "),n("router-link",{attrs:{to:"./../theme/default-theme-config.html#navbar-links"}},[t._v("nav")]),t._v(" and "),n("router-link",{attrs:{to:"./../theme/default-theme-config.html#sidebar"}},[t._v("sidebar")]),t._v(" config, in addition to a few other text values used across the site:")],1),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("module"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n locales"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n themeConfig"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n locales"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'/'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// text for the language dropdown")]),t._v("\n selectText"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Languages'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// label for this locale in the language dropdown")]),t._v("\n label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'English'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// text for the edit-on-github link")]),t._v("\n editLinkText"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Edit this page on GitHub'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// config for Service Worker ")]),t._v("\n serviceWorker"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n updatePopup"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n message"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v('"New content is available."')]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttonText"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v('"Refresh"')]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// algolia docsearch options for current locale")]),t._v("\n algolia"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n nav"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" text"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Nested'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" link"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'/nested/'")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sidebar"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'/'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token comment"}},[t._v("/* ... */")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'/nested/'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token comment"}},[t._v("/* ... */")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'/zh/'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectText"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'选择语言'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'简体中文'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n editLinkText"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'在 GitHub 上编辑此页'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n serviceWorker"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n updatePopup"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n message"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v('"发现新内容可用."')]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttonText"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v('"刷新"')]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n nav"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" text"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'嵌套'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" link"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'/zh/nested/'")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n algolia"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sidebar"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'/zh/'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token comment"}},[t._v("/* ... */")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'/zh/nested/'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token comment"}},[t._v("/* ... */")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])},[],!1,null,null,null);s.default=o.exports}}]);
\ No newline at end of file
diff --git a/vuepress/assets/js/15.0c645d16.js b/vuepress/assets/js/15.0c645d16.js
new file mode 100644
index 0000000000..7e04048d35
--- /dev/null
+++ b/vuepress/assets/js/15.0c645d16.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{212:function(t,a,s){"use strict";s.r(a);var n={props:["slot-key"],mounted:function(){this.$nextTick(function(){this.$vuepress.$emit("AsyncMarkdownContentMounted",this.slotKey)})}},e=s(5),o=Object(e.a)(n,function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.slotKey}},[s("h1",{attrs:{id:"markdown-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#markdown-slot","aria-hidden":"true"}},[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","aria-hidden":"true"}},[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.), and 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 pre-compile differences.")]),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","aria-hidden":"true"}},[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",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("name"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("Here 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.")])]),t._v(" "),s("h2",{attrs:{id:"default-slot-content"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#default-slot-content","aria-hidden":"true"}},[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",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("h2",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[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",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("header"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("header")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("main")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Content")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("slot-key")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("footer"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("footer")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("div")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("template")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("If the markdown content of a page's 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",{attrs:{class:"token title important"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("#")]),t._v(" Here might be a page title")]),t._v("\n:::\n\n"),s("span",{attrs:{class:"token list punctuation"}},[t._v("-")]),t._v(" A Paragraph\n"),s("span",{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",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("header")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content header"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here might be a page title"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("h1")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("div")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("header")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("main")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content default"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("A Paragraph"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("li")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Another Paragraph"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("li")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("ul")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("div")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("main")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("footer")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content footer"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Here's some contact info"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("p")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("div")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("footer")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("div")]),s("span",{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=o.exports}}]);
\ No newline at end of file
diff --git a/vuepress/assets/js/16.8741a547.js b/vuepress/assets/js/16.8741a547.js
new file mode 100644
index 0000000000..8758d9a190
--- /dev/null
+++ b/vuepress/assets/js/16.8741a547.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{151:function(t,a,s){},186:function(t,a,s){"use strict";var n=s(151);s.n(n).a},213:function(t,a,s){"use strict";s.r(a);var n={props:["slot-key"],mounted:function(){this.$nextTick(function(){this.$vuepress.$emit("AsyncMarkdownContentMounted",this.slotKey)})}},e=(s(186),s(5)),r=Object(e.a)(n,function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.slotKey}},[s("h1",{attrs:{id:"markdown-extensions"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#markdown-extensions","aria-hidden":"true"}},[t._v("#")]),t._v(" Markdown Extensions")]),t._v(" "),s("h2",{attrs:{id:"header-anchors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#header-anchors","aria-hidden":"true"}},[t._v("#")]),t._v(" Header Anchors")]),t._v(" "),s("p",[t._v("Headers automatically get anchor links applied. Rendering of anchors can be configured using the "),s("router-link",{attrs:{to:"./../config/#markdown-anchor"}},[s("code",[t._v("markdown.anchor")])]),t._v(" option.")],1),t._v(" "),s("h2",{attrs:{id:"links"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#links","aria-hidden":"true"}},[t._v("#")]),t._v(" Links")]),t._v(" "),s("h3",{attrs:{id:"internal-links"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#internal-links","aria-hidden":"true"}},[t._v("#")]),t._v(" Internal Links")]),t._v(" "),s("p",[t._v("Inbound links ending in "),s("code",[t._v(".md")]),t._v(" or "),s("code",[t._v(".html")]),t._v(" are converted to "),s("code",[t._v("")]),t._v(" for SPA navigation.")]),t._v(" "),s("p",[t._v("Each sub-directory in your static site should contain a "),s("code",[t._v("README.md")]),t._v(". It will automatically be converted to "),s("code",[t._v("index.html")]),t._v(".")]),t._v(" "),s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("When writing the relative path to a directory's "),s("code",[t._v("index.html")]),t._v(", don't forget to close it off with a "),s("code",[t._v("/")]),t._v(", otherwise you will get a 404. For example, use "),s("code",[t._v("/config/")]),t._v(" instead of "),s("code",[t._v("/config")]),t._v(".")])]),t._v(" "),s("p",[t._v("If you want to link to another markdown file within a directory, remember to:")]),t._v(" "),s("ol",[s("li",[t._v("Append it with either "),s("code",[t._v(".html")]),t._v(" or "),s("code",[t._v(".md")])]),t._v(" "),s("li",[t._v("Make sure the case matches since the path is case-sensitive")])]),t._v(" "),s("h4",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[t._v("#")]),t._v(" Example")]),t._v(" "),s("p",[t._v("Given the following directory structure:")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v(".\n├─ README.md\n├─ foo\n│ ├─ README.md\n│ ├─ one.md\n│ └─ two.md\n└─ bar\n ├─ README.md\n ├─ three.md\n └─ four.md\n")])])]),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[s("span",{attrs:{class:"token url"}},[t._v("[Home](/)")]),t._v(" "),s("span",{attrs:{class:"token comment"}},[t._v("\x3c!-- Sends the user to the root README.md --\x3e")]),t._v("\n"),s("span",{attrs:{class:"token url"}},[t._v("[foo](/foo/)")]),t._v(" "),s("span",{attrs:{class:"token comment"}},[t._v("\x3c!-- Sends the user to index.html of directory foo --\x3e")]),t._v("\n"),s("span",{attrs:{class:"token url"}},[t._v("[foo heading anchor](/foo/#heading)")]),t._v(" "),s("span",{attrs:{class:"token comment"}},[t._v("\x3c!-- Anchors user to a heading in the foo README file --\x3e")]),t._v("\n"),s("span",{attrs:{class:"token url"}},[t._v("[foo - one](/foo/one.html)")]),t._v(" "),s("span",{attrs:{class:"token comment"}},[t._v("\x3c!-- You can append .html --\x3e")]),t._v("\n"),s("span",{attrs:{class:"token url"}},[t._v("[foo - two](/foo/two.md)")]),t._v(" "),s("span",{attrs:{class:"token comment"}},[t._v("\x3c!-- Or you can append .md --\x3e")]),t._v("\n")])])]),s("h3",{attrs:{id:"external-links"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#external-links","aria-hidden":"true"}},[t._v("#")]),t._v(" External Links")]),t._v(" "),s("p",[t._v("Outbound links automatically gets "),s("code",[t._v('target="_blank" rel="noopener noreferrer"')]),t._v(":")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://vuejs.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("vuejs.org"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/vuejs/vuepress",target:"_blank",rel:"noopener noreferrer"}},[t._v("VuePress on GitHub"),s("OutboundLink")],1)])]),t._v(" "),s("p",[t._v("You can customize the attributes added to external links by setting "),s("router-link",{attrs:{to:"./../config/#markdown-externallinks"}},[t._v("config.markdown.externalLinks")]),t._v(".")],1),t._v(" "),s("h2",{attrs:{id:"front-matter"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#front-matter","aria-hidden":"true"}},[t._v("#")]),t._v(" Front Matter")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://jekyllrb.com/docs/frontmatter/",target:"_blank",rel:"noopener noreferrer"}},[t._v("YAML front matter"),s("OutboundLink")],1),t._v(" is supported out of the box:")]),t._v(" "),s("div",{staticClass:"language-yaml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-yaml"}},[s("code",[s("span",{attrs:{class:"token punctuation"}},[t._v("---")]),t._v("\n"),s("span",{attrs:{class:"token key atrule"}},[t._v("title")]),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Blogging Like a Hacker\n"),s("span",{attrs:{class:"token key atrule"}},[t._v("lang")]),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" en"),s("span",{attrs:{class:"token punctuation"}},[t._v("-")]),t._v("US\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("---")]),t._v("\n")])])]),s("p",[t._v("The data will be available to the rest of the page, plus all custom and theming components.")]),t._v(" "),s("p",[t._v("For detailed introduction, please move to "),s("router-link",{attrs:{to:"./frontmatter.html"}},[t._v("Front Matter")]),t._v(".")],1),t._v(" "),s("h2",{attrs:{id:"github-style-tables"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#github-style-tables","aria-hidden":"true"}},[t._v("#")]),t._v(" GitHub-Style Tables")]),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("| Tables | Are | Cool |\n| ------------- |:-------------:| -----:|\n| col 3 is | right-aligned | $1600 |\n| col 2 is | centered | $12 |\n| zebra stripes | are neat | $1 |\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Tables")]),t._v(" "),s("th",{staticStyle:{"text-align":"center"}},[t._v("Are")]),t._v(" "),s("th",{staticStyle:{"text-align":"right"}},[t._v("Cool")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("col 3 is")]),t._v(" "),s("td",{staticStyle:{"text-align":"center"}},[t._v("right-aligned")]),t._v(" "),s("td",{staticStyle:{"text-align":"right"}},[t._v("$1600")])]),t._v(" "),s("tr",[s("td",[t._v("col 2 is")]),t._v(" "),s("td",{staticStyle:{"text-align":"center"}},[t._v("centered")]),t._v(" "),s("td",{staticStyle:{"text-align":"right"}},[t._v("$12")])]),t._v(" "),s("tr",[s("td",[t._v("zebra stripes")]),t._v(" "),s("td",{staticStyle:{"text-align":"center"}},[t._v("are neat")]),t._v(" "),s("td",{staticStyle:{"text-align":"right"}},[t._v("$1")])])])]),t._v(" "),s("h2",{attrs:{id:"emoji"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#emoji","aria-hidden":"true"}},[t._v("#")]),t._v(" Emoji 🎉")]),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v(":tada: :100:\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("p",[t._v("🎉 💯")]),t._v(" "),s("p",[t._v("A list of all emojis available can be found "),s("a",{attrs:{href:"https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("h2",{attrs:{id:"table-of-contents"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-of-contents","aria-hidden":"true"}},[t._v("#")]),t._v(" Table of Contents")]),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("[[toc]]\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("p"),s("div",{staticClass:"table-of-contents"},[s("ul",[s("li",[s("a",{attrs:{href:"#header-anchors"}},[t._v("Header Anchors")])]),s("li",[s("a",{attrs:{href:"#links"}},[t._v("Links")]),s("ul",[s("li",[s("a",{attrs:{href:"#internal-links"}},[t._v("Internal Links")])]),s("li",[s("a",{attrs:{href:"#external-links"}},[t._v("External Links")])])])]),s("li",[s("a",{attrs:{href:"#front-matter"}},[t._v("Front Matter")])]),s("li",[s("a",{attrs:{href:"#github-style-tables"}},[t._v("GitHub-Style Tables")])]),s("li",[s("a",{attrs:{href:"#emoji-tada"}},[t._v("Emoji 🎉")])]),s("li",[s("a",{attrs:{href:"#table-of-contents"}},[t._v("Table of Contents")])]),s("li",[s("a",{attrs:{href:"#custom-containers"}},[t._v("Custom Containers")])]),s("li",[s("a",{attrs:{href:"#line-highlighting-in-code-blocks"}},[t._v("Line Highlighting in Code Blocks")])]),s("li",[s("a",{attrs:{href:"#line-numbers"}},[t._v("Line Numbers")])]),s("li",[s("a",{attrs:{href:"#import-code-snippets-badge-text-beta-type-warn-badge-text-0-10-1-type-tip"}},[t._v("Import Code Snippets "),s("Badge",{attrs:{text:"beta",type:"warn"}}),t._v(" "),s("Badge",{attrs:{text:"0.10.1+",type:"tip"}})],1)]),s("li",[s("a",{attrs:{href:"#advanced-configuration"}},[t._v("Advanced Configuration")])])])]),s("p"),t._v(" "),s("p",[t._v("Rendering of TOC can be configured using the "),s("router-link",{attrs:{to:"./../config/#markdown-toc"}},[s("code",[t._v("markdown.toc")])]),t._v(" option.")],1),t._v(" "),s("h2",{attrs:{id:"custom-containers"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-containers","aria-hidden":"true"}},[t._v("#")]),t._v(" Custom Containers")]),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("::: tip\nThis is a tip\n:::\n\n::: warning\nThis is a warning\n:::\n\n::: danger\nThis is a dangerous warning\n:::\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("This is a tip")])]),t._v(" "),s("div",{staticClass:"warning custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("This is a warning")])]),t._v(" "),s("div",{staticClass:"danger custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("This is a dangerous warning")])]),t._v(" "),s("p",[t._v("You can also customize the title of the block:")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("::: danger STOP\nDanger zone, do not proceed\n:::\n")])])]),s("div",{staticClass:"danger custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("STOP")]),t._v(" "),s("p",[t._v("Danger zone, do not proceed")])]),t._v(" "),s("h2",{attrs:{id:"line-highlighting-in-code-blocks"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#line-highlighting-in-code-blocks","aria-hidden":"true"}},[t._v("#")]),t._v(" Line Highlighting in Code Blocks")]),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("``` js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighted!'\n }\n }\n}\n```\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("div",{staticClass:"highlight-lines"},[s("br"),s("br"),s("br"),s("div",{staticClass:"highlighted"},[t._v(" ")]),s("br"),s("br"),s("br"),s("br")]),s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token function"}},[t._v("data")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n msg"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'Highlighted!'")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"line-numbers"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#line-numbers","aria-hidden":"true"}},[t._v("#")]),t._v(" Line Numbers")]),t._v(" "),s("p",[t._v("You can enable line numbers for each code blocks via config:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n markdown"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n lineNumbers"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" \n")])])]),t._v(" "),s("ul",[s("li",[t._v("Demo:")])]),t._v(" "),s("picture",[s("source",{attrs:{srcset:"/line-numbers-desktop.png",media:"(min-width: 719px)"}}),t._v(" "),s("img",{staticClass:"line-numbers-desktop-snap",attrs:{alt:"Image"}})]),t._v(" "),s("picture",[s("source",{attrs:{srcset:"/line-numbers-mobile.gif",media:"(max-width: 719px)"}}),t._v(" "),s("img",{staticClass:"line-numbers-mobile-snap",attrs:{alt:"Image"}})]),t._v(" "),s("h2",{attrs:{id:"import-code-snippets"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#import-code-snippets","aria-hidden":"true"}},[t._v("#")]),t._v(" Import Code Snippets "),s("Badge",{attrs:{text:"beta",type:"warn"}}),t._v(" "),s("Badge",{attrs:{text:"0.10.1+",type:"tip"}})],1),t._v(" "),s("p",[t._v("You can import code snippets from existing files via following syntax:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("<<< @/filepath\n")])])]),s("p",[t._v("It also supports "),s("a",{attrs:{href:"#line-highlighting-in-code-blocks"}},[t._v("line highlighting")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("<<< @/filepath{highlightLines} \n")])])]),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("<<< @/../@vuepress/markdown/"),s("span",{attrs:{class:"token bold"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("__")]),t._v("tests"),s("span",{attrs:{class:"token punctuation"}},[t._v("__")])]),t._v("/fragments/snippet.js{2}\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("div",{staticClass:"highlight-lines"},[s("br"),s("div",{staticClass:"highlighted"},[t._v(" ")]),s("br"),s("br")]),s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token comment"}},[t._v("// ..")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("Since the import of the code snippets will be executed before webpack compilation, you can't use the path alias in webpack. The default value of "),s("code",[t._v("@")]),t._v(" is "),s("code",[t._v("process.cwd()")]),t._v(".")])]),t._v(" "),s("h2",{attrs:{id:"advanced-configuration"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#advanced-configuration","aria-hidden":"true"}},[t._v("#")]),t._v(" Advanced Configuration")]),t._v(" "),s("p",[t._v("VuePress uses "),s("a",{attrs:{href:"https://github.com/markdown-it/markdown-it",target:"_blank",rel:"noopener noreferrer"}},[t._v("markdown-it"),s("OutboundLink")],1),t._v(" as the markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the "),s("code",[t._v("markdown-it")]),t._v(" instance using the "),s("code",[t._v("markdown")]),t._v(" option in "),s("code",[t._v(".vuepress/config.js")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n markdown"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token comment"}},[t._v("// options for markdown-it-anchor")]),t._v("\n anchor"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" permalink"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{attrs:{class:"token comment"}},[t._v("// options for markdown-it-toc")]),t._v("\n toc"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" includeLevel"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{attrs:{class:"token number"}},[t._v("1")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token number"}},[t._v("2")]),s("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n extendMarkdown"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" md "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token comment"}},[t._v("// use more markdown-it plugins!")]),t._v("\n md"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("use")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token function"}},[t._v("require")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'markdown-it-xxx'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])},[],!1,null,null,null);a.default=r.exports}}]);
\ No newline at end of file
diff --git a/vuepress/assets/js/17.5e50cd1d.js b/vuepress/assets/js/17.5e50cd1d.js
new file mode 100644
index 0000000000..6389989450
--- /dev/null
+++ b/vuepress/assets/js/17.5e50cd1d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{214:function(e,t,a){"use strict";a.r(t);var s={props:["slot-key"],mounted:function(){this.$nextTick(function(){this.$vuepress.$emit("AsyncMarkdownContentMounted",this.slotKey)})}},r=a(5),n=Object(r.a)(s,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.slotKey}},[a("h1",{attrs:{id:"permalinks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#permalinks","aria-hidden":"true"}},[e._v("#")]),e._v(" Permalinks")]),e._v(" "),a("h2",{attrs:{id:"background"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background","aria-hidden":"true"}},[e._v("#")]),e._v(" Background")]),e._v(" "),a("p",[e._v("Before 1.x.x, VuePress retrieves all markdown files in the documents source directory and defines the page links based on the file hierarchy. e.g. if you have the following file structure:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("├── package.json\n└── source\n ├── _post\n │ └── intro-vuepress.md\n ├── index.md\n └── tags.md\n")])])]),a("p",[e._v("Then you will get following available pages:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("/source/\n/source/tags.html\n/source/_post/intro-vuepress.html\n")])])]),a("p",[e._v("However, for a blog system, we hope that the link of a post can be customized. VuePress started supporting this feature from "),a("code",[e._v("1.0.0")]),e._v(". which is known as "),a("code",[e._v("permalink")]),e._v(". Then, the actual pages would be:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("/source/\n/source/tags/\n/source/2018/4/1/intro-vuepress.html\n")])])]),a("p",[e._v("It seems that we have seen the shadow of the blog. Let's continue to look down.")]),e._v(" "),a("h2",{attrs:{id:"permalinks-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#permalinks-2","aria-hidden":"true"}},[e._v("#")]),e._v(" Permalinks")]),e._v(" "),a("p",[e._v("A permalink is a URL that is intended to remain unchanged for many years into the future, yielding a hyperlink that is less susceptible to link rot"),a("sup",[e._v("[1]")]),e._v(". VuePress supports a flexible way to build permalinks, allowing you to leverage various template variables.")]),e._v(" "),a("p",[e._v("The default permalink is "),a("code",[e._v("/:regular")]),e._v(".")]),e._v(" "),a("h3",{attrs:{id:"configure-permalinks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#configure-permalinks","aria-hidden":"true"}},[e._v("#")]),e._v(" Configure Permalinks")]),e._v(" "),a("p",[e._v("You can configure globally to apply it for all pages:")]),e._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token comment"}},[e._v("// .vuepress/config.js")]),e._v("\nmodule"),a("span",{attrs:{class:"token punctuation"}},[e._v(".")]),e._v("exports "),a("span",{attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),a("span",{attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n permalink"),a("span",{attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" "),a("span",{attrs:{class:"token string"}},[e._v("'/:year/:month/:day/:slug'")]),e._v("\n"),a("span",{attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),a("p",[e._v("Alternatively, you can also set permalink on a page only, and it will have a higher priority than the global settings.")]),e._v(" "),a("p",[e._v("📝 "),a("strong",[e._v("hello.md")]),e._v(":")]),e._v(" "),a("div",{staticClass:"language-markdown extra-class"},[a("pre",{pre:!0,attrs:{class:"language-markdown"}},[a("code",[a("span",{attrs:{class:"token hr punctuation"}},[e._v("---")]),e._v("\ntitle: Hello World\n"),a("span",{attrs:{class:"token title important"}},[e._v("permalink: /hello-world\n"),a("span",{attrs:{class:"token punctuation"}},[e._v("---")])]),e._v("\n\nHello!\n")])])]),a("h3",{attrs:{id:"template-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#template-variables","aria-hidden":"true"}},[e._v("#")]),e._v(" Template Variables")]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Variable")]),e._v(" "),a("th",[e._v("Description")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v(":year")]),e._v(" "),a("td",[e._v("Published year of posts (4-digit)")])]),e._v(" "),a("tr",[a("td",[e._v(":month")]),e._v(" "),a("td",[e._v("Published month of posts (2-digit)")])]),e._v(" "),a("tr",[a("td",[e._v(":i_month")]),e._v(" "),a("td",[e._v("Published month of posts (Without leading zeros)")])]),e._v(" "),a("tr",[a("td",[e._v(":day")]),e._v(" "),a("td",[e._v("Published day of posts (2-digit)")])]),e._v(" "),a("tr",[a("td",[e._v(":i_day")]),e._v(" "),a("td",[e._v("Published day of posts (Without leading zeros)")])]),e._v(" "),a("tr",[a("td",[e._v(":slug")]),e._v(" "),a("td",[e._v("Slugified file path (Without extension)")])]),e._v(" "),a("tr",[a("td",[e._v(":regular")]),e._v(" "),a("td",[e._v("Permalink generated by VuePress by default, for implementation see "),a("a",{attrs:{href:"https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/shared-utils/lib/fileToPath.js",target:"_blank",rel:"noopener noreferrer"}},[e._v("here"),a("OutboundLink")],1)])])])])])},[],!1,null,null,null);t.default=n.exports}}]);
\ No newline at end of file
diff --git a/vuepress/assets/js/18.790476d7.js b/vuepress/assets/js/18.790476d7.js
new file mode 100644
index 0000000000..3ac9ccb6d9
--- /dev/null
+++ b/vuepress/assets/js/18.790476d7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{152:function(t,a,s){t.exports={example:"example_2DuOfB6G"}},187:function(t,a,s){"use strict";var e=s(152),n=s.n(e);a.default=n.a},215:function(t,a,s){"use strict";s.r(a);var e={props:["slot-key"],mounted:function(){document.querySelector(".".concat(this.$style.example)).textContent="This is rendered by inline script and styled by inline CSS"}},n=s(187),o=s(5);var r=Object(o.a)(e,function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.slotKey}},[s("h1",{attrs:{id:"using-vue-in-markdown"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-vue-in-markdown","aria-hidden":"true"}},[t._v("#")]),t._v(" Using Vue in Markdown")]),t._v(" "),s("h2",{attrs:{id:"browser-api-access-restrictions"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#browser-api-access-restrictions","aria-hidden":"true"}},[t._v("#")]),t._v(" Browser API Access Restrictions")]),t._v(" "),s("p",[t._v("Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the "),s("a",{attrs:{href:"https://ssr.vuejs.org/en/universal.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("universal code requirements"),s("OutboundLink")],1),t._v(". In short, make sure to only access Browser / DOM APIs in "),s("code",[t._v("beforeMount")]),t._v(" or "),s("code",[t._v("mounted")]),t._v(" hooks.")]),t._v(" "),s("p",[t._v("If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in "),s("code",[t._v("")]),t._v(" component:")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ClientOnly")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("NonSSRFriendlyComponent")]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("ClientOnly")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("Note this does not fix components or libraries that access Browser APIs "),s("strong",[t._v("on import")]),t._v(" - in order to use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{attrs:{class:"token script language-javascript"}},[t._v("\n"),s("span",{attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token function"}},[t._v("mounted")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token keyword"}},[t._v("import")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'./lib-that-access-window-on-import'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("then")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token comment"}},[t._v("// use code")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")]),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("script")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"templating"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#templating","aria-hidden":"true"}},[t._v("#")]),t._v(" Templating")]),t._v(" "),s("h3",{attrs:{id:"interpolation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#interpolation","aria-hidden":"true"}},[t._v("#")]),t._v(" Interpolation")]),t._v(" "),s("p",[t._v("Each markdown file is first compiled into HTML and then passed on as a Vue component to "),s("code",[t._v("vue-loader")]),t._v(". This means you can use Vue-style interpolation in text:")]),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("{{ 1 + 1 }}\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("div",{staticClass:"language-text"},[s("pre",[s("code",[t._v(t._s(2))])])]),t._v(" "),s("h3",{attrs:{id:"directives"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#directives","aria-hidden":"true"}},[t._v("#")]),t._v(" Directives")]),t._v(" "),s("p",[t._v("Directives also work:")]),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("v-for")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("i in 3"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ i }} "),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("span")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("div",{staticClass:"language-text"},[s("pre",[s("code",t._l(3,function(a){return s("span",[t._v(t._s(a)+" ")])}))])]),t._v(" "),s("h3",{attrs:{id:"access-to-site-page-data"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#access-to-site-page-data","aria-hidden":"true"}},[t._v("#")]),t._v(" Access to Site & Page Data")]),t._v(" "),s("p",[t._v("The compiled component does not have any private data but does have access to the "),s("router-link",{attrs:{to:"./../theme/writing-a-theme.html#site-and-page-metadata"}},[t._v("site metadata")]),t._v(". For example:")],1),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("{{ $page }}\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token property"}},[t._v('"path"')]),s("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v('"/using-vue.html"')]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{attrs:{class:"token property"}},[t._v('"title"')]),s("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v('"Using Vue in Markdown"')]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{attrs:{class:"token property"}},[t._v('"frontmatter"')]),s("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"escaping"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#escaping","aria-hidden":"true"}},[t._v("#")]),t._v(" Escaping")]),t._v(" "),s("p",[t._v("By default, fenced code blocks are automatically wrapped with "),s("code",[t._v("v-pre")]),t._v(". If you want to display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the "),s("code",[t._v("v-pre")]),t._v(" custom container:")]),t._v(" "),s("p",[s("strong",[t._v("Input")])]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("::: v-pre\n"),s("span",{attrs:{class:"token code keyword"}},[t._v("`{{ This will be displayed as-is }}`")]),t._v("\n:::\n")])])]),s("p",[s("strong",[t._v("Output")])]),t._v(" "),s("div",{pre:!0},[s("p",[s("code",[t._v("{{ This will be displayed as-is }}")])])]),t._v(" "),s("h2",{attrs:{id:"using-components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-components","aria-hidden":"true"}},[t._v("#")]),t._v(" Using Components")]),t._v(" "),s("p",[t._v("Any "),s("code",[t._v("*.vue")]),t._v(" files found in "),s("code",[t._v(".vuepress/components")]),t._v(" are automatically registered as "),s("a",{attrs:{href:"https://vuejs.org/v2/guide/components-registration.html#Global-Registration",target:"_blank",rel:"noopener noreferrer"}},[t._v("global"),s("OutboundLink")],1),t._v(", "),s("a",{attrs:{href:"https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components",target:"_blank",rel:"noopener noreferrer"}},[t._v("async"),s("OutboundLink")],1),t._v(" components. For example:")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v(".\n└─ .vuepress\n └─ components\n ├─ demo-1.vue\n ├─ OtherComponent.vue\n └─ Foo\n └─ Bar.vue\n")])])]),s("p",[t._v("Inside any markdown file you can then directly use the components (names are inferred from filenames):")]),t._v(" "),s("div",{staticClass:"language-md extra-class"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("demo-1")]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("OtherComponent")]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Foo-Bar")]),s("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("demo-1"),t._v(" "),s("OtherComponent"),t._v(" "),s("Foo-Bar"),t._v(" "),s("div",{staticClass:"warning custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("IMPORTANT")]),t._v(" "),s("p",[t._v("Make sure a custom component's name either contains a hyphen or is in PascalCase. Otherwise it will be treated as an inline element and wrapped inside a "),s("code",[t._v("
")]),t._v(" tag, which will lead to hydration mismatch because "),s("code",[t._v("
")]),t._v(" does not allow block elements to be placed inside it.")])]),t._v(" "),s("h3",{attrs:{id:"using-components-in-headers"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-components-in-headers","aria-hidden":"true"}},[t._v("#")]),t._v(" Using Components In Headers")]),t._v(" "),s("p",[t._v("You can use Vue components in the headers, but note the difference between the following two ways:")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("markdown")]),t._v(" "),s("th",[t._v("Output HTML")]),t._v(" "),s("th",[t._v("Parsed Header")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("pre",{pre:!0},[s("code",[t._v(" # text ")])])]),t._v(" "),s("td",[s("code",[t._v("
text
")])]),t._v(" "),s("td",[s("code",[t._v("text")])])]),t._v(" "),s("tr",[s("td",[s("pre",{pre:!0},[s("code",[t._v(" # text `` ")])])]),t._v(" "),s("td",[s("code",[t._v("
text <Tag/>
")])]),t._v(" "),s("td",[s("code",[t._v("text ")])])])])]),t._v(" "),s("p",[t._v("The HTML wrapped by "),s("code",[t._v("")]),t._v(" will be displayed as is, only the HTML that is not wrapped will be parsed by Vue.")]),t._v(" "),s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("The output HTML is accomplished by "),s("a",{attrs:{href:"https://github.com/markdown-it/markdown-it",target:"_blank",rel:"noopener noreferrer"}},[t._v("markdown-it"),s("OutboundLink")],1),t._v(", while the parsed headers are done by VuePress, and used for the "),s("router-link",{attrs:{to:"./../theme/default-theme-config.html#sidebar"}},[t._v("sidebar")]),t._v(" and the document title.")],1)]),t._v(" "),s("h2",{attrs:{id:"using-pre-processors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-pre-processors","aria-hidden":"true"}},[t._v("#")]),t._v(" Using Pre-processors")]),t._v(" "),s("p",[t._v("VuePress has built-in webpack config for the following pre-processors: "),s("code",[t._v("sass")]),t._v(", "),s("code",[t._v("scss")]),t._v(", "),s("code",[t._v("less")]),t._v(", "),s("code",[t._v("stylus")]),t._v(" and "),s("code",[t._v("pug")]),t._v(". All you need to do is installing the corresponding dependencies. For example, to enable "),s("code",[t._v("sass")]),t._v(", install the following in your project:")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[t._v("yarn add -D sass-loader node-sass\n")])])]),s("p",[t._v("Now you can use the following in markdown and theme components:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{attrs:{class:"token attr-value"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sass"),s("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{attrs:{class:"token style language-css"}},[t._v("\n.title\n "),s("span",{attrs:{class:"token property"}},[t._v("font-size")]),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px\n")]),s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token tag"}},[s("span",{attrs:{class:"token punctuation"}},[t._v("")]),t._v("style")]),s("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("Using "),s("code",[t._v('')]),t._v(" requires installing "),s("code",[t._v("pug")]),t._v(" and "),s("code",[t._v("pug-plain-loader")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[t._v("yarn add -D pug pug-plain-loader\n")])])]),s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("If you are a Stylus user, you don't need to install "),s("code",[t._v("stylus")]),t._v(" and "),s("code",[t._v("stylus-loader")]),t._v(" in your project because VuePress uses Stylus internally.")]),t._v(" "),s("p",[t._v("For pre-processors that do not have built-in webpack config support, you will need to "),s("router-link",{attrs:{to:"./../config/#configurewebpack"}},[t._v("extend the internal webpack config")]),t._v(" in addition to installing the necessary dependencies.")],1)]),t._v(" "),s("h2",{attrs:{id:"script-style-hoisting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#script-style-hoisting","aria-hidden":"true"}},[t._v("#")]),t._v(" Script & Style Hoisting")]),t._v(" "),s("p",[t._v("Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases you can directly write root-level "),s("code",[t._v("
+
+