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="fr"><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="## Faire référence aux documents du site"/><meta name="docsearch:version" content="1.12.0"/><meta name="docsearch:language" content="fr"/><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="## Faire référence aux documents du site"/><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="/fr"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/fr/versions"><h3>1.12.0</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/fr/1.12.0/installation" target="_self">Documentations</a></li><li class=""><a href="/docs/fr/1.12.0/tutorial-setup" target="_self">Tutoriel</a></li><li class=""><a href="/fr/users" target="_self">Utilisateurs</a></li><li class=""><a href="/blog/" target="_self">Blog</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"/>Français</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/en/1.12.0/navigation">English</a></li><li><a href="/docs/ko/1.12.0/navigation">한국어</a></li><li><a href="/docs/pt-BR/1.12.0/navigation">Português (Brasil)</a></li><li><a href="/docs/ro/1.12.0/navigation">Română</a></li><li><a href="/docs/ru/1.12.0/navigation">Русский</a></li><li><a href="/docs/zh-CN/1.12.0/navigation">简体中文</a></li><li><a href="https://crowdin.com/project/docusaurus" target="_blank" rel="noreferrer noopener">Aidez-nous à traduire</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>Guides</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Premiers pas<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/fr/1.12.0/installation">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/site-preparation">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/site-creation">Creating your site</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/publishing">Publishing your site</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/docker">Docker</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides<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/fr/1.12.0/adding-blog">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/custom-pages">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/search">Enabling Search</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/fr/1.12.0/navigation">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/translation">Translations & Localization</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/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/fr/1.12.0/commands">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/doc-markdown">Markdown Features</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/api-pages">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.12.0/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/fr" 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="faire-référence-aux-documents-du-site"></a><a href="#faire-référence-aux-documents-du-site" 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>Faire référence aux documents du site</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>Par exemple, si vous êtes dans <code>doc2.md</code> et que vous voulez faire référence à <code>doc1.md</code>:</p>
|
||
<pre><code class="hljs css language-md">Je fais référence à un [<span class="hljs-string">document</span>](<span class="hljs-link">doc1.md</span>).
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="comment-les-documents-sont-liés"></a><a href="#comment-les-documents-sont-liés" 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>Comment les documents sont liés</h2>
|
||
<p>Les nouveaux fichiers markdown dans <code>docs</code> apparaîtront sous forme de pages sur le site web. Les liens vers ces documents sont créés d'abord en utilisant l'<code>id</code> dans l'entête de chaque document. S'il n'y a pas de champ <code>id</code>, alors le nom du fichier servira de nom de lien.</p>
|
||
<p>Par exemple, la création d'un fichier vide tel que <code>docs/getting-started.md</code> activera l'URL de la nouvelle page avec <code>/docs/getting-started.html</code>.</p>
|
||
<p>Supposons que vous ajoutiez ceci à votre document :</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">Pour</span> <span class="hljs-string">commencer</span>
|
||
<span class="hljs-meta">---</span>
|
||
<span class="hljs-string">Mon</span> <span class="hljs-string">nouveau</span> <span class="hljs-string">contenu</span> <span class="hljs-string">ici..</span>
|
||
</code></pre>
|
||
<p>Si vous définissez le champ <code>id</code> dans l'entête du fichier markdown, le doc sera alors accédé à partir d'une URL de la forme <code>/docs/intro.html</code>.</p>
|
||
<blockquote>
|
||
<p>Vous avez besoin d'un champ <code>id</code> pour pouvoir ajouter le document à la barre latérale.</p>
|
||
</blockquote>
|
||
<h2><a class="anchor" aria-hidden="true" id="ajouter-des-documents-à-une-barre-latérale"></a><a href="#ajouter-des-documents-à-une-barre-latérale" 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>Ajouter des documents à une barre latérale</h2>
|
||
<p>Souvent, vous voudrez ajouter un document à une barre latérale qui sera associée à l'un des entêtes dans la barre de navigation supérieure du site web. La barre latérale la plus courante, et celle qui est installée lorsque Docusaurus est initialisé, c'est la barre latérale <code>docs</code>.</p>
|
||
<blockquote>
|
||
<p>« docs » est juste un nom. Il n'a pas de signification particulière. Vous pouvez le modifier comme vous le souhaitez.</p>
|
||
</blockquote>
|
||
<p>Vous configurez le contenu de la barre latérale et l'ordre de ses documents, dans le fichier <code>website/sidebars.json</code>.</p>
|
||
<blockquote>
|
||
<p>Jusqu'à ce que vous ajoutiez votre document à <code>website/sidebars.json</code>, il ne sera accessible que par une URL directe. Le doc n'apparaîtra dans aucune barre latérale.</p>
|
||
</blockquote>
|
||
<p>Dans <code>sidebars.json</code>, ajoutez l'<code>id</code> que vous avez utilisé dans l'entête du document à la barre latérale/catégorie existante. Dans le cas ci-dessous, <code>docs</code> est le nom de la barre latérale et <code>Getting Started</code> est une catégorie dans la barre latérale.</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>Ou vous pouvez créer une nouvelle catégorie dans la barre latérale :</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-string">"docs"</span>: {
|
||
<span class="hljs-string">"Ma nouvelle catégorie de la barre latérale"</span>: [
|
||
<span class="hljs-string">"getting-started"</span>
|
||
],
|
||
...
|
||
},
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>Cependant, pour un document situé dans un sous-répertoire de docs comme ci-dessous :</p>
|
||
<pre><code class="hljs css language-bash">docs
|
||
└── dir1
|
||
└── getting-started.md
|
||
</code></pre>
|
||
<p>Vous devez fournir <code>le_répertoire/id</code> au lieu d'<code>id</code> dans <code>sidebars.json</code>.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-string">"docs"</span>: {
|
||
<span class="hljs-string">"Ma nouvelle catégorie de la barre latérale"</span>: [
|
||
<span class="hljs-string">"dir1/getting-started"</span>
|
||
],
|
||
...
|
||
},
|
||
...
|
||
}
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="ajouter-des-sous-catégories"></a><a href="#ajouter-des-sous-catégories" 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>Ajouter des sous-catégories</h3>
|
||
<p>Il est possible d'ajouter des sous-catégories à une barre latérale. Au lieu d'utiliser les ID comme contenu du tableau des catégories selon les exemples précédents, vous pouvez passer un objet où les clés seront le nom de la sous-catégorie et la valeur d'un tableau d'ID pour cette sous-catégorie.</p>
|
||
<pre><code class="hljs css language-js">{
|
||
<span class="hljs-string">"docs"</span>: {
|
||
<span class="hljs-string">"Mon exemple de catégorie"</span>: [
|
||
<span class="hljs-string">"exemples"</span>,
|
||
{
|
||
<span class="hljs-string">"type"</span>: <span class="hljs-string">"subcategory"</span>,
|
||
<span class="hljs-string">"label"</span>: <span class="hljs-string">"Mon exemple de sous-catégorie"</span>,
|
||
<span class="hljs-string">"ids"</span>: [
|
||
<span class="hljs-string">"mes-exemples"</span>,
|
||
...
|
||
]
|
||
},
|
||
{
|
||
<span class="hljs-string">"type"</span>: <span class="hljs-string">"subcategory"</span>,
|
||
<span class="hljs-string">"label"</span>: <span class="hljs-string">"Ma sous-catégorie suivante"</span>,
|
||
<span class="hljs-string">"ids"</span>: [
|
||
<span class="hljs-string">"quelques-autres-exemples"</span>
|
||
]
|
||
},
|
||
<span class="hljs-string">"encore-plus-exemples"</span>,
|
||
...
|
||
],
|
||
...
|
||
}
|
||
}
|
||
|
||
<span class="hljs-comment">/*
|
||
Ce qui précède va générer :
|
||
|
||
- Mon exemple de catégorie
|
||
- exemples
|
||
- Mon exemple de sous-catégorie
|
||
- mes-exemples
|
||
...
|
||
- Ma sous-catégorie suivante
|
||
- quelques-autres-exemples
|
||
- encore-plus-exemples
|
||
...
|
||
*/</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="ajouter-de-nouvelles-barres-latérales"></a><a href="#ajouter-de-nouvelles-barres-latérales" 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>Ajouter de nouvelles barres latérales</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">"exemples-barre-laterale"</span>: {
|
||
<span class="hljs-string">"Mon exemple de catégorie"</span>: [
|
||
<span class="hljs-string">"mes-exemples"</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="additions-to-the-site-navigation-bar"></a><a href="#additions-to-the-site-navigation-bar" 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>Additions to the Site Navigation Bar</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">'mes-exemples'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Exemples'</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="site-navigation-bar-positioning"></a><a href="#site-navigation-bar-positioning" 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>Site Navigation Bar Positioning</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 are 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="active-links-in-site-navigation-bar"></a><a href="#active-links-in-site-navigation-bar" 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>Active Links In Site Navigation Bar</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> links that belong to the same sidebar as the currently displayed document</li>
|
||
<li>The blog link when a blog post or the blog listing page is being displayed</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="secondary-on-page-navigation"></a><a href="#secondary-on-page-navigation" 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>Secondary On-Page Navigation</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/fr/1.12.0/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="catégories-pliables"></a><a href="#catégories-pliables" 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>Catégories pliables</h2>
|
||
<p>Pour les sites avec une quantité importante de contenu, nous prenons en charge l'option d'étendre / réduire les liens et les sous-catégories sous les catégories. Pour activer cette fonctionnalité, définissez l'option <code>docsSideNavCollapsible</code> configuration du site <a href="/docs/fr/1.12.0/site-config#optional-fields">option</a> dans <code>siteConfig.js</code> à 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/fr/1.12.0/search"><span class="arrow-prev">← </span><span>Activation de la recherche</span></a><a class="docs-next button" href="/docs/fr/1.12.0/translation"><span>Traductions & Localisation</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#faire-référence-aux-documents-du-site">Faire référence aux documents du site</a></li><li><a href="#comment-les-documents-sont-liés">Comment les documents sont liés</a></li><li><a href="#ajouter-des-documents-à-une-barre-latérale">Ajouter des documents à une barre latérale</a><ul class="toc-headings"><li><a href="#ajouter-des-sous-catégories">Ajouter des sous-catégories</a></li><li><a href="#ajouter-de-nouvelles-barres-latérales">Ajouter de nouvelles barres latérales</a></li></ul></li><li><a href="#additions-to-the-site-navigation-bar">Additions to the Site Navigation Bar</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="#site-navigation-bar-positioning">Site Navigation Bar Positioning</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="#active-links-in-site-navigation-bar">Active Links In Site Navigation Bar</a></li><li><a href="#secondary-on-page-navigation">Secondary On-Page Navigation</a></li><li><a href="#catégories-pliables">Catégories pliables</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/fr/installation">Getting Started</a><a href="
|
||
/docs/fr/versioning">Versioning</a><a href="
|
||
/docs/fr/translation">Localization</a><a href="
|
||
/docs/fr/search">Adding Search</a></div><div class="footerSection"><h5>Community</h5><a href="/fr/help">Help</a><a href="/fr/users">User Showcase</a><a href="/fr/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:fr","version:1.12.0"]}
|
||
});
|
||
</script></body></html> |