mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-10 15:47:23 +02:00
318 lines
No EOL
38 KiB
HTML
318 lines
No EOL
38 KiB
HTML
<!DOCTYPE html><html lang="ko"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigation and Sidebars · Docusaurus</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## 사이트 문서 연결하기"/><meta name="docsearch:version" content="1.9.x"/><meta name="docsearch:language" content="ko"/><meta property="og:title" content="Navigation and Sidebars · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/"/><meta property="og:description" content="## 사이트 문서 연결하기"/><meta property="og:image" content="https://docusaurus.io/img/docusaurus.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://docusaurus.io/img/docusaurus.png"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://docusaurus.io/blog/atom.xml" title="Docusaurus Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://docusaurus.io/blog/feed.xml" title="Docusaurus Blog RSS Feed"/><script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-44373548-31', 'auto');
|
||
ga('send', 'pageview');
|
||
</script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script type="text/javascript" src="/js/code-blocks-buttons.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
addBackToTop(
|
||
{"zIndex":100}
|
||
)
|
||
});
|
||
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/ko"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/ko/versions"><h3>1.9.x</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/ko/1.9.x/installation" target="_self">문서</a></li><li class=""><a href="/docs/ko/1.9.x/tutorial-setup" target="_self">Tutorial</a></li><li class=""><a href="/ko/users" target="_self">사용자</a></li><li class=""><a href="/blog/" target="_self">블로그</a></li><li class=""><a href="https://github.com/facebook/docusaurus" target="_blank">GitHub</a></li><span><li><a id="languages-menu" href="#"><img class="languages-icon" src="/img/language.svg" alt="Languages icon"/>한국어</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/en/1.9.x/navigation">English</a></li><li><a href="/docs/fr/1.9.x/navigation">Français</a></li><li><a href="/docs/pt-BR/1.9.x/navigation">Português (Brasil)</a></li><li><a href="/docs/ro/1.9.x/navigation">Română</a></li><li><a href="/docs/ru/1.9.x/navigation">Русский</a></li><li><a href="/docs/zh-CN/1.9.x/navigation">简体中文</a></li><li><a href="https://crowdin.com/project/docusaurus" target="_blank" rel="noreferrer noopener">번역을 도와주세요</a></li></ul></div></li><script>
|
||
const languagesMenuItem = document.getElementById("languages-menu");
|
||
const languagesDropDown = document.getElementById("languages-dropdown");
|
||
languagesMenuItem.addEventListener("click", function(event) {
|
||
event.preventDefault();
|
||
|
||
if (languagesDropDown.className == "hide") {
|
||
languagesDropDown.className = "visible";
|
||
} else {
|
||
languagesDropDown.className = "hide";
|
||
}
|
||
});
|
||
</script></span><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>가이드</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">시작하기<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/installation">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/site-preparation">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/site-creation">Creating your site</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/publishing">Publishing your site</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/docker">Docker</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">가이드<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/adding-blog">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/custom-pages">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/search">Enabling Search</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/ko/1.9.x/navigation">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/translation">Translations & Localization</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/versioning">Versioning</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">API<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/commands">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/doc-markdown">Markdown Features</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/api-pages">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/ko/1.9.x/site-config">siteConfig.js</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
var headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
var el = event.target;
|
||
while(el !== headings){
|
||
if (el.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
break;
|
||
} else{
|
||
el = el.parentNode;
|
||
}
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://crowdin.com/project/docusaurus/ko" target="_blank" rel="noreferrer noopener">Translate</a><h1 id="__docusaurus" class="postHeaderTitle">Navigation and Sidebars</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="사이트-문서-연결하기"></a><a href="#사이트-문서-연결하기" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>사이트 문서 연결하기</h2>
|
||
<p>If you want to reference another document in your <code>docs</code> directory (or the location you set via the <a href="https://v1.docusaurus.io/docs/en/site-config.html#optional-fields">optional <code>customDocsPath</code></a> path site configuration option), then you just use the name of the document you want to reference.</p>
|
||
<p>예를 들어 <code>doc2.md</code> 문서에서 <code>doc1.md</code> 문서를 연결하고 싶다면 아래와 같이 처리합니다.</p>
|
||
<pre><code class="hljs css language-md">[<span class="hljs-string">document</span>](<span class="hljs-link">doc1.md</span>)를 참조합니다.
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="어떻게-문서끼리-연결되는가"></a><a href="#어떻게-문서끼리-연결되는가" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>어떻게 문서끼리 연결되는가</h2>
|
||
<p><code>docs</code> 디렉토리 안에 새로운 마크다운 파일을 만들게 되면 웹사이트에서 페이지로 보여집니다. 문서에 대한 링크는 각 문서의 헤더에 있는 <code>id</code>를 기준으로 생성됩니다. <code>id</code> 항목이 없는 경우에는 파일 이름이 링크명으로 처리됩니다.</p>
|
||
<p>예를 들어 <code>docs/getting-started.md</code>라는 빈 파일을 만들면 <code>/docs/getting-started.html</code>라는 새로운 페이지 URL을 사용할 수 있습니다.</p>
|
||
<p>작성할 문서에 아래와 같이 작성한다고 가정하면</p>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-attr">id:</span> <span class="hljs-string">intro</span>
|
||
<span class="hljs-attr">title:</span> <span class="hljs-string">Getting</span> <span class="hljs-string">Started</span>
|
||
<span class="hljs-meta">---</span>
|
||
<span class="hljs-string">My</span> <span class="hljs-string">new</span> <span class="hljs-string">content</span> <span class="hljs-string">here..</span>
|
||
</code></pre>
|
||
<p>파일에 작성할 마크다운 코드에서 <code>id</code> 항목을 설정하게 위와 같이 설정하게 되면 <code>/docs/intro.html</code> 형식의 문서의 URL로 접근하게 됩니다.</p>
|
||
<blockquote>
|
||
<p>You need an <code>id</code> field to be able to add the document to the sidebar.</p>
|
||
</blockquote>
|
||
<h2><a class="anchor" aria-hidden="true" id="사이드바에-문서-추가하기"></a><a href="#사이드바에-문서-추가하기" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>사이드바에 문서 추가하기</h2>
|
||
<p>웹사이트 상단 네비게이션 바에서 선택된 항목의 하위 문서에 대해 사이드바에서 보여지기를 원할 것입니다. 일반적으로 사이드바는 도큐사우르스가 초기화될때 <code>docs</code>에 설정됩니다.</p>
|
||
<blockquote>
|
||
<p>"docs" is just a name. It has no inherent meaning. You can change it as you wish.</p>
|
||
</blockquote>
|
||
<p>사이트바의 콘텐츠와 순서는 <code>website/sidebars.json</code> 파일에서 수정할 수 있습니다.</p>
|
||
<blockquote>
|
||
<p>Until you add your document to <code>website/sidebars.json</code>, they will only be accessible via a direct URL. The doc will not show up in any sidebar.</p>
|
||
</blockquote>
|
||
<p><code>sidebars.json</code> 파일의 sidebar/category 항목에 문서 헤더에서 설정한 <code>id</code> 값을 추가합니다. 아래와 같은 경우 <code>docs</code>은 사이드바의 이름이고 <code>Getting Started</code>는 사이드바 내의 카테고리가 됩니다.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-string">"docs"</span>: {
|
||
<span class="hljs-string">"Getting Started"</span>: [
|
||
<span class="hljs-string">"getting-started"</span>
|
||
],
|
||
...
|
||
},
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>아니면 아래와 같이 새로운 카테고리를 사이드바에 추가할 수 있습니다.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-string">"docs"</span>: {
|
||
<span class="hljs-string">"My New Sidebar Category"</span>: [
|
||
<span class="hljs-string">"getting-started"</span>
|
||
],
|
||
...
|
||
},
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>Docs 하위 디렉토리에 문서가 아래와 같이 있는 경우에는</p>
|
||
<pre><code class="hljs css language-bash">docs
|
||
└── dir1
|
||
└── getting-started.md
|
||
</code></pre>
|
||
<p><code>sidebars.json</code> 파일에 <code>id</code> 값만 넣으면 안되고 <code>directory/id</code> 형식으로 채워주어야 합니다.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-string">"docs"</span>: {
|
||
<span class="hljs-string">"My New Sidebar Category"</span>: [
|
||
<span class="hljs-string">"dir1/getting-started"</span>
|
||
],
|
||
...
|
||
},
|
||
...
|
||
}
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="adding-subcategories"></a><a href="#adding-subcategories" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding Subcategories</h3>
|
||
<p>It is possible to add subcategories to a sidebar. Instead of using IDs as the contents of the category array like the previous examples, you can pass an object where the keys will be the subcategory name and the value an array of IDs for that subcategory.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-string">"docs"</span>: {
|
||
<span class="hljs-string">"My Example Category"</span>: [
|
||
<span class="hljs-string">"examples"</span>,
|
||
{
|
||
<span class="hljs-string">"type"</span>: <span class="hljs-string">"subcategory"</span>,
|
||
<span class="hljs-string">"label"</span>: <span class="hljs-string">"My Example Subcategory"</span>,
|
||
<span class="hljs-string">"ids"</span>: [
|
||
<span class="hljs-string">"my-examples"</span>,
|
||
...
|
||
]
|
||
},
|
||
{
|
||
<span class="hljs-string">"type"</span>: <span class="hljs-string">"subcategory"</span>,
|
||
<span class="hljs-string">"label"</span>: <span class="hljs-string">"My Next Subcategory"</span>,
|
||
<span class="hljs-string">"ids"</span>: [
|
||
<span class="hljs-string">"some-other-examples"</span>
|
||
]
|
||
},
|
||
<span class="hljs-string">"even-more-examples"</span>,
|
||
...
|
||
],
|
||
...
|
||
}
|
||
}
|
||
|
||
<span class="hljs-comment">/*
|
||
The above will generate:
|
||
|
||
- My Example Category
|
||
- examples
|
||
- My Example Subcategory
|
||
- my-examples
|
||
...
|
||
- My Next Subcategory
|
||
- some-other-examples
|
||
- even-more-examples
|
||
...
|
||
*/</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="adding-new-sidebars"></a><a href="#adding-new-sidebars" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding New Sidebars</h3>
|
||
<p>You can also put a document in a new sidebar. In the following example, we are creating an <code>examples-sidebar</code> sidebar within <code>sidebars.json</code> that has a category called <code>My Example Category</code> containing a document with an <code>id</code> of <code>my-examples</code>.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-string">"examples-sidebar"</span>: {
|
||
<span class="hljs-string">"My Example Category"</span>: [
|
||
<span class="hljs-string">"my-examples"</span>
|
||
],
|
||
...
|
||
},
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>It is important to note that until you <a href="#additions-to-the-site-navigation-bar">add a document from the <code>"examples-sidebar"</code> sidebar to the nav bar</a>, it will be hidden.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="네비게이션-바에-사이트-추가하기"></a><a href="#네비게이션-바에-사이트-추가하기" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>네비게이션 바에 사이트 추가하기</h2>
|
||
<p>To expose sidebars, you will add click-able labels to the site navigation bar at the top of the website. You can add documents, pages and external links.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="adding-documents"></a><a href="#adding-documents" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding Documents</h3>
|
||
<p>After creating a new sidebar for the site by <a href="#adding-new-sidebars">adding</a> it to <code>sidebars.json</code>, you can expose the new sidebar from the top navigation bar by editing the <code>headerLinks</code> field of <code>siteConfig.js</code>.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-attr">headerLinks</span>: [
|
||
...
|
||
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">'my-examples'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Examples'</span> },
|
||
...
|
||
],
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>A label called <code>Examples</code> will be added to the site navigation bar and when you click on it at the top of your site, the <code>examples-sidebar</code> will be shown and the default document will be <code>my-examples</code>.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="adding-custom-pages"></a><a href="#adding-custom-pages" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding Custom Pages</h3>
|
||
<p>To add custom pages to the site navigation bar, entries can be added to the <code>headerLinks</code> of <code>siteConfig.js</code>. For example, if we have a page within <code>website/pages/help.js</code>, we can link to it by adding the following:</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-attr">headerLinks</span>: [
|
||
...
|
||
{ <span class="hljs-attr">page</span>: <span class="hljs-string">'help'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Help'</span> },
|
||
...
|
||
],
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>A label called <code>Help</code> will be added to the site navigation bar and when you click on it at the top of your site, the content from the <code>help.js</code> page will be shown.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="adding-external-links"></a><a href="#adding-external-links" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding External Links</h3>
|
||
<p>Custom links can be added to the site navigation bar with the following entry in <code>siteConfig.js</code>:</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-attr">headerLinks</span>: [
|
||
...
|
||
{ <span class="hljs-attr">href</span>: <span class="hljs-string">'https://github.com/facebook/docusaurus'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'GitHub'</span> },
|
||
...
|
||
],
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>A label called <code>GitHub</code> will be added to the site navigation bar and when you click on it at the top of your site, the content of the external link will be shown.</p>
|
||
<blockquote>
|
||
<p>To open external links in a new tab, provide an <code>external: true</code> flag within the header link config.</p>
|
||
</blockquote>
|
||
<h2><a class="anchor" aria-hidden="true" id="사이트-네비게이션-바-위치-지정하기"></a><a href="#사이트-네비게이션-바-위치-지정하기" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>사이트 네비게이션 바 위치 지정하기</h2>
|
||
<p>You have limited control where the search and languages dropdown elements are shown in the site navigation bar at the top of your website.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="search"></a><a href="#search" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Search</h3>
|
||
<p>If search is enabled on your site, your search bar will appear to the right of your links. If you want to put the search bar between links in the header, add a search entry in the <code>headerLinks</code> config array:</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-attr">headerLinks</span>: [
|
||
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">'foo'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Foo'</span> },
|
||
{ <span class="hljs-attr">search</span>: <span class="hljs-literal">true</span> },
|
||
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Bar'</span> },
|
||
],
|
||
...
|
||
}
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="languages-dropdown"></a><a href="#languages-dropdown" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Languages Dropdown</h3>
|
||
<p>If translations is enabled on your site, the language dropdown will appear to the right of your links (and to the left of the search bar, if search is enabled). If you want to put the language selection drop down between links in the header, add a languages entry in the <code>headerLinks</code> config array:</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-attr">headerLinks</span>: [
|
||
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">'foo'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Foo'</span> },
|
||
{ <span class="hljs-attr">languages</span>: <span class="hljs-literal">true</span> },
|
||
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Bar'</span> },
|
||
],
|
||
...
|
||
}
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="사이트-네비게이션-바의-활성화된-링크"></a><a href="#사이트-네비게이션-바의-활성화된-링크" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>사이트 네비게이션 바의 활성화된 링크</h2>
|
||
<p>The links in the top navigation bar get <code>siteNavItemActive</code> and <code>siteNavGroupActive</code> class names to allow you to style the currently active link different from the others. <code>siteNavItemActive</code> is applied when there's an exact match between the navigation link and the currently displayed web page.</p>
|
||
<blockquote>
|
||
<p>This does not include links of type <code>href</code> which are meant for external links only. If you manually set an <code>href</code> in your <code>headerLinks</code> to an internal page, document, or blog post, it will not get the <code>siteNavItemActive</code> class even if that page is being displayed.</p>
|
||
</blockquote>
|
||
<p>The <code>siteNavGroupActive</code> class will be added to these links:</p>
|
||
<ul>
|
||
<li>같은 사이드바에 포함된 <code>doc</code> 링크는 현재 표시된 문서로 처리됩니다.</li>
|
||
<li>블로그 포스트에서 블로그 링크나 블로그 페이지 목록이 보여집니다.</li>
|
||
</ul>
|
||
<p>These are two separate class names so you can have the active styles applied to either exact matches only or a bit more broadly for docs that belong together. If you don't want to make this distinction you can add both classes to the same CSS rule.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="부가적인-온페이지-네비게이션"></a><a href="#부가적인-온페이지-네비게이션" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>부가적인 온페이지 네비게이션</h2>
|
||
<p>We support secondary on-page navigation so you can quickly see the topics associated with a given document. To enable this feature, you need to add the <code>onPageNav</code> site configuration <a href="/docs/ko/1.9.x/site-config#optional-fields">option</a> to your <code>siteConfig.js</code>.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-attr">onPageNav</span>: <span class="hljs-string">'separate'</span>,
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>Currently, <code>'separate'</code> is the only option available for this field. This provides a separate navigation on the right side of the page.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="collapsible-categories"></a><a href="#collapsible-categories" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Collapsible Categories</h2>
|
||
<p>For sites with a sizable amount of content, we support the option to expand/collapse the links and subcategories under categories. To enable this feature, set the <code>docsSideNavCollapsible</code> site configuration <a href="/docs/ko/1.9.x/site-config#optional-fields">option</a> in <code>siteConfig.js</code> to true.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-attr">docsSideNavCollapsible</span>: <span class="hljs-literal">true</span>,
|
||
...
|
||
}
|
||
</code></pre>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/ko/1.9.x/search"><span class="arrow-prev">← </span><span>검색 활성화</span></a><a class="docs-next button" href="/docs/ko/1.9.x/translation"><span>번역 & 현지화</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#사이트-문서-연결하기">사이트 문서 연결하기</a></li><li><a href="#어떻게-문서끼리-연결되는가">어떻게 문서끼리 연결되는가</a></li><li><a href="#사이드바에-문서-추가하기">사이드바에 문서 추가하기</a><ul class="toc-headings"><li><a href="#adding-subcategories">Adding Subcategories</a></li><li><a href="#adding-new-sidebars">Adding New Sidebars</a></li></ul></li><li><a href="#네비게이션-바에-사이트-추가하기">네비게이션 바에 사이트 추가하기</a><ul class="toc-headings"><li><a href="#adding-documents">Adding Documents</a></li><li><a href="#adding-custom-pages">Adding Custom Pages</a></li><li><a href="#adding-external-links">Adding External Links</a></li></ul></li><li><a href="#사이트-네비게이션-바-위치-지정하기">사이트 네비게이션 바 위치 지정하기</a><ul class="toc-headings"><li><a href="#search">Search</a></li><li><a href="#languages-dropdown">Languages Dropdown</a></li></ul></li><li><a href="#사이트-네비게이션-바의-활성화된-링크">사이트 네비게이션 바의 활성화된 링크</a></li><li><a href="#부가적인-온페이지-네비게이션">부가적인 온페이지 네비게이션</a></li><li><a href="#collapsible-categories">Collapsible Categories</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div class="footerSection"><h5>Docs</h5><a href="
|
||
/docs/ko/installation">Getting Started</a><a href="
|
||
/docs/ko/versioning">Versioning</a><a href="
|
||
/docs/ko/translation">Localization</a><a href="
|
||
/docs/ko/search">Adding Search</a></div><div class="footerSection"><h5>Community</h5><a href="/ko/help">Help</a><a href="/ko/users">User Showcase</a><a href="/ko/about-slash">About</a></div><div class="footerSection"><h5>Legal</h5><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noreferrer noopener">Privacy</a><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noreferrer noopener">Terms</a><a href="https://opensource.facebook.com/legal/data-policy/" target="_blank" rel="noreferrer noopener">Data Policy</a><a href="https://opensource.facebook.com/legal/cookie-policy/" target="_blank" rel="noreferrer noopener">Cookie Policy</a></div><div class="footerSection"><h5>Social</h5><div class="social"><a class="github-button" href="https://github.com/facebook/docusaurus" data-count-href="https://github.com/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">docusaurus</a></div><div class="social"><a href="https://twitter.com/docusaurus" class="twitter-follow-button">Follow @docusaurus</a></div><div class="social"><div class="fb-like" data-href="https://docusaurus.io" data-colorscheme="dark" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div></div></div></section><a href="https://opensource.facebook.com/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright"><span>Copyright © 2021 Facebook Inc.</span> Landing images by <a href="https://undraw.co/">unDraw</a>.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'199138890728411',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '3eb9507824b8be89e7a199ecaa1a9d2c',
|
||
indexName: 'docusaurus',
|
||
inputSelector: '#search_input_react',
|
||
algoliaOptions: {"facetFilters":["language:ko","version:1.9.x"]}
|
||
});
|
||
</script></body></html> |