mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-10 23:57:22 +02:00
184 lines
No EOL
19 KiB
HTML
184 lines
No EOL
19 KiB
HTML
<!DOCTYPE html><html lang="fr"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Create Pages · Docusaurus</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Dans cette section, nous apprendrons comment créer deux types de pages dans Docusaurus : une page normale et une page de documentation."/><meta name="docsearch:version" content="1.13.0"/><meta name="docsearch:language" content="fr"/><meta property="og:title" content="Create Pages · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/"/><meta property="og:description" content="Dans cette section, nous apprendrons comment créer deux types de pages dans Docusaurus : une page normale et une page de documentation."/><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.13.0</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/fr/1.13.0/installation" target="_self">Documentations</a></li><li class="siteNavGroupActive"><a href="/docs/fr/1.13.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.13.0/tutorial-create-pages">English</a></li><li><a href="/docs/ko/1.13.0/tutorial-create-pages">한국어</a></li><li><a href="/docs/pt-BR/1.13.0/tutorial-create-pages">Português (Brasil)</a></li><li><a href="/docs/ro/1.13.0/tutorial-create-pages">Română</a></li><li><a href="/docs/ru/1.13.0/tutorial-create-pages">Русский</a></li><li><a href="/docs/zh-CN/1.13.0/tutorial-create-pages">简体中文</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>Tutoriel</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Tutoriel<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.13.0/tutorial-setup">Setting Up</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.13.0/tutorial-create-new-site">Create a New Site</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/fr/1.13.0/tutorial-create-pages">Create Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.13.0/tutorial-publish-site">Publish the Site</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/1.13.0/tutorial-version">Add Versions</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">Create Pages</h1></header><article><div><span><p>Dans cette section, nous apprendrons comment créer deux types de pages dans Docusaurus : une page normale et une page de documentation.</p>
|
||
<p><img src="/img/undraw_docusaurus_tree.svg" alt="Docusaurus MacBook"> {.docImage}</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="création-dune-page-ordinaire"></a><a href="#création-dune-page-ordinaire" 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>Création d'une page ordinaire</h2>
|
||
<ol>
|
||
<li><p>Dans le répertoire <code>site/pages/fr</code> de votre dépôt, enregistrez un fichier texte appelé <code>hello-world.js</code> avec le contenu suivant :</p>
|
||
<p>const React = require('react');</p>
|
||
<p>const CompLibrary = require('../../core/CompLibrary.js');</p>
|
||
<p>const Container = CompLibrary.Container;
|
||
const GridBlock = CompLibrary.GridBlock;</p>
|
||
<p>function HelloWorld(props) {
|
||
return (
|
||
<div className="docMainWrapper wrapper">
|
||
<Container className="mainContainer documentContainer postContainer">
|
||
<h1>Hello World!</h1>
|
||
<p>C'est ma première page !</p>
|
||
</Container>
|
||
</div>
|
||
);
|
||
}</p>
|
||
<p>module.exports = HelloWorld;</p></li>
|
||
</ol>
|
||
<blockquote>
|
||
<p>Utilisez n'importe quel éditeur de texte pour créer le fichier, tel que <a href="https://code.visualstudio.com/download">Microsoft Visual Studio Code</a> ou <a href="https://www.activestate.com/komodo-edit">Komodo Edit</a>.</p>
|
||
</blockquote>
|
||
<ol start="2">
|
||
<li>Allez à l'adresse <a href="http://localhost:3000/hello-world">http://localhost:3000/hello-world</a> et vous devriez pouvoir voir la nouvelle page.</li>
|
||
<li>Changez le texte dans le <code><p>...</p></code> en "Je peux écrire du JSX ici !" et enregistrer le fichier à nouveau. Le navigateur devrait se rafraîchir automatiquement pour faire apparaître le changement.</li>
|
||
</ol>
|
||
<pre><code class="hljs css language-diff"><span class="hljs-deletion">- <p>C'est ma première page !</p></span>
|
||
<span class="hljs-addition">+ <p>Je peux écrire du JSX ici !</p></span>
|
||
</code></pre>
|
||
<p>React est utilisé comme moteur de template pour le rendu du balisage statique. Vous pouvez tirer parti de la puissance d'expression de React pour créer du contenu web riche. Apprenez en plus sur la création de pages <a href="custom-pages">ici</a>.</p>
|
||
<p><img src="/img/undraw_docusaurus_react.svg" alt="Docusaurus React"> {.docImage}</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="création-dune-page-de-documentation"></a><a href="#création-dune-page-de-documentation" 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>Création d'une page de documentation</h2>
|
||
<ol>
|
||
<li><p>Créer un nouveau fichier dans le dossier <code>docs</code> appelé <code>doc9.md</code>. Le dossier <code>docs</code> est à la racine de votre projet Docusaurus, un niveau au-dessus de <code>website</code>.</p></li>
|
||
<li><p>Collez le contenu suivant :</p>
|
||
<hr>
|
||
<p>id: doc9
|
||
title: Il s'agit du Doc 9</p>
|
||
<hr>
|
||
<p>Je peux écrire du contenu en utilisant la <a href="https://github.github.com/gfm/">syntaxe de Markdown flavored GitHub</a>.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="syntaxe-de-markdown"></a><a href="#syntaxe-de-markdown" 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>Syntaxe de Markdown</h2>
|
||
<p><strong>Gras</strong> <em>italique</em> <code>code</code> <a href="#url">Liens</a></p>
|
||
<blockquote>
|
||
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
||
id sem consectetuer libero luctus adipiscing.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>Salut</li>
|
||
<li>Ho</li>
|
||
<li>Allons-y</li>
|
||
</ul></li>
|
||
</ol>
|
||
<ol start="3">
|
||
<li>Le <code>sidebars.json</code> est l'endroit où vous spécifiez l'ordre de vos pages de documentation, alors ouvrez <code>website/sidebars.json</code> et ajoutez <code>"doc9"</code> après <code>"doc1"</code>. Cet ID doit être le même que dans les métadonnées du fichier Markdown ci-dessus, donc si vous avez donné un ID différent à l'étape 2, assurez-vous d'utiliser le même ID dans le fichier de la barre latérale.</li>
|
||
</ol>
|
||
<pre><code class="hljs css language-diff">{
|
||
"docs": {
|
||
"Docusaurus": [
|
||
"doc1",
|
||
<span class="hljs-addition">+ "doc9"</span>
|
||
],
|
||
"First Category": ["doc2"],
|
||
"Second Category": ["doc3"]
|
||
},
|
||
"docs-other": {
|
||
"First Category": ["doc4", "doc5"]
|
||
}
|
||
}
|
||
</code></pre>
|
||
<ol start="4">
|
||
<li>Un redémarrage du serveur est nécessaire pour récupérer les modifications de la barre latérale, alors allez dans votre terminal, tuer votre serveur de développement (<kbd>Cmd</kbd> + <kbd>C</kbd> ou <kbd>Ctrl</kbd> + <kbd>C</kbd>), et exécuter <code>npm start</code> ou <code>yarn start</code>.</li>
|
||
<li>Naviguez vers l'adresse <a href="http://localhost:3000/docs/doc9">http://localhost:3000/docs/doc9</a> pour voir la nouvelle page de documentation.</li>
|
||
</ol>
|
||
<p>Vous avez créé votre première page de documentation sur Docusaurus !</p>
|
||
<p>Apprenez en plus sur la création de page de documentation <a href="navigation">ici</a>.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/fr/1.13.0/tutorial-create-new-site"><span class="arrow-prev">← </span><span>Créer un nouveau site</span></a><a class="docs-next button" href="/docs/fr/1.13.0/tutorial-publish-site"><span>Publier le site</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#création-dune-page-ordinaire">Création d'une page ordinaire</a></li><li><a href="#création-dune-page-de-documentation">Création d'une page de documentation</a></li><li><a href="#syntaxe-de-markdown">Syntaxe de Markdown</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.13.0"]}
|
||
});
|
||
</script></body></html> |