|
|
import{_ as s,c as t,ag as e,o as i}from"./chunks/framework.C1C4sYC0.js";const c=JSON.parse('{"title":"Frontmatter","description":"","frontmatter":{},"headers":[],"relativePath":"guide/frontmatter.md","filePath":"en/guide/frontmatter.md","lastUpdated":1719560776000}'),n={name:"guide/frontmatter.md"};function r(l,a,p,o,h,d){return i(),t("div",null,a[0]||(a[0]=[e(`<h1 id="frontmatter" tabindex="-1">Frontmatter <a class="header-anchor" href="#frontmatter" aria-label="Permalink to "Frontmatter""></a></h1><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to "Usage""></a></h2><p>VitePress supports YAML frontmatter in all Markdown files, parsing them with <a href="https://github.com/jonschlinkert/gray-matter" target="_blank" rel="noreferrer">gray-matter</a>. The frontmatter must be at the top of the Markdown file (before any elements including <code><script></code> tags), and must take the form of valid YAML set between triple-dashed lines. Example:</p><div class="language-md vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">Docs with VitePress</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">editLink</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span></code></pre></div><p>Many site or default theme config options have corresponding options in frontmatter. You can use frontmatter to override specific behavior for the current page only. For details, see <a href="./../reference/frontmatter-config">Frontmatter Config Reference</a>.</p><p>You can also define custom frontmatter data of your own, to be used in dynamic Vue expressions on the page.</p><h2 id="accessing-frontmatter-data" tabindex="-1">Accessing Frontmatter Data <a class="header-anchor" href="#accessing-frontmatter-data" aria-label="Permalink to "Accessing Frontmatter Data""></a></h2><p>Frontmatter data can be accessed via the special <code>$frontmatter</code> global variable:</p><p>Here's an example of how you could use it in your Markdown file:</p><div class="language-md vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">Docs with VitePress</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">editLink</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;"># {{ $frontmatter.title }}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Guide content</span></span></code></pre></div><p>You can also access current page's frontmatter data in <code><script setup></code> with the <a href="./../reference/runtime-api#usedata"><code>useData()</code></a> helper.</p><h2 id="alternative-frontmatter-formats" tabindex="-1">Alternative Frontmatter Formats <a class="header-anchor" href="#alternative-frontmatter-formats" aria-label="Permalink to "Alternative Frontmatter Formats""></a></h2><p>VitePress also supports JSON frontmatter syntax, starting and ending in curly braces:</p><div class="language-json vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "title"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Blogging Like a Hacker"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "editLink"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span></code></pre></div>`,14)]))}const g=s(n,[["render",r]]);export{c as __pageData,g as default};
|
