text: import{r as e,o as a,c as n,a as t,w as s,F as o,b as r,d as c}from"./app.bd6623af.js";const l={},u=t("h1",{id:"theme",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#theme","aria-hidden":"true"},"#"),r(" Theme")],-1),p=t("p",null,"VuePress theme can provide layouts, styles and many other features for you, helping you to focus on writing Markdown content.",-1),d=r("VuePress has a default theme out of the box, which is applied to our documentation site you are currently browsing. The default theme provides basic but useful features for documentation site, you can check out "),i=r("Default Theme Config Reference"),h=r(" for a full list of config."),m=t("p",null,[r("However, you might think it is not good enough. Or, you want to build a different type of site, for example, a blog, instead of a documentation. Then, you can try to "),t("a",{href:"#community-theme"},"use a community theme"),r(" or "),t("a",{href:"#local-theme"},"create a local theme"),r(".")],-1),f=t("h2",{id:"community-theme",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#community-theme","aria-hidden":"true"},"#"),r(" Community Theme")],-1),b=r("Community users have created lots of theme and published them to "),v={href:"https://www.npmjs.com/search?q=keywords:vuepress-theme",target:"_blank",rel:"noopener noreferrer"},g=r("NPM"),y=r(". You should check the theme's own documentation for detailed guide."),k=r("In general, you need to specify the name of the theme to use in "),w=r("theme"),x=r(" option:"),j=c('<div class="theme-code-dark"><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  theme<span class="token operator">:</span> <span class="token string">&#39;foo&#39;</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div><p>You can use either theme name or its shorthand:</p><table><thead><tr><th>Theme Name</th><th>Shorthand</th></tr></thead><tbody><tr><td><code>vuepress-theme-foo</code></td><td><code>foo</code></td></tr><tr><td><code>@org/vuepress-theme-bar</code></td><td><code>@org/bar</code></td></tr><tr><td><code>@vuepress/theme-default</code></td><td><code>@vuepress/default</code></td></tr></tbody></table><h2 id="local-theme" tabindex="-1"><a class="header-anchor" href="#local-theme" aria-hidden="true">#</a> Local Theme</h2><p>If you want to use your own custom theme but don&#39;t want to publish it, you can create a local theme.</p><p>First, create the local theme directory, typically <code>.vuepress/theme</code> :</p><div class="theme-code-dark"><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>└─ docs\n   ├─ .vuepress\n   │  ├─ theme\n   │  │  └─ index.js\n   │  └─ config.js\n   └─ README.md\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></div><p>Then, set the absolute path of the theme directory to use it:</p><div class="theme-code-dark"><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  theme<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&#39;./path/to/docs/.vuepress/theme&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div>',9),T=r("Next, refer to "),_=r("Advanced > Writing a Theme"),C=r(" for how to write your own theme.");l.render=function(r,c){const l=e("RouterLink"),L=e("OutboundLink");return a(),n(o,null,[u,p,t("p",null,[d,t(l,{to:"/reference/default-theme/config.html"},{default:s((()=>[i])),_:1}),h]),m,f,t("p",null,[b,t("a",v,[g,t(L)]),y]),t("p",null,[k,t(l,{to:"/reference/config.html#theme"},{default:s((()=>[w])),_:1}),x]),j,t("p",null,[T,t(l,{to:"/advanced/theme.html"},{default:s((()=>[_])),_:1}),C])],64)};export default l;
  