|
|
import{_ as s,c as e,ag as i,o as t}from"./chunks/framework.C1C4sYC0.js";const r=JSON.parse('{"title":"레이아웃","description":"","frontmatter":{},"headers":[],"relativePath":"ko/reference/default-theme-layout.md","filePath":"ko/reference/default-theme-layout.md","lastUpdated":1723200489000}'),l={name:"ko/reference/default-theme-layout.md"};function n(o,a,h,p,d,c){return t(),e("div",null,a[0]||(a[0]=[i(`<h1 id="layout" tabindex="-1">레이아웃 <a class="header-anchor" href="#layout" aria-label="Permalink to "레이아웃 {#layout}""></a></h1><p>페이지의 <a href="./frontmatter-config">전문</a>에 <code>layout</code> 옵션을 설정하여 페이지 레이아웃을 선택할 수 있습니다. <code>doc</code>, <code>page</code>, <code>home</code> 세 가지 레이아웃 옵션이 있습니다. 아무것도 지정하지 않으면 <code>doc</code> 페이지로 처리됩니다.</p><div class="language-yaml vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">yaml</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">---</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">doc</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">---</span></span></code></pre></div><h2 id="doc-layout" tabindex="-1"><code>doc</code> 레이아웃 <a class="header-anchor" href="#doc-layout" aria-label="Permalink to "\`doc\` 레이아웃 {#doc-layout}""></a></h2><p><code>doc</code> 옵션은 기본 레이아웃으로, 전체 마크다운 콘텐츠를 "문서" 스타일로 변환합니다. 이 레이아웃은 전체 콘텐츠를 <code>vp-doc</code> CSS 클래스로 감싸고, 하위 엘리먼트에 스타일을 적용하는 방식으로 작동합니다.</p><p><code>p</code>나 <code>h2</code> 같은 거의 모든 일반적인 엘리먼트들이 특별한 스타일을 갖게 됩니다. 따라서 마크다운 콘텐츠에 커스텀 HTML을 추가할 경우, 해당 HTML도 이러한 스타일의 영향을 받게 된다는 점을 유념해야 합니다.</p><p>이 레이아웃에서는 아래에 나열된 문서 전용 기능들도 제공됩니다. 이 기능들은 오직 이 레이아웃에서만 활성화됩니다.</p><ul><li>편집 링크</li><li>이전/다음 링크</li><li>개요(outline)</li><li><a href="./default-theme-carbon-ads">카본 광고</a></li></ul><h2 id="page-layout" tabindex="-1"><code>page</code> 레이아웃 <a class="header-anchor" href="#page-layout" aria-label="Permalink to "\`page\` 레이아웃 {#page-layout}""></a></h2><p><code>page</code> 옵션은 "빈 페이지"로 처리됩니다. 마크다운은 여전히 파싱되며, 모든 <a href="./../guide/markdown">마크다운 확장 기능</a>이 <code>doc</code> 레이아웃과 동일하게 작동하지만, 기본 스타일링은 적용되지 않습니다.</p><p>이 페이지 레이아웃은 VitePress 테마가 마크업에 영향을 미치지 않도록 하여, 모든 스타일을 직접 지정할 수 있게 해줍니다. 이는 커스텀 페이지를 만들고자 할 때 유용합니다.</p><p>이 레이아웃에서도 페이지에 매칭되는 사이드바 구성이 있는 경우 사이드바는 여전히 표시됩니다.</p><h2 id="home-layout" tabindex="-1"><code>home</code> 레이아웃 <a class="header-anchor" href="#home-layout" aria-label="Permalink to "\`home\` 레이아웃 {#home-layout}""></a></h2><p><code>home</code> 옵션은 템플릿화된 "홈 페이지"를 생성합니다. 이 레이아웃에서는 <code>hero</code>와 <code>features</code> 같은 추가 옵션을 설정하여 콘텐츠를 더 커스터마이징 할 수 있습니다. 자세한 내용은 <a href="./default-theme-home-page">기본 테마: 홈 페이지</a>를 참고하세요.</p><h2 id="no-layout" tabindex="-1">레이아웃 없음 <a class="header-anchor" href="#no-layout" aria-label="Permalink to "레이아웃 없음 {#no-layout}""></a></h2><p>어떤 레이아웃도 원하지 않는 경우, 전문에 <code>layout: false</code>를 전달할 수 있습니다. 이 옵션은 (기본적으로 사이드바, 네비게이션 바, 또는 푸터가 없는) 완전히 커스터마이징 가능한 랜딩 페이지를 만들고자 할 때 유용합니다.</p><h2 id="custom-layout" tabindex="-1">커스텀 레이아웃 <a class="header-anchor" href="#custom-layout" aria-label="Permalink to "커스텀 레이아웃 {#custom-layout}""></a></h2><p>커스텀 레이아웃을 사용할 수도 있습니다:</p><div class="language-md vp-adaptive-theme"><button title="코드 복사" 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;">layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">foo</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span></code></pre></div><p>이것은 컨텍스트에 등록된 <code>foo</code>라는 이름의 컴포넌트를 찾습니다. 예를 들어 <code>.vitepress/theme/index.ts</code>에서 컴포넌트를 전역으로 등록할 수 있습니다:</p><div class="language-ts vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Foo </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './Foo.vue'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> extends: DefaultTheme,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> enhanceApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'foo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, Foo)</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>`,21)]))}const u=s(l,[["render",n]]);export{r as __pageData,u as default};
|
