mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-17 11:07:07 +02:00
update website [ci skip]
This commit is contained in:
Facebook GitHub Bot
parent
7275161e21
commit
731f677df8
14 changed files with 14 additions and 14 deletions
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/api-pages.md" target="_blank">Edit this Doc</a><h1>Pages and Styles</h1></header><article><div><p>Docusaurus provides support for writing pages as React components inside the <code>website/pages</code> folder which will share the same header, footer, and styles as the rest of the site.</p><h2><a class="anchor" name="urls-for-pages"></a>Urls for Pages <a class="hash-link" href="#urls-for-pages">#</a></h2><p>Any <code>.js</code> files in <code>website/pages</code> will be rendered to static html using the path of the file after "pages". Files in <code>website/pages/en</code> will also get copied out into <code>pages</code> and will OVERRIDE any files of the same name in <code>pages</code>. For example, the page for the <code>website/pages/en/help.js</code> file will be found at the url <code>${baseUrl}en/help.js</code> as well as the url <code>${baseUrl}help.js</code>, where <code>${baseUrl}</code> is the <code>baseUrl</code> field set in your <a href="/docs/en/site-config.html" target="">siteConfig.js file</a>.</p><h2><a class="anchor" name="page-require-paths"></a>Page Require Paths <a class="hash-link" href="#page-require-paths">#</a></h2><p>Docusaurus provides a few useful React components for users to write their own pages, found in the <code>CompLibrary</code> module. This module is provided as part of Docusaurus in <code>node_modules/docusaurus</code>, so to access it, pages in the <code>pages</code> folder are temporarily copied into <code>node_modules/docusaurus</code> when rendering to static html. As seen in the example files, this means that a user page at <code>pages/en/index.js</code> uses a require path to <code>"../../core/CompLibrary.js"</code> to import the provided components.</p><p>What this means to the user is that if you wish to use the <code>CompLibrary</code> module, make sure the require path is set correctly. For example, a page at <code>page/mypage.js</code> would use a path <code>"../core/CompLibrary.js"</code>.</p><p>If you wish to use your own components inside the website folder, use <code>process.cwd()</code> which will refer to the <code>website</code> folder to construct require paths. For example, if you add a component to <code>website/core/mycomponent.js</code>, you can use the require path, <code>"process.cwd() + /core/mycomponent.js"</code>.</p><h2><a class="anchor" name="provided-components"></a>Provided Components <a class="hash-link" href="#provided-components">#</a></h2><p>Docusaurus provides the following components in <code>CompLibrary</code>:</p><h3><a class="anchor" name="complibrarymarked"></a><code>CompLibrary.Marked</code> <a class="hash-link" href="#complibrarymarked">#</a></h3><p>A React component that parses Markdown to html.</p><p>Example:</p><pre class="prism language-jsx"><span class="token keyword">const</span> Marked <span class="token operator">=</span> CompLibrary<span class="token punctuation">.</span>Marked<span class="token punctuation">;</span>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/api-pages.md" target="_blank">Edit</a><h1>Pages and Styles</h1></header><article><div><p>Docusaurus provides support for writing pages as React components inside the <code>website/pages</code> folder which will share the same header, footer, and styles as the rest of the site.</p><h2><a class="anchor" name="urls-for-pages"></a>Urls for Pages <a class="hash-link" href="#urls-for-pages">#</a></h2><p>Any <code>.js</code> files in <code>website/pages</code> will be rendered to static html using the path of the file after "pages". Files in <code>website/pages/en</code> will also get copied out into <code>pages</code> and will OVERRIDE any files of the same name in <code>pages</code>. For example, the page for the <code>website/pages/en/help.js</code> file will be found at the url <code>${baseUrl}en/help.js</code> as well as the url <code>${baseUrl}help.js</code>, where <code>${baseUrl}</code> is the <code>baseUrl</code> field set in your <a href="/docs/en/site-config.html" target="">siteConfig.js file</a>.</p><h2><a class="anchor" name="page-require-paths"></a>Page Require Paths <a class="hash-link" href="#page-require-paths">#</a></h2><p>Docusaurus provides a few useful React components for users to write their own pages, found in the <code>CompLibrary</code> module. This module is provided as part of Docusaurus in <code>node_modules/docusaurus</code>, so to access it, pages in the <code>pages</code> folder are temporarily copied into <code>node_modules/docusaurus</code> when rendering to static html. As seen in the example files, this means that a user page at <code>pages/en/index.js</code> uses a require path to <code>"../../core/CompLibrary.js"</code> to import the provided components.</p><p>What this means to the user is that if you wish to use the <code>CompLibrary</code> module, make sure the require path is set correctly. For example, a page at <code>page/mypage.js</code> would use a path <code>"../core/CompLibrary.js"</code>.</p><p>If you wish to use your own components inside the website folder, use <code>process.cwd()</code> which will refer to the <code>website</code> folder to construct require paths. For example, if you add a component to <code>website/core/mycomponent.js</code>, you can use the require path, <code>"process.cwd() + /core/mycomponent.js"</code>.</p><h2><a class="anchor" name="provided-components"></a>Provided Components <a class="hash-link" href="#provided-components">#</a></h2><p>Docusaurus provides the following components in <code>CompLibrary</code>:</p><h3><a class="anchor" name="complibrarymarked"></a><code>CompLibrary.Marked</code> <a class="hash-link" href="#complibrarymarked">#</a></h3><p>A React component that parses Markdown to html.</p><p>Example:</p><pre class="prism language-jsx"><span class="token keyword">const</span> Marked <span class="token operator">=</span> CompLibrary<span class="token punctuation">.</span>Marked<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Marked</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>Markdown syntax <span class="token keyword">for</span> a link<span class="token punctuation">]</span><span class="token punctuation">(</span>http<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>example<span class="token punctuation">.</span>com<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Marked</span><span class="token punctuation">></span></span></pre><h3><a class="anchor" name="complibrarycontainer"></a><code>CompLibrary.Container</code> <a class="hash-link" href="#complibrarycontainer">#</a></h3><p>A React container component using Docusaurus styles. Has optional padding and background color attributes that you can configure.</p><p>Padding choices: <code>all</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code>.<br/>Background choices: <code>dark</code>, <code>highlight</code>, <code>light</code>.</p><p>Example:</p><pre class="prism language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Container</span> <span class="token attr-name">padding</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"bottom"</span><span class="token punctuation">,</span> <span class="token string">"top"</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token operator">...</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-blog.md" target="_blank">Edit this Doc</a><h1>Adding a Blog</h1></header><article><div><h2><a class="anchor" name="initial-setup"></a>Initial Setup <a class="hash-link" href="#initial-setup">#</a></h2><p>To setup your site's blog, start by creating a <code>blog</code> folder within your repo's <code>website</code> directory.</p><p>Then, add a header link to your blog within <code>siteConfig.js</code>:</p><pre class="prism language-javascript">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-blog.md" target="_blank">Edit</a><h1>Adding a Blog</h1></header><article><div><h2><a class="anchor" name="initial-setup"></a>Initial Setup <a class="hash-link" href="#initial-setup">#</a></h2><p>To setup your site's blog, start by creating a <code>blog</code> folder within your repo's <code>website</code> directory.</p><p>Then, add a header link to your blog within <code>siteConfig.js</code>:</p><pre class="prism language-javascript">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">{</span>blog<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Blog'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-custom-pages.md" target="_blank">Edit this Doc</a><h1>Custom Pages</h1></header><article><div><h2><a class="anchor" name="customizing-your-home-page"></a>Customizing Your Home Page <a class="hash-link" href="#customizing-your-home-page">#</a></h2><p>The easiest way to get started customizing your home page is to use the <a href="/docs/en/site-creation.html" target="">examples generated previously</a>. You can start your local server and go to <code>http://localhost:3000</code> to see what the example home page looks like. From there, edit the <code>website/pages/en/index.js</code> file and its various components to use the images and text you want for your project.</p><h2><a class="anchor" name="adding-other-custom-pages"></a>Adding Other Custom Pages <a class="hash-link" href="#adding-other-custom-pages">#</a></h2><p>Docusaurus provides some simple example pages (<code>index.js</code>, <code>users.js</code>, <code>help.js</code>), but of course you're also free to write your own pages however you want. It is strongly suggested that you at least have an index page, but none of the pages are mandatory to include. More information on how to use the provided components or include your own can be found <a href="/docs/en/api-pages.html" target="">here</a>. Information on how to link to your different pages in the header navigation bar can be found <a href="/docs/en/navigation.html" target="">here</a>.</p><h2><a class="anchor" name="customizing-your-site-footer"></a>Customizing Your Site Footer <a class="hash-link" href="#customizing-your-site-footer">#</a></h2><p>Starting from the example <code>core/Footer.js</code> file you <a href="/docs/en/site-creation.html" target="">generated before</a>, edit the footer to include any links to pages on your site or elsewhere that you wish to have. </p><p>The example provided has three columns with a footer image on the left and Facebook's open source logo and copyright at the bottom. If your project is not a Facebook open source project, remove the logo and copyright. Otherwise, feel free to get creative with your footer and make it look however you'd like!</p><p>Some suggestions for links you may want to provide: documentation, API, Twitter, Discord, Facebook groups, Stack Overflow, GitHub, etc.</p><p>Your footer will automatically get applied to all pages on your site, including docs and blog posts. The sole exception to this is any static html pages you include.</p><p>If you don't want a footer for your site, change the <code>render</code> function of <code>core/Footer.js</code> to return <code>null</code>. e.g.,</p><pre class="prism language-jsx"><span class="token keyword">const</span> React <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"react"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-custom-pages.md" target="_blank">Edit</a><h1>Custom Pages</h1></header><article><div><h2><a class="anchor" name="customizing-your-home-page"></a>Customizing Your Home Page <a class="hash-link" href="#customizing-your-home-page">#</a></h2><p>The easiest way to get started customizing your home page is to use the <a href="/docs/en/site-creation.html" target="">examples generated previously</a>. You can start your local server and go to <code>http://localhost:3000</code> to see what the example home page looks like. From there, edit the <code>website/pages/en/index.js</code> file and its various components to use the images and text you want for your project.</p><h2><a class="anchor" name="adding-other-custom-pages"></a>Adding Other Custom Pages <a class="hash-link" href="#adding-other-custom-pages">#</a></h2><p>Docusaurus provides some simple example pages (<code>index.js</code>, <code>users.js</code>, <code>help.js</code>), but of course you're also free to write your own pages however you want. It is strongly suggested that you at least have an index page, but none of the pages are mandatory to include. More information on how to use the provided components or include your own can be found <a href="/docs/en/api-pages.html" target="">here</a>. Information on how to link to your different pages in the header navigation bar can be found <a href="/docs/en/navigation.html" target="">here</a>.</p><h2><a class="anchor" name="customizing-your-site-footer"></a>Customizing Your Site Footer <a class="hash-link" href="#customizing-your-site-footer">#</a></h2><p>Starting from the example <code>core/Footer.js</code> file you <a href="/docs/en/site-creation.html" target="">generated before</a>, edit the footer to include any links to pages on your site or elsewhere that you wish to have. </p><p>The example provided has three columns with a footer image on the left and Facebook's open source logo and copyright at the bottom. If your project is not a Facebook open source project, remove the logo and copyright. Otherwise, feel free to get creative with your footer and make it look however you'd like!</p><p>Some suggestions for links you may want to provide: documentation, API, Twitter, Discord, Facebook groups, Stack Overflow, GitHub, etc.</p><p>Your footer will automatically get applied to all pages on your site, including docs and blog posts. The sole exception to this is any static html pages you include.</p><p>If you don't want a footer for your site, change the <code>render</code> function of <code>core/Footer.js</code> to return <code>null</code>. e.g.,</p><pre class="prism language-jsx"><span class="token keyword">const</span> React <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"react"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Footer</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/api-doc-markdown.md" target="_blank">Edit this Doc</a><h1>Markdown Features</h1></header><article><div><h2><a class="anchor" name="markdown-headers"></a>Markdown Headers <a class="hash-link" href="#markdown-headers">#</a></h2><h2><a class="anchor" name="documents"></a>Documents <a class="hash-link" href="#documents">#</a></h2><p>Documents use the following markdown header fields that are enclosed by a line <code>---</code> on either side:</p><p><code>id</code>: A unique document id. If this field is not present, the document's <code>id</code> will default to it's file name (without the extension).</p><p><code>title</code>: The title of your document. If this field is not present, the document's <code>title</code> will default to it's <code>id</code>.</p><p><code>sidebar_label</code>: The text shown in the document sidebar for this document. If this field is not present, the document's <code>sidebar_label</code> will default to it's <code>title</code>.</p><p>For example:</p><pre class="prism language-markup">---
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/api-doc-markdown.md" target="_blank">Edit</a><h1>Markdown Features</h1></header><article><div><h2><a class="anchor" name="markdown-headers"></a>Markdown Headers <a class="hash-link" href="#markdown-headers">#</a></h2><h2><a class="anchor" name="documents"></a>Documents <a class="hash-link" href="#documents">#</a></h2><p>Documents use the following markdown header fields that are enclosed by a line <code>---</code> on either side:</p><p><code>id</code>: A unique document id. If this field is not present, the document's <code>id</code> will default to it's file name (without the extension).</p><p><code>title</code>: The title of your document. If this field is not present, the document's <code>title</code> will default to it's <code>id</code>.</p><p><code>sidebar_label</code>: The text shown in the document sidebar for this document. If this field is not present, the document's <code>sidebar_label</code> will default to it's <code>title</code>.</p><p>For example:</p><pre class="prism language-markup">---
|
||||
id: doc1
|
||||
title: My Document
|
||||
sidebar_label: Document
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/getting-started-installation.md" target="_blank">Edit this Doc</a><h1>Installation</h1></header><article><div><p>Docusaurus was designed from the ground up to be easily installed and used to get your website up an running quickly. To install Docusaurus, follow these steps:</p><ol><li>Create a <code>website</code> folder in the root of your GitHub repo.</li><li><code>cd website</code></li><li><p>Create a <code>package.json</code> file with the following scripts that will be used when developing documentation with Docusaurus:</p><pre class="prism language-json"> <span class="token punctuation">{</span>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/getting-started-installation.md" target="_blank">Edit</a><h1>Installation</h1></header><article><div><p>Docusaurus was designed from the ground up to be easily installed and used to get your website up an running quickly. To install Docusaurus, follow these steps:</p><ol><li>Create a <code>website</code> folder in the root of your GitHub repo.</li><li><code>cd website</code></li><li><p>Create a <code>package.json</code> file with the following scripts that will be used when developing documentation with Docusaurus:</p><pre class="prism language-json"> <span class="token punctuation">{</span>
|
||||
<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"docusaurus-start"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"docusaurus-build"</span><span class="token punctuation">,</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-navigation.md" target="_blank">Edit this Doc</a><h1>Navigation and Sidebars</h1></header><article><div><h2><a class="anchor" name="new-hidden-docs"></a>New Hidden Docs <a class="hash-link" href="#new-hidden-docs">#</a></h2><p>New markdown files within <code>docs</code> will show up as pages on the website. Creating a file such as "docs/getting-started.md" will enable the new page <code>/docs/getting-started.html</code>.</p><p>To change the id (link name) of the file, set the <code>id</code> field in the markdown header. At the top of <code>getting-started.md</code>:</p><pre class="prism language-javascript"><span class="token operator">--</span><span class="token operator">-</span>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-navigation.md" target="_blank">Edit</a><h1>Navigation and Sidebars</h1></header><article><div><h2><a class="anchor" name="new-hidden-docs"></a>New Hidden Docs <a class="hash-link" href="#new-hidden-docs">#</a></h2><p>New markdown files within <code>docs</code> will show up as pages on the website. Creating a file such as "docs/getting-started.md" will enable the new page <code>/docs/getting-started.html</code>.</p><p>To change the id (link name) of the file, set the <code>id</code> field in the markdown header. At the top of <code>getting-started.md</code>:</p><pre class="prism language-javascript"><span class="token operator">--</span><span class="token operator">-</span>
|
||||
id<span class="token punctuation">:</span> intro
|
||||
title<span class="token punctuation">:</span> Getting Started
|
||||
<span class="token operator">--</span><span class="token operator">-</span>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-search.md" target="_blank">Edit this Doc</a><h1>Enabling Search</h1></header><article><div><p>Docusaurus supports search using <a href="https://community.algolia.com/docsearch/" target="_blank">Algolia DocSearch</a>. Once you have set up your site, <a href="https://community.algolia.com/docsearch/" target="_blank">enter your site information</a> to have Algolia crawl your website's documentation pages. Algolia will then send you an API key and index name for your site.</p><h3><a class="anchor" name="enabling-the-search-bar"></a>Enabling the Search Bar <a class="hash-link" href="#enabling-the-search-bar">#</a></h3><p>Enter your search-only API key and index name into <code>siteConfig.js</code> in the <code>algolia</code> section to enable search for your site.</p><pre class="prism language-js"><span class="token keyword">const</span> siteConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-search.md" target="_blank">Edit</a><h1>Enabling Search</h1></header><article><div><p>Docusaurus supports search using <a href="https://community.algolia.com/docsearch/" target="_blank">Algolia DocSearch</a>. Once you have set up your site, <a href="https://community.algolia.com/docsearch/" target="_blank">enter your site information</a> to have Algolia crawl your website's documentation pages. Algolia will then send you an API key and index name for your site.</p><h3><a class="anchor" name="enabling-the-search-bar"></a>Enabling the Search Bar <a class="hash-link" href="#enabling-the-search-bar">#</a></h3><p>Enter your search-only API key and index name into <code>siteConfig.js</code> in the <code>algolia</code> section to enable search for your site.</p><pre class="prism language-js"><span class="token keyword">const</span> siteConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>
|
||||
algolia<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
apiKey<span class="token punctuation">:</span> <span class="token string">"my-search-only-api-key-1234"</span><span class="token punctuation">,</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/api-site-config.md" target="_blank">Edit this Doc</a><h1>siteConfig.js</h1></header><article><div><p>A large part of site configuration is done by editing the <code>siteConfig.js</code> file.</p><h2><a class="anchor" name="user-showcase"></a>User Showcase <a class="hash-link" href="#user-showcase">#</a></h2><p>The <code>users</code> array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the <code>pages/en/index.js</code> and <code>pages/en/users.js</code> files provided. Each user object should have <code>caption</code>, <code>image</code>, <code>infoLink</code>, and <code>pinned</code> fields. The <code>caption</code> is the text showed when someone hovers over the <code>image</code> of that user, and the <code>infoLink</code> is where clicking the image will bring someon. The <code>pinned</code> field determines whether or not it shows up on the <code>index</code> page.</p><p>Currently this <code>users</code> array is used only by the <code>index.js</code> and <code>users.js</code> example files. If you do not wish to have a users page or show users on the <code>index</code> page, you may remove this section.</p><h2><a class="anchor" name="siteconfig-fields"></a>siteConfig Fields <a class="hash-link" href="#siteconfig-fields">#</a></h2><p>The <code>siteConfig</code> object contains the bulk of the configuration settings for your website.</p><h3><a class="anchor" name="mandatory-fields"></a>Mandatory Fields <a class="hash-link" href="#mandatory-fields">#</a></h3><p><code>title</code> - Title for your website.</p><p><code>tagline</code> - Tagline for your website. </p><p><code>url</code> - url for your site.</p><p><code>baseUrl</code> - baseUrl for your site.</p><p><code>projectName</code> - Project name. This must match your GitHub repo project name (case sensitive).</p><p><code>noIndex</code> - Boolean. If true, Docusaurus will politely ask crawlers and search engines to avoid indexing your site. This is done with a header tag and so only applies to docs and pages. Will not attempt to hide static resources. This is a best effort request. Malicious crawlers can and will still index your site.</p><p><code>headerLinks</code> - Links that will be used in the header navigation bar. The <code>label</code> field of each object will be the link text and will also be translated for each language.</p><p>Example Usage:</p><pre class="prism language-js">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/api-site-config.md" target="_blank">Edit</a><h1>siteConfig.js</h1></header><article><div><p>A large part of site configuration is done by editing the <code>siteConfig.js</code> file.</p><h2><a class="anchor" name="user-showcase"></a>User Showcase <a class="hash-link" href="#user-showcase">#</a></h2><p>The <code>users</code> array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the <code>pages/en/index.js</code> and <code>pages/en/users.js</code> files provided. Each user object should have <code>caption</code>, <code>image</code>, <code>infoLink</code>, and <code>pinned</code> fields. The <code>caption</code> is the text showed when someone hovers over the <code>image</code> of that user, and the <code>infoLink</code> is where clicking the image will bring someon. The <code>pinned</code> field determines whether or not it shows up on the <code>index</code> page.</p><p>Currently this <code>users</code> array is used only by the <code>index.js</code> and <code>users.js</code> example files. If you do not wish to have a users page or show users on the <code>index</code> page, you may remove this section.</p><h2><a class="anchor" name="siteconfig-fields"></a>siteConfig Fields <a class="hash-link" href="#siteconfig-fields">#</a></h2><p>The <code>siteConfig</code> object contains the bulk of the configuration settings for your website.</p><h3><a class="anchor" name="mandatory-fields"></a>Mandatory Fields <a class="hash-link" href="#mandatory-fields">#</a></h3><p><code>title</code> - Title for your website.</p><p><code>tagline</code> - Tagline for your website. </p><p><code>url</code> - url for your site.</p><p><code>baseUrl</code> - baseUrl for your site.</p><p><code>projectName</code> - Project name. This must match your GitHub repo project name (case sensitive).</p><p><code>noIndex</code> - Boolean. If true, Docusaurus will politely ask crawlers and search engines to avoid indexing your site. This is done with a header tag and so only applies to docs and pages. Will not attempt to hide static resources. This is a best effort request. Malicious crawlers can and will still index your site.</p><p><code>headerLinks</code> - Links that will be used in the header navigation bar. The <code>label</code> field of each object will be the link text and will also be translated for each language.</p><p>Example Usage:</p><pre class="prism language-js">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span spellcheck="true" class="token comment">// Links to document with id doc1 for current language/version</span>
|
||||
<span class="token punctuation">{</span> doc<span class="token punctuation">:</span> <span class="token string">"doc1"</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">"Getting Started"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span spellcheck="true" class="token comment">// Link to page found at pages/en/help.js or if that does not exist, pages/help.js, for current language</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/getting-started-site-creation.md" target="_blank">Edit this Doc</a><h1>Creating your site</h1></header><article><div><p>Docusaurus' primary purpose of existence is to make it super simple for you to create documentation for your project and have a site to house those docs.</p><p>After <a href="/docs/en/installation.html" target="">installation</a> and <a href="/docs/en/site-preparation.html" target="">preparation</a>, much of the work to create a basic site for your docs is already complete.</p><h2><a class="anchor" name="load-the-example-site"></a>Load the Example Site <a class="hash-link" href="#load-the-example-site">#</a></h2><p><a href="/docs/en/site-preparation.html" target="">Preparation</a> created a sample site for you to see Docusaurus in action. However, it also provided the infrastructure that will be used as you are developing your own site.</p><h2><a class="anchor" name="site-structure"></a>Site Structure <a class="hash-link" href="#site-structure">#</a></h2><p>After loading the example site, you should see a structure in your repo that looks similar to:</p><pre class="prism language-javascript">project<span class="token operator">-</span>repo<span class="token operator">/</span>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/getting-started-site-creation.md" target="_blank">Edit</a><h1>Creating your site</h1></header><article><div><p>Docusaurus' primary purpose of existence is to make it super simple for you to create documentation for your project and have a site to house those docs.</p><p>After <a href="/docs/en/installation.html" target="">installation</a> and <a href="/docs/en/site-preparation.html" target="">preparation</a>, much of the work to create a basic site for your docs is already complete.</p><h2><a class="anchor" name="load-the-example-site"></a>Load the Example Site <a class="hash-link" href="#load-the-example-site">#</a></h2><p><a href="/docs/en/site-preparation.html" target="">Preparation</a> created a sample site for you to see Docusaurus in action. However, it also provided the infrastructure that will be used as you are developing your own site.</p><h2><a class="anchor" name="site-structure"></a>Site Structure <a class="hash-link" href="#site-structure">#</a></h2><p>After loading the example site, you should see a structure in your repo that looks similar to:</p><pre class="prism language-javascript">project<span class="token operator">-</span>repo<span class="token operator">/</span>
|
||||
docs<span class="token operator">/</span>
|
||||
doc1<span class="token punctuation">.</span>md
|
||||
website<span class="token operator">/</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/getting-started-preparation.md" target="_blank">Edit this Doc</a><h1>Site Preparation</h1></header><article><div><p>After <a href="/docs/en/installation.html" target="">installing Docusaurus</a>, you will want to install and run the example site included. This serves dual purposes.</p><ol><li>Verifying that Docusaurus was installed correctly.</li><li>Providing you the skeleton to create your site.</li></ol><h2><a class="anchor" name="verifying-installation"></a>Verifying Installation <a class="hash-link" href="#verifying-installation">#</a></h2><ol><li><p>Generate the files for the example site by running <code>examples</code> using <code>yarn</code> or <code>npm</code>.</p><pre class="prism language-javascript"> npm run examples</pre><p> or</p><pre class="prism language-javascript"> yarn run examples</pre><blockquote><p>If any of the files created by <code>[yarn | npm] run examples</code> already exists, Docusaurus will not overwrite them.</p></blockquote></li><li><p>Run the server.</p><pre class="prism language-javascript"> npm run start</pre><p> or</p><pre class="prism language-javascript"> yarn run start</pre></li><li><p>Load the example site at <a href="http://localhost:3000">http://localhost:3000</a>. You should see the example site loaded in your web browser.</p></li></ol><h2><a class="anchor" name="example-site-configuration"></a>Example Site Configuration <a class="hash-link" href="#example-site-configuration">#</a></h2><p>Loading the example site will create the following files/folders:</p><pre class="prism language-javascript">website<span class="token operator">/</span>core<span class="token operator">/</span>Footer<span class="token punctuation">.</span>js
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/getting-started-preparation.md" target="_blank">Edit</a><h1>Site Preparation</h1></header><article><div><p>After <a href="/docs/en/installation.html" target="">installing Docusaurus</a>, you will want to install and run the example site included. This serves dual purposes.</p><ol><li>Verifying that Docusaurus was installed correctly.</li><li>Providing you the skeleton to create your site.</li></ol><h2><a class="anchor" name="verifying-installation"></a>Verifying Installation <a class="hash-link" href="#verifying-installation">#</a></h2><ol><li><p>Generate the files for the example site by running <code>examples</code> using <code>yarn</code> or <code>npm</code>.</p><pre class="prism language-javascript"> npm run examples</pre><p> or</p><pre class="prism language-javascript"> yarn run examples</pre><blockquote><p>If any of the files created by <code>[yarn | npm] run examples</code> already exists, Docusaurus will not overwrite them.</p></blockquote></li><li><p>Run the server.</p><pre class="prism language-javascript"> npm run start</pre><p> or</p><pre class="prism language-javascript"> yarn run start</pre></li><li><p>Load the example site at <a href="http://localhost:3000">http://localhost:3000</a>. You should see the example site loaded in your web browser.</p></li></ol><h2><a class="anchor" name="example-site-configuration"></a>Example Site Configuration <a class="hash-link" href="#example-site-configuration">#</a></h2><p>Loading the example site will create the following files/folders:</p><pre class="prism language-javascript">website<span class="token operator">/</span>core<span class="token operator">/</span>Footer<span class="token punctuation">.</span>js
|
||||
website<span class="token regex">/pages/</span><span class="token operator">...</span>
|
||||
website<span class="token operator">/</span><span class="token keyword">static</span><span class="token regex">/img/</span><span class="token operator">...</span>
|
||||
website<span class="token operator">/</span>siteConfig<span class="token punctuation">.</span>js
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-translation.md" target="_blank">Edit this Doc</a><h1>Translations & Localization</h1></header><article><div><p>Docusaurus allows for easy translation functionality using Crowdin. Documentation files written in English are uploaded to Crowdin for translation by users within a community. Top-level pages written with English strings can be translated by wrapping any strings you want to translate in a <code><translate></code> tag. Other titles and labels will also be found and properly translated.</p><h2><a class="anchor" name="docusaurus-translation-configurations"></a>Docusaurus Translation Configurations <a class="hash-link" href="#docusaurus-translation-configurations">#</a></h2><p>To generate example files for translations with Docusuaurus, run the <code>examples</code> script with the command line argument <code>translations</code>:</p><pre class="prism language-javascript">npm run examples translations</pre><p>or</p><pre class="prism language-javascript">yarn examples translations</pre><p>This will create the following files:</p><pre class="prism language-javascript">pages<span class="token operator">/</span>en<span class="token operator">/</span>help<span class="token operator">-</span><span class="token keyword">with</span><span class="token operator">-</span>translations<span class="token punctuation">.</span>js
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-translation.md" target="_blank">Edit</a><h1>Translations & Localization</h1></header><article><div><p>Docusaurus allows for easy translation functionality using Crowdin. Documentation files written in English are uploaded to Crowdin for translation by users within a community. Top-level pages written with English strings can be translated by wrapping any strings you want to translate in a <code><translate></code> tag. Other titles and labels will also be found and properly translated.</p><h2><a class="anchor" name="docusaurus-translation-configurations"></a>Docusaurus Translation Configurations <a class="hash-link" href="#docusaurus-translation-configurations">#</a></h2><p>To generate example files for translations with Docusuaurus, run the <code>examples</code> script with the command line argument <code>translations</code>:</p><pre class="prism language-javascript">npm run examples translations</pre><p>or</p><pre class="prism language-javascript">yarn examples translations</pre><p>This will create the following files:</p><pre class="prism language-javascript">pages<span class="token operator">/</span>en<span class="token operator">/</span>help<span class="token operator">-</span><span class="token keyword">with</span><span class="token operator">-</span>translations<span class="token punctuation">.</span>js
|
||||
languages<span class="token punctuation">.</span>js
|
||||
crowdin<span class="token punctuation">.</span>yaml</pre><p>The <code>pages/en/help-with-translations.js</code> file includes the same starter help page generated by the <code>examples</code> script, but now includes translation tags.</p><p>The <code>languages.js</code> file tells Docusaurus what languages you want to enable for your site. By default, we expect English to be enabled.</p><p>The <code>crowdin.yaml</code> file is used to configure crowdin integration, and is copied up one level into your docusaurus project repo. If your docusaurus project resides in <code>/project/website</code>, then <code>crowdin.yaml</code> will be copied to <code>/project/crowdin.yaml</code>. </p><h2><a class="anchor" name="translating-your-existing-docs"></a>Translating Your Existing Docs <a class="hash-link" href="#translating-your-existing-docs">#</a></h2><p>Your documentation files do not need to be changed or moved to support translations. They will be uploaded to Crowdin to be translated directly.</p><h2><a class="anchor" name="enabling-translations-on-pages"></a>Enabling Translations on Pages <a class="hash-link" href="#enabling-translations-on-pages">#</a></h2><p>Pages allow you to customize layout and specific content of pages like a custom index page or help page.</p><p>Pages with text that you want translated should be placed in <code>website/pages/en</code> folder.</p><p>Wrap strings you want translated in a <code><translate></code> tag, and add the following <code>require</code> statement to the top of the file:</p><pre class="prism language-jsx"><span class="token operator">...</span>
|
||||
<span class="token keyword">const</span> translate <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"../../server/translate.js"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>translate<span class="token punctuation">;</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-versioning.md" target="_blank">Edit this Doc</a><h1>Versioning</h1></header><article><div><p>Users can use the <code>version</code> script to cut a new documentation version based on the latest content in the <code>docs</code> folder. That specific set of documentation will then be preserved and accessible even as the documentation in the <code>docs</code> folder changes moving forward.</p><h2><a class="anchor" name="how-to-create-new-versions"></a>How to Create New Versions <a class="hash-link" href="#how-to-create-new-versions">#</a></h2><p>Add the following script to your <code>package.json</code> file:</p><pre class="prism language-json">...
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-versioning.md" target="_blank">Edit</a><h1>Versioning</h1></header><article><div><p>Users can use the <code>version</code> script to cut a new documentation version based on the latest content in the <code>docs</code> folder. That specific set of documentation will then be preserved and accessible even as the documentation in the <code>docs</code> folder changes moving forward.</p><h2><a class="anchor" name="how-to-create-new-versions"></a>How to Create New Versions <a class="hash-link" href="#how-to-create-new-versions">#</a></h2><p>Add the following script to your <code>package.json</code> file:</p><pre class="prism language-json">...
|
||||
<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"docusaurus-version"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue