nezhahq.github.io/guide/theming.html

102 lines
23 KiB
HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Theming | VitePress</title>
<meta name="description" content="Vite & Vue powered static site generator.">
<link rel="stylesheet" href="/assets/style.82fdbeb8.css">
<link rel="modulepreload" href="/assets/chunks/ui-custom.1a068566.js">
<link rel="modulepreload" href="/assets/chunks/ui-custom.30ce3a39.js">
<link rel="modulepreload" href="/assets/chunks/AlgoliaSearchBox.e5144af4.js">
<link rel="modulepreload" href="/assets/app.54944ef9.js">
<link rel="modulepreload" href="/assets/guide_theming.md.b28ff51e.lean.js">
<meta name="twitter:title" content="Theming | VitePress">
<meta property="og:title" content="Theming | VitePress">
</head>
<body>
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="VitePress, back to home" data-v-675d8756 data-v-cc01ef16><!----> VitePress</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Introduction</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/">What is VitePress?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/getting-started">Getting Started</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/configuration">Configuration</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/assets">Asset Handling</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/markdown">Markdown Extensions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/using-vue">Using Vue in Markdown</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/deploy">Deploying</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/frontmatter">Frontmatter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/guide/theming">Theming</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#using-a-custom-theme">Using a Custom Theme</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#extending-the-default-theme">Extending the Default Theme</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#registering-global-components">Registering Global Components</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#customizing-css">Customizing CSS</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#layout-slots">Layout Slots</a><!----></li></ul></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/api">API Reference</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/differences-from-vuepress">Differences from Vuepress</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" data-v-5941b830></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h1 id="theming" tabindex="-1">Theming <a class="header-anchor" href="#theming" aria-hidden="true">#</a></h1><h2 id="using-a-custom-theme" tabindex="-1">Using a Custom Theme <a class="header-anchor" href="#using-a-custom-theme" aria-hidden="true">#</a></h2><p>You can enable a custom theme by adding the <code>.vitepress/theme/index.js</code> file (the &quot;theme entry file&quot;).</p><div class="language-bash"><pre><code><span class="token builtin class-name">.</span>
├─ docs
│ ├─ .vitepress
│ │ ├─ theme
│ │ │ └─ index.js
│ │ └─ config.js
│ └─ index.md
└─ package.json
</code></pre></div><p>A VitePress custom theme is simply an object containing three properties and is defined as follows:</p><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">Theme</span> <span class="token punctuation">{</span>
Layout<span class="token operator">:</span> Component <span class="token comment">// Vue 3 component</span>
NotFound<span class="token operator">?</span><span class="token operator">:</span> Component
enhanceApp<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>ctx<span class="token operator">:</span> EnhanceAppContext<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">EnhanceAppContext</span> <span class="token punctuation">{</span>
app<span class="token operator">:</span> App <span class="token comment">// Vue 3 app instance</span>
router<span class="token operator">:</span> Router <span class="token comment">// VitePress router instance</span>
siteData<span class="token operator">:</span> Ref<span class="token operator">&lt;</span>SiteData<span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>The theme entry file should export the theme as its default export:</p><div class="language-js"><pre><code><span class="token comment">// .vitepress/theme/index.js</span>
<span class="token keyword">import</span> Layout <span class="token keyword">from</span> <span class="token string">&#39;./Layout.vue&#39;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
Layout<span class="token punctuation">,</span>
<span class="token function-variable function">NotFound</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">&#39;custom 404&#39;</span><span class="token punctuation">,</span> <span class="token comment">// &lt;- this is a Vue 3 functional component</span>
<span class="token function">enhanceApp</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> app<span class="token punctuation">,</span> router<span class="token punctuation">,</span> siteData <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// app is the Vue 3 app instance from `createApp()`. router is VitePress&#39;</span>
<span class="token comment">// custom router. `siteData` is a `ref` of current site-level metadata.</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>...where the <code>Layout</code> component could look like this:</p><div class="language-vue"><pre><code><span class="token comment">&lt;!-- .vitepress/theme/Layout.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Custom Layout!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Content</span> <span class="token punctuation">/&gt;</span></span><span class="token comment">&lt;!-- this is where markdown content will be rendered --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>The default export is the only contract for a custom theme. Inside your custom theme, it works just like a normal Vite + Vue 3 application. Do note the theme also needs to be <a href="./using-vue.html#browser-api-access-restrictions">SSR-compatible</a>.</p><p>To distribute a theme, simply export the object in your package entry. To consume an external theme, import and re-export it from the custom theme entry:</p><div class="language-js"><pre><code><span class="token comment">// .vitepress/theme/index.js</span>
<span class="token keyword">import</span> Theme <span class="token keyword">from</span> <span class="token string">&#39;awesome-vitepress-theme&#39;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> Theme
</code></pre></div><h2 id="extending-the-default-theme" tabindex="-1">Extending the Default Theme <a class="header-anchor" href="#extending-the-default-theme" aria-hidden="true">#</a></h2><p>If you want to extend and customize the default theme, you can import it from <code>vitepress/theme</code> and augment it in a custom theme entry. Here are some examples of common customizations:</p><h3 id="registering-global-components" tabindex="-1">Registering Global Components <a class="header-anchor" href="#registering-global-components" aria-hidden="true">#</a></h3><div class="language-js"><pre><code><span class="token comment">// .vitepress/theme/index.js</span>
<span class="token keyword">import</span> DefaultTheme <span class="token keyword">from</span> <span class="token string">&#39;vitepress/theme&#39;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>DefaultTheme<span class="token punctuation">,</span>
<span class="token function">enhanceApp</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> app <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// register global components</span>
app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&#39;MyGlobalComponent&#39;</span> <span class="token comment">/* ... */</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Since we are using Vite, you can also leverage Vite&#39;s <a href="https://vitejs.dev/guide/features.html#glob-import" target="_blank" rel="noopener noreferrer">glob import feature</a> to auto register a directory of components.</p><h3 id="customizing-css" tabindex="-1">Customizing CSS <a class="header-anchor" href="#customizing-css" aria-hidden="true">#</a></h3><p>The default theme CSS is customizable by overriding root level CSS variables:</p><div class="language-js"><pre><code><span class="token comment">// .vitepress/theme/index.js</span>
<span class="token keyword">import</span> DefaultTheme <span class="token keyword">from</span> <span class="token string">&#39;vitepress/theme&#39;</span>
<span class="token keyword">import</span> <span class="token string">&#39;./custom.css&#39;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> DefaultTheme
</code></pre></div><div class="language-css"><pre><code><span class="token comment">/* .vitepress/theme/custom.css */</span>
<span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--c-brand</span><span class="token punctuation">:</span> #646cff<span class="token punctuation">;</span>
<span class="token property">--c-brand-light</span><span class="token punctuation">:</span> #747bff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>See <a href="https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css" target="_blank" rel="noopener noreferrer">default theme CSS variables</a> that can be overridden.</p><h3 id="layout-slots" tabindex="-1">Layout Slots <a class="header-anchor" href="#layout-slots" aria-hidden="true">#</a></h3><p>The default theme&#39;s <code>&lt;Layout/&gt;</code> component has a few slots that can be used to inject content at certain locations of the page. Here&#39;s an example of injecting a component into the top of the sidebar:</p><div class="language-js"><pre><code><span class="token comment">// .vitepress/theme/index.js</span>
<span class="token keyword">import</span> DefaultTheme <span class="token keyword">from</span> <span class="token string">&#39;vitepress/theme&#39;</span>
<span class="token keyword">import</span> MyLayout <span class="token keyword">from</span> <span class="token string">&#39;./MyLayout.vue&#39;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>DefaultTheme<span class="token punctuation">,</span>
<span class="token comment">// override the Layout with a wrapper component that injects the slots</span>
<span class="token literal-property property">Layout</span><span class="token operator">:</span> MyLayout
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue"><pre><code><span class="token comment">&lt;!--.vitepress/theme/MyLayout.vue--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> DefaultTheme <span class="token keyword">from</span> <span class="token string">&#39;vitepress/theme&#39;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> Layout <span class="token punctuation">}</span> <span class="token operator">=</span> DefaultTheme
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Layout</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#sidebar-top</span><span class="token punctuation">&gt;</span></span>My custom sidebar top content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Layout</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Full list of slots available in the default theme layout:</p><ul><li><code>navbar-search</code></li><li><code>sidebar-top</code></li><li><code>sidebar-bottom</code></li><li><code>page-top-ads</code></li><li><code>page-top</code></li><li><code>page-bottom</code></li><li><code>page-bottom-ads</code></li><li>Only when <code>home: true</code> is enabled via frontmatter: <ul><li><code>home-hero</code></li><li><code>home-features</code></li><li><code>home-footer</code></li></ul></li></ul></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-07c132fc><div class="edit" data-v-07c132fc><div class="edit-link" data-v-07c132fc data-v-1ed99556><a class="link" href="https://github.com/vuejs/vitepress/edit/main/docs/guide/theming.md" target="_blank" rel="noopener noreferrer" data-v-1ed99556>Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-07c132fc><p class="last-updated" data-v-07c132fc data-v-abce3432><span class="prefix" data-v-abce3432>Last Updated:</span><span class="datetime" data-v-abce3432></span></p></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/guide/frontmatter" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>Frontmatter</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/guide/api" data-v-38ede35f><span class="text" data-v-38ede35f>API Reference</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17><div class="bsa-cpc" data-v-4ce5ad17></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_algolia-search.md\":\"da33e9e2\",\"config_basics.md\":\"8b6d1758\",\"config_carbon-ads.md\":\"2699d04a\",\"config_homepage.md\":\"2f01ca2d\",\"guide_api.md\":\"03e88529\",\"guide_assets.md\":\"aae76804\",\"guide_configuration.md\":\"bb340dd8\",\"guide_deploy.md\":\"661eacb4\",\"guide_differences-from-vuepress.md\":\"459a9c4a\",\"guide_frontmatter.md\":\"07dc76f0\",\"guide_getting-started.md\":\"f9753073\",\"guide_global-component.md\":\"01405ea5\",\"guide_markdown.md\":\"6ff83e9e\",\"guide_theming.md\":\"b28ff51e\",\"guide_using-vue.md\":\"74e82a4f\",\"index.md\":\"9a001cbe\"}")</script>
<script type="module" async src="/assets/app.54944ef9.js"></script>
</body>
</html>