3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-28 16:37:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

Deploy website

Browse source 
Deploy website version based on 8cd4b4fca6
This commit is contained in:
Website Deployment Script 2018-07-09 03:22:29 +00:00
parent daf63274f7
commit 5d4d0d0423
2334 changed files with 12240 additions and 12240 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/en/1.3.0/adding-blog.html
View file

@ -50,7 +50,7 @@
</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/facebook/docusaurus/edit/master/docs/guides-blog.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Adding a Blog</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="initial-setup"></a><a href="#initial-setup" 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>Initial Setup</h2>
<p>To setup your site's blog, start by creating a <code>blog</code> directory 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><code class="hljs css languages- js">headerLinks: [
<pre><code class="hljs css languages-js">headerLinks: [
...
{ <span class="hljs-attr">blog</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Blog'</span> },
...
@ -59,7 +59,7 @@
<h2><a class="anchor" aria-hidden="true" id="adding-posts"></a><a href="#adding-posts" 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 Posts</h2>
<p>To publish in the blog, create a file within the blog directory with a formatted name of <code>YYYY-MM-DD-My-Blog-Post-Title.md</code>. The post date is extracted from the file name.</p>
<p>For example, at <code>website/blog/2017-08-18-Introducing-Docusaurus.md</code>:</p>
<pre><code class="hljs css languages- yml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yml"><span class="hljs-meta">---</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
<span class="hljs-attr">authorURL:</span> <span class="hljs-attr">https://twitter.com/foobarbaz</span>
<span class="hljs-attr">authorFBID:</span> <span class="hljs-number">503283835</span>
@ -79,7 +79,7 @@
</ul>
<h2><a class="anchor" aria-hidden="true" id="summary-truncation"></a><a href="#summary-truncation" 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>Summary Truncation</h2>
<p>Use the <code>&lt;!--truncate--&gt;</code> marker in your blog post to represent what will be shown as the summary when viewing all published blog posts. Anything above <code>&lt;!--truncate--&gt;</code> will be part of the summary. For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Truncation</span> <span class="hljs-string">Example</span>
<span class="hljs-meta">---</span>
@ -100,13 +100,13 @@
<p>You can configure a specific amount of blog posts to show by adding a <code>blogSidebarCount</code> setting to your <code>siteConfig.js</code>.</p>
<p>The available options are an integer representing the number of posts you wish to show or a string with the value <code>'ALL'</code>.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js">blogSidebarCount: <span class="hljs-string">'ALL'</span>;
<pre><code class="hljs css languages-js">blogSidebarCount: <span class="hljs-string">'ALL'</span>;
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="changing-the-sidebar-title"></a><a href="#changing-the-sidebar-title" 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>Changing The Sidebar Title</h2>
<p>You can configure a specific sidebar title by adding a <code>blogSidebarTitle</code> setting to your <code>siteConfig.js</code>.</p>
<p>The option is an object which can have the keys <code>default</code> and <code>all</code>. Specifying a value for <code>default</code> allows you to change the default sidebar title. Specifying a value for <code>all</code> allows you to change the sidebar title when the <code>blogSidebarCount</code> option is set to <code>'ALL'</code>.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js">blogSidebarTitle: { <span class="hljs-attr">default</span>: <span class="hljs-string">'Recent posts'</span>, <span class="hljs-attr">all</span>: <span class="hljs-string">'All blog posts'</span> },
<pre><code class="hljs css languages-js">blogSidebarTitle: { <span class="hljs-attr">default</span>: <span class="hljs-string">'Recent posts'</span>, <span class="hljs-attr">all</span>: <span class="hljs-string">'All blog posts'</span> },
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="rss-feed"></a><a href="#rss-feed" 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>RSS Feed</h2>
<p>Docusaurus provides a simple RSS feed for your blog posts. Both RSS and Atom feed formats are supported. This data is automatically to your website page's HTML <HEAD> tag.</p>
@ -127,7 +127,7 @@
<p>Now, when Docusaurus generates or builds your site, it will copy the file from <code>static/index.html</code> and place it in the site's main directory. The static file is served when a visitor arrives on your page. When the page loads it will redirect the visitor to <code>/blog</code>.</p>
</blockquote>
<p>You can use this template:</p>
<pre><code class="hljs css languages- html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<pre><code class="hljs css languages-html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en-US"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>

12
docs/en/1.3.0/adding-blog/index.html
View file

@ -50,7 +50,7 @@
</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/facebook/docusaurus/edit/master/docs/guides-blog.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Adding a Blog</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="initial-setup"></a><a href="#initial-setup" 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>Initial Setup</h2>
<p>To setup your site's blog, start by creating a <code>blog</code> directory 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><code class="hljs css languages- js">headerLinks: [
<pre><code class="hljs css languages-js">headerLinks: [
...
{ <span class="hljs-attr">blog</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Blog'</span> },
...
@ -59,7 +59,7 @@
<h2><a class="anchor" aria-hidden="true" id="adding-posts"></a><a href="#adding-posts" 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 Posts</h2>
<p>To publish in the blog, create a file within the blog directory with a formatted name of <code>YYYY-MM-DD-My-Blog-Post-Title.md</code>. The post date is extracted from the file name.</p>
<p>For example, at <code>website/blog/2017-08-18-Introducing-Docusaurus.md</code>:</p>
<pre><code class="hljs css languages- yml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yml"><span class="hljs-meta">---</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
<span class="hljs-attr">authorURL:</span> <span class="hljs-attr">https://twitter.com/foobarbaz</span>
<span class="hljs-attr">authorFBID:</span> <span class="hljs-number">503283835</span>
@ -79,7 +79,7 @@
</ul>
<h2><a class="anchor" aria-hidden="true" id="summary-truncation"></a><a href="#summary-truncation" 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>Summary Truncation</h2>
<p>Use the <code>&lt;!--truncate--&gt;</code> marker in your blog post to represent what will be shown as the summary when viewing all published blog posts. Anything above <code>&lt;!--truncate--&gt;</code> will be part of the summary. For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Truncation</span> <span class="hljs-string">Example</span>
<span class="hljs-meta">---</span>
@ -100,13 +100,13 @@
<p>You can configure a specific amount of blog posts to show by adding a <code>blogSidebarCount</code> setting to your <code>siteConfig.js</code>.</p>
<p>The available options are an integer representing the number of posts you wish to show or a string with the value <code>'ALL'</code>.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js">blogSidebarCount: <span class="hljs-string">'ALL'</span>;
<pre><code class="hljs css languages-js">blogSidebarCount: <span class="hljs-string">'ALL'</span>;
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="changing-the-sidebar-title"></a><a href="#changing-the-sidebar-title" 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>Changing The Sidebar Title</h2>
<p>You can configure a specific sidebar title by adding a <code>blogSidebarTitle</code> setting to your <code>siteConfig.js</code>.</p>
<p>The option is an object which can have the keys <code>default</code> and <code>all</code>. Specifying a value for <code>default</code> allows you to change the default sidebar title. Specifying a value for <code>all</code> allows you to change the sidebar title when the <code>blogSidebarCount</code> option is set to <code>'ALL'</code>.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js">blogSidebarTitle: { <span class="hljs-attr">default</span>: <span class="hljs-string">'Recent posts'</span>, <span class="hljs-attr">all</span>: <span class="hljs-string">'All blog posts'</span> },
<pre><code class="hljs css languages-js">blogSidebarTitle: { <span class="hljs-attr">default</span>: <span class="hljs-string">'Recent posts'</span>, <span class="hljs-attr">all</span>: <span class="hljs-string">'All blog posts'</span> },
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="rss-feed"></a><a href="#rss-feed" 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>RSS Feed</h2>
<p>Docusaurus provides a simple RSS feed for your blog posts. Both RSS and Atom feed formats are supported. This data is automatically to your website page's HTML <HEAD> tag.</p>
@ -127,7 +127,7 @@
<p>Now, when Docusaurus generates or builds your site, it will copy the file from <code>static/index.html</code> and place it in the site's main directory. The static file is served when a visitor arrives on your page. When the page loads it will redirect the visitor to <code>/blog</code>.</p>
</blockquote>
<p>You can use this template:</p>
<pre><code class="hljs css languages- html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<pre><code class="hljs css languages-html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en-US"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>

18
docs/en/1.3.0/api-pages.html
View file

@ -53,7 +53,7 @@
<h2><a class="anchor" aria-hidden="true" id="titles-for-pages"></a><a href="#titles-for-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>Titles for Pages</h2>
<p>By default, the title of your page is <code>&lt;title&gt; • &lt;tagline&gt;</code> where <code>title</code> and <code>tagline</code> fields are set in <a href="/docs/en/1.3.0/site-config"><code>siteConfig.js</code></a>. You can exclude the tagline in the title by setting <code>disableTitleTagline</code> to <code>true</code>. If you want to set a specific title for your custom pages, add a <code>title</code> class property on your exported React component.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyPage</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
@ -68,7 +68,7 @@ MyPage.title = <span class="hljs-string">'My Custom Title'</span>;
<h2><a class="anchor" aria-hidden="true" id="description-for-pages"></a><a href="#description-for-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>Description for Pages</h2>
<p>By default, the description your page is <code>tagline</code> set in <a href="/docs/en/1.3.0/site-config"><code>siteConfig.js</code></a>. If you want to set a specific description for your custom pages, add a <code>description</code> class property on your exported React component.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyPage</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
@ -81,7 +81,7 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
<span class="hljs-built_in">module</span>.exports = MyPage;
</code></pre>
<p>This will be translated to a description metadata tag on the generated HTML.</p>
<pre><code class="hljs css languages- html"><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"og:description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"My Custom Description"</span>/&gt;</span>
<pre><code class="hljs css languages-html"><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"og:description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"My Custom Description"</span>/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"My Custom Description"</span>/&gt;</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="page-require-paths"></a><a href="#page-require-paths" 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>Page Require Paths</h2>
@ -93,7 +93,7 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
<h3><a class="anchor" aria-hidden="true" id="complibrarymarkdownblock"></a><a href="#complibrarymarkdownblock" 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><code>CompLibrary.MarkdownBlock</code></h3>
<p>A React component that parses markdown and renders to HTML.</p>
<p>Example:</p>
<pre><code class="hljs css languages- jsx"><span class="token keyword">const</span> MarkdownBlock <span class="token operator">=</span> CompLibrary<span class="token punctuation">.</span>MarkdownBlock<span class="token punctuation">;</span>
<pre><code class="hljs css languages-jsx"><span class="token keyword">const</span> MarkdownBlock <span class="token operator">=</span> CompLibrary<span class="token punctuation">.</span>MarkdownBlock<span class="token punctuation">;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MarkdownBlock</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>
@ -113,7 +113,7 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
</tbody>
</table>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Container</span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Container</span>
<span class="token attr-name">padding</span><span class="token script language-javascript"><span class="token script-punctuation 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 attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myCustomClass<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
@ -149,7 +149,7 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
</tbody>
</table>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>GridBlock</span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>GridBlock</span>
<span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span>
<span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>threeColumn<span class="token punctuation">"</span></span>
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myCustomClass<span class="token punctuation">"</span></span>
@ -178,19 +178,19 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
<h2><a class="anchor" aria-hidden="true" id="translating-strings"></a><a href="#translating-strings" 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>Translating Strings</h2>
<p>When translations are enabled, any pages inside <code>website/pages/en</code> will be translated for all enabled languages. URLs for non-English pages will use their language tags as specified in the <code>languages.js</code> file. E.g. The URL for a French page of <code>website/pages/en/help.js</code> would be found at <code>${baseUrl}fr/help.html</code>.</p>
<p>When writing pages that you wish to translate, wrap any strings to be translated inside a <code>&lt;translate&gt;</code> tag. e.g.,</p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>translate</span><span class="token punctuation">></span></span><span class="token constant">I</span> like translations<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>translate</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p>You can also provide an optional description attribute to provide context for translators. e.g,</p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/community<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/community<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>translate</span> <span class="token attr-name">desc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Footer link to page referring to community GitHub and Slack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Community
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>translate</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre>
<p>Add the following require statement as well:</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> translate = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../../server/translate.js'</span>).translate;
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> translate = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../../server/translate.js'</span>).translate;
</code></pre>
<p>Note that this path is valid for files inside <code>pages/en</code> and should be adjusted accordingly if files are in different locations, as discussed <a href="#page-require-paths">above</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="using-static-assets"></a><a href="#using-static-assets" 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>Using Static Assets</h2>

18
docs/en/1.3.0/api-pages/index.html
View file

@ -53,7 +53,7 @@
<h2><a class="anchor" aria-hidden="true" id="titles-for-pages"></a><a href="#titles-for-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>Titles for Pages</h2>
<p>By default, the title of your page is <code>&lt;title&gt; • &lt;tagline&gt;</code> where <code>title</code> and <code>tagline</code> fields are set in <a href="/docs/en/1.3.0/site-config"><code>siteConfig.js</code></a>. You can exclude the tagline in the title by setting <code>disableTitleTagline</code> to <code>true</code>. If you want to set a specific title for your custom pages, add a <code>title</code> class property on your exported React component.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyPage</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
@ -68,7 +68,7 @@ MyPage.title = <span class="hljs-string">'My Custom Title'</span>;
<h2><a class="anchor" aria-hidden="true" id="description-for-pages"></a><a href="#description-for-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>Description for Pages</h2>
<p>By default, the description your page is <code>tagline</code> set in <a href="/docs/en/1.3.0/site-config"><code>siteConfig.js</code></a>. If you want to set a specific description for your custom pages, add a <code>description</code> class property on your exported React component.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyPage</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
@ -81,7 +81,7 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
<span class="hljs-built_in">module</span>.exports = MyPage;
</code></pre>
<p>This will be translated to a description metadata tag on the generated HTML.</p>
<pre><code class="hljs css languages- html"><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"og:description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"My Custom Description"</span>/&gt;</span>
<pre><code class="hljs css languages-html"><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"og:description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"My Custom Description"</span>/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"My Custom Description"</span>/&gt;</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="page-require-paths"></a><a href="#page-require-paths" 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>Page Require Paths</h2>
@ -93,7 +93,7 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
<h3><a class="anchor" aria-hidden="true" id="complibrarymarkdownblock"></a><a href="#complibrarymarkdownblock" 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><code>CompLibrary.MarkdownBlock</code></h3>
<p>A React component that parses markdown and renders to HTML.</p>
<p>Example:</p>
<pre><code class="hljs css languages- jsx"><span class="token keyword">const</span> MarkdownBlock <span class="token operator">=</span> CompLibrary<span class="token punctuation">.</span>MarkdownBlock<span class="token punctuation">;</span>
<pre><code class="hljs css languages-jsx"><span class="token keyword">const</span> MarkdownBlock <span class="token operator">=</span> CompLibrary<span class="token punctuation">.</span>MarkdownBlock<span class="token punctuation">;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MarkdownBlock</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>
@ -113,7 +113,7 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
</tbody>
</table>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Container</span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Container</span>
<span class="token attr-name">padding</span><span class="token script language-javascript"><span class="token script-punctuation 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 attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myCustomClass<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
@ -149,7 +149,7 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
</tbody>
</table>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>GridBlock</span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>GridBlock</span>
<span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span>
<span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>threeColumn<span class="token punctuation">"</span></span>
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myCustomClass<span class="token punctuation">"</span></span>
@ -178,19 +178,19 @@ MyPage.description = <span class="hljs-string">'My Custom Description'</span>;
<h2><a class="anchor" aria-hidden="true" id="translating-strings"></a><a href="#translating-strings" 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>Translating Strings</h2>
<p>When translations are enabled, any pages inside <code>website/pages/en</code> will be translated for all enabled languages. URLs for non-English pages will use their language tags as specified in the <code>languages.js</code> file. E.g. The URL for a French page of <code>website/pages/en/help.js</code> would be found at <code>${baseUrl}fr/help.html</code>.</p>
<p>When writing pages that you wish to translate, wrap any strings to be translated inside a <code>&lt;translate&gt;</code> tag. e.g.,</p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>translate</span><span class="token punctuation">></span></span><span class="token constant">I</span> like translations<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>translate</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre>
<p>You can also provide an optional description attribute to provide context for translators. e.g,</p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/community<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/community<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>translate</span> <span class="token attr-name">desc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Footer link to page referring to community GitHub and Slack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Community
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>translate</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre>
<p>Add the following require statement as well:</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> translate = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../../server/translate.js'</span>).translate;
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> translate = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../../server/translate.js'</span>).translate;
</code></pre>
<p>Note that this path is valid for files inside <code>pages/en</code> and should be adjusted accordingly if files are in different locations, as discussed <a href="#page-require-paths">above</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="using-static-assets"></a><a href="#using-static-assets" 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>Using Static Assets</h2>

12
docs/en/1.3.0/blog.html
View file

@ -27,7 +27,7 @@
</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="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/docusaurus/edit/master/docs/guides-blog.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Adding a Blog</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="initial-setup"></a><a href="#initial-setup" 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>Initial Setup</h2>
<p>To setup your site's blog, start by creating a <code>blog</code> directory 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><code class="hljs css languages- js">headerLinks: [
<pre><code class="hljs css languages-js">headerLinks: [
...
{ <span class="hljs-attr">blog</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Blog'</span> },
...
@ -36,7 +36,7 @@
<h2><a class="anchor" aria-hidden="true" id="adding-posts"></a><a href="#adding-posts" 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 Posts</h2>
<p>To publish in the blog, create a file within the blog directory with a formatted name of <code>YYYY-MM-DD-My-Blog-Post-Title.md</code>. The post date is extracted from the file name.</p>
<p>For example, at <code>website/blog/2017-08-18-Introducing-Docusaurus.md</code>:</p>
<pre><code class="hljs css languages- yml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yml"><span class="hljs-meta">---</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
<span class="hljs-attr">authorURL:</span> <span class="hljs-attr">https://twitter.com/foobarbaz</span>
<span class="hljs-attr">authorFBID:</span> <span class="hljs-number">503283835</span>
@ -56,7 +56,7 @@
</ul>
<h2><a class="anchor" aria-hidden="true" id="summary-truncation"></a><a href="#summary-truncation" 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>Summary Truncation</h2>
<p>Use the <code>&lt;!--truncate--&gt;</code> marker in your blog post to represent what will be shown as the summary when viewing all published blog posts. Anything above <code>&lt;!--truncate--&gt;</code> will be part of the summary. For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Truncation</span> <span class="hljs-string">Example</span>
<span class="hljs-meta">---</span>
@ -77,13 +77,13 @@
<p>You can configure a specific amount of blog posts to show by adding a <code>blogSidebarCount</code> setting to your <code>siteConfig.js</code>.</p>
<p>The available options are an integer representing the number of posts you wish to show or a string with the value <code>'ALL'</code>.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js">blogSidebarCount: <span class="hljs-string">'ALL'</span>;
<pre><code class="hljs css languages-js">blogSidebarCount: <span class="hljs-string">'ALL'</span>;
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="changing-the-sidebar-title"></a><a href="#changing-the-sidebar-title" 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>Changing The Sidebar Title</h2>
<p>You can configure a specific sidebar title by adding a <code>blogSidebarTitle</code> setting to your <code>siteConfig.js</code>.</p>
<p>The option is an object which can have the keys <code>default</code> and <code>all</code>. Specifying a value for <code>default</code> allows you to change the default sidebar title. Specifying a value for <code>all</code> allows you to change the sidebar title when the <code>blogSidebarCount</code> option is set to <code>'ALL'</code>.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js">blogSidebarTitle: { <span class="hljs-attr">default</span>: <span class="hljs-string">'Recent posts'</span>, <span class="hljs-attr">all</span>: <span class="hljs-string">'All blog posts'</span> },
<pre><code class="hljs css languages-js">blogSidebarTitle: { <span class="hljs-attr">default</span>: <span class="hljs-string">'Recent posts'</span>, <span class="hljs-attr">all</span>: <span class="hljs-string">'All blog posts'</span> },
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="rss-feed"></a><a href="#rss-feed" 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>RSS Feed</h2>
<p>Docusaurus provides a simple RSS feed for your blog posts. Both RSS and Atom feed formats are supported. This data is automatically to your website page's HTML <HEAD> tag.</p>
@ -104,7 +104,7 @@
<p>Now, when Docusaurus generates or builds your site, it will copy the file from <code>static/index.html</code> and place it in the site's main directory. The static file is served when a visitor arrives on your page. When the page loads it will redirect the visitor to <code>/blog</code>.</p>
</blockquote>
<p>You can use this template:</p>
<pre><code class="hljs css languages- html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<pre><code class="hljs css languages-html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en-US"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>

12
docs/en/1.3.0/blog/index.html
View file

@ -27,7 +27,7 @@
</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="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/docusaurus/edit/master/docs/guides-blog.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Adding a Blog</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="initial-setup"></a><a href="#initial-setup" 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>Initial Setup</h2>
<p>To setup your site's blog, start by creating a <code>blog</code> directory 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><code class="hljs css languages- js">headerLinks: [
<pre><code class="hljs css languages-js">headerLinks: [
...
{ <span class="hljs-attr">blog</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Blog'</span> },
...
@ -36,7 +36,7 @@
<h2><a class="anchor" aria-hidden="true" id="adding-posts"></a><a href="#adding-posts" 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 Posts</h2>
<p>To publish in the blog, create a file within the blog directory with a formatted name of <code>YYYY-MM-DD-My-Blog-Post-Title.md</code>. The post date is extracted from the file name.</p>
<p>For example, at <code>website/blog/2017-08-18-Introducing-Docusaurus.md</code>:</p>
<pre><code class="hljs css languages- yml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yml"><span class="hljs-meta">---</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
<span class="hljs-attr">authorURL:</span> <span class="hljs-attr">https://twitter.com/foobarbaz</span>
<span class="hljs-attr">authorFBID:</span> <span class="hljs-number">503283835</span>
@ -56,7 +56,7 @@
</ul>
<h2><a class="anchor" aria-hidden="true" id="summary-truncation"></a><a href="#summary-truncation" 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>Summary Truncation</h2>
<p>Use the <code>&lt;!--truncate--&gt;</code> marker in your blog post to represent what will be shown as the summary when viewing all published blog posts. Anything above <code>&lt;!--truncate--&gt;</code> will be part of the summary. For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Truncation</span> <span class="hljs-string">Example</span>
<span class="hljs-meta">---</span>
@ -77,13 +77,13 @@
<p>You can configure a specific amount of blog posts to show by adding a <code>blogSidebarCount</code> setting to your <code>siteConfig.js</code>.</p>
<p>The available options are an integer representing the number of posts you wish to show or a string with the value <code>'ALL'</code>.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js">blogSidebarCount: <span class="hljs-string">'ALL'</span>;
<pre><code class="hljs css languages-js">blogSidebarCount: <span class="hljs-string">'ALL'</span>;
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="changing-the-sidebar-title"></a><a href="#changing-the-sidebar-title" 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>Changing The Sidebar Title</h2>
<p>You can configure a specific sidebar title by adding a <code>blogSidebarTitle</code> setting to your <code>siteConfig.js</code>.</p>
<p>The option is an object which can have the keys <code>default</code> and <code>all</code>. Specifying a value for <code>default</code> allows you to change the default sidebar title. Specifying a value for <code>all</code> allows you to change the sidebar title when the <code>blogSidebarCount</code> option is set to <code>'ALL'</code>.</p>
<p>Example:</p>
<pre><code class="hljs css languages- js">blogSidebarTitle: { <span class="hljs-attr">default</span>: <span class="hljs-string">'Recent posts'</span>, <span class="hljs-attr">all</span>: <span class="hljs-string">'All blog posts'</span> },
<pre><code class="hljs css languages-js">blogSidebarTitle: { <span class="hljs-attr">default</span>: <span class="hljs-string">'Recent posts'</span>, <span class="hljs-attr">all</span>: <span class="hljs-string">'All blog posts'</span> },
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="rss-feed"></a><a href="#rss-feed" 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>RSS Feed</h2>
<p>Docusaurus provides a simple RSS feed for your blog posts. Both RSS and Atom feed formats are supported. This data is automatically to your website page's HTML <HEAD> tag.</p>
@ -104,7 +104,7 @@
<p>Now, when Docusaurus generates or builds your site, it will copy the file from <code>static/index.html</code> and place it in the site's main directory. The static file is served when a visitor arrives on your page. When the page loads it will redirect the visitor to <code>/blog</code>.</p>
</blockquote>
<p>You can use this template:</p>
<pre><code class="hljs css languages- html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<pre><code class="hljs css languages-html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en-US"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>

14
docs/en/1.3.0/commands.html
View file

@ -54,18 +54,18 @@
</ul>
<h2><a class="anchor" aria-hidden="true" id="running-from-the-command-line"></a><a href="#running-from-the-command-line" 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>Running from the command line</h2>
<p>The scripts can be run using either Yarn or npm. If you've already gone through our Getting Started guide, you may already be familiar with the <code>start</code> command. It's the command that tells Docusaurus to run the <code>docusaurus-start</code> script which generates the site and starts up a server, and it's usually invoked like so:</p>
<pre><code class="hljs css languages- bash">yarn run start
<pre><code class="hljs css languages-bash">yarn run start
</code></pre>
<p>The same script can be invoked using npm:</p>
<pre><code class="hljs css languages- bash">npm run start
<pre><code class="hljs css languages-bash">npm run start
</code></pre>
<p>To run a particular script, just replace the <code>start</code> command in the examples above with the command associated with your script.</p>
<h2><a class="anchor" aria-hidden="true" id="using-arguments"></a><a href="#using-arguments" 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>Using arguments</h2>
<p>Some commands support optional arguments. For example, to start a server on port 8080, you can specify the <code>--port</code> argument when running <code>start</code>:</p>
<pre><code class="hljs css languages- bash">yarn run start --port 8080
<pre><code class="hljs css languages-bash">yarn run start --port 8080
</code></pre>
<p>If you run Docusaurus using npm, you can still use the command line arguments by inserting a <code>--</code> between <code>npm run &lt;command&gt;</code> and the command arguments:</p>
<pre><code class="hljs css languages- bash">npm run start -- --port 8080
<pre><code class="hljs css languages-bash">npm run start -- --port 8080
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="configuration"></a><a href="#configuration" 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>Configuration</h2>
<p>These scripts are set up under the <code>&quot;scripts&quot;</code> key in your <code>website/package.json</code> file as part of the installation process. If you need help setting them up again, please refer to the <a href="/docs/en/1.3.0/installation">Installation guide</a>.</p>
@ -106,7 +106,7 @@
</tbody>
</table>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- bash">docusaurus-examples &lt;feature&gt;
<pre><code class="hljs css languages-bash">docusaurus-examples &lt;feature&gt;
</code></pre>
<p>When no feature is specified, sets up a minimally configured example website in your project. This command is covered in depth in the <a href="/docs/en/1.3.0/site-preparation">Site Preparation guide</a>.</p>
<hr>
@ -119,7 +119,7 @@
<li><code>USE_SSH</code>: Whether to use SSH instead of HTTPS for your connection to the GitHub repo.</li>
</ul>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- bash">GIT_USER=docusaurus-bot USE_SSH=<span class="hljs-literal">true</span> yarn run publish-gh-pages
<pre><code class="hljs css languages-bash">GIT_USER=docusaurus-bot USE_SSH=<span class="hljs-literal">true</span> yarn run publish-gh-pages
</code></pre>
<p>The following environment variables are <a href="https://circleci.com/docs/1.0/environment-variables/">set by CircleCI</a> during the build process.</p>
<ul>
@ -146,7 +146,7 @@
</tbody>
</table>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- bash">docusaurus-rename-version &lt;currentVersion&gt; &lt;newVersion&gt;
<pre><code class="hljs css languages-bash">docusaurus-rename-version &lt;currentVersion&gt; &lt;newVersion&gt;
</code></pre>
<p>See the <a href="/docs/en/1.3.0/versioning#renaming-existing-versions">Versioning guide</a> to learn more.</p>
<hr>

14
docs/en/1.3.0/commands/index.html
View file

@ -54,18 +54,18 @@
</ul>
<h2><a class="anchor" aria-hidden="true" id="running-from-the-command-line"></a><a href="#running-from-the-command-line" 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>Running from the command line</h2>
<p>The scripts can be run using either Yarn or npm. If you've already gone through our Getting Started guide, you may already be familiar with the <code>start</code> command. It's the command that tells Docusaurus to run the <code>docusaurus-start</code> script which generates the site and starts up a server, and it's usually invoked like so:</p>
<pre><code class="hljs css languages- bash">yarn run start
<pre><code class="hljs css languages-bash">yarn run start
</code></pre>
<p>The same script can be invoked using npm:</p>
<pre><code class="hljs css languages- bash">npm run start
<pre><code class="hljs css languages-bash">npm run start
</code></pre>
<p>To run a particular script, just replace the <code>start</code> command in the examples above with the command associated with your script.</p>
<h2><a class="anchor" aria-hidden="true" id="using-arguments"></a><a href="#using-arguments" 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>Using arguments</h2>
<p>Some commands support optional arguments. For example, to start a server on port 8080, you can specify the <code>--port</code> argument when running <code>start</code>:</p>
<pre><code class="hljs css languages- bash">yarn run start --port 8080
<pre><code class="hljs css languages-bash">yarn run start --port 8080
</code></pre>
<p>If you run Docusaurus using npm, you can still use the command line arguments by inserting a <code>--</code> between <code>npm run &lt;command&gt;</code> and the command arguments:</p>
<pre><code class="hljs css languages- bash">npm run start -- --port 8080
<pre><code class="hljs css languages-bash">npm run start -- --port 8080
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="configuration"></a><a href="#configuration" 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>Configuration</h2>
<p>These scripts are set up under the <code>&quot;scripts&quot;</code> key in your <code>website/package.json</code> file as part of the installation process. If you need help setting them up again, please refer to the <a href="/docs/en/1.3.0/installation">Installation guide</a>.</p>
@ -106,7 +106,7 @@
</tbody>
</table>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- bash">docusaurus-examples &lt;feature&gt;
<pre><code class="hljs css languages-bash">docusaurus-examples &lt;feature&gt;
</code></pre>
<p>When no feature is specified, sets up a minimally configured example website in your project. This command is covered in depth in the <a href="/docs/en/1.3.0/site-preparation">Site Preparation guide</a>.</p>
<hr>
@ -119,7 +119,7 @@
<li><code>USE_SSH</code>: Whether to use SSH instead of HTTPS for your connection to the GitHub repo.</li>
</ul>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- bash">GIT_USER=docusaurus-bot USE_SSH=<span class="hljs-literal">true</span> yarn run publish-gh-pages
<pre><code class="hljs css languages-bash">GIT_USER=docusaurus-bot USE_SSH=<span class="hljs-literal">true</span> yarn run publish-gh-pages
</code></pre>
<p>The following environment variables are <a href="https://circleci.com/docs/1.0/environment-variables/">set by CircleCI</a> during the build process.</p>
<ul>
@ -146,7 +146,7 @@
</tbody>
</table>
<p><strong>Example</strong></p>
<pre><code class="hljs css languages- bash">docusaurus-rename-version &lt;currentVersion&gt; &lt;newVersion&gt;
<pre><code class="hljs css languages-bash">docusaurus-rename-version &lt;currentVersion&gt; &lt;newVersion&gt;
</code></pre>
<p>See the <a href="/docs/en/1.3.0/versioning#renaming-existing-versions">Versioning guide</a> to learn more.</p>
<hr>

4
docs/en/1.3.0/custom-pages.html
View file

@ -53,7 +53,7 @@
<p>You can <a href="/docs/en/1.3.0/site-preparation#verifying-installation">start</a> 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" aria-hidden="true" id="adding-other-custom-pages"></a><a href="#adding-other-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 Other Custom Pages</h2>
<p>Docusaurus provides some simple example pages in the <code>website/pages/en</code> directory, including <code>index.js</code>, <code>users.js</code>, and <code>help.js</code>. These are good examples to showcase how to create a custom page for Docusaurus.</p>
<pre><code class="hljs css languages- bash">root-directory
<pre><code class="hljs css languages-bash">root-directory
├── docs
└── website
├── blog
@ -84,7 +84,7 @@
<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 do not 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><code class="hljs css languages- 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>
<pre><code class="hljs css languages-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
docs/en/1.3.0/custom-pages/index.html
View file

@ -53,7 +53,7 @@
<p>You can <a href="/docs/en/1.3.0/site-preparation#verifying-installation">start</a> 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" aria-hidden="true" id="adding-other-custom-pages"></a><a href="#adding-other-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 Other Custom Pages</h2>
<p>Docusaurus provides some simple example pages in the <code>website/pages/en</code> directory, including <code>index.js</code>, <code>users.js</code>, and <code>help.js</code>. These are good examples to showcase how to create a custom page for Docusaurus.</p>
<pre><code class="hljs css languages- bash">root-directory
<pre><code class="hljs css languages-bash">root-directory
├── docs
└── website
├── blog
@ -84,7 +84,7 @@
<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 do not 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><code class="hljs css languages- 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>
<pre><code class="hljs css languages-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>

24
docs/en/1.3.0/doc-markdown.html
View file

@ -56,7 +56,7 @@
<p><code>hide_title</code>: Whether to hide the title at the top of the doc.</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 its <code>title</code>.</p>
<p>For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">doc1</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">Document</span>
<span class="hljs-attr">sidebar_label:</span> <span class="hljs-string">Document</span>
@ -64,7 +64,7 @@
</code></pre>
<p>Versioned documents have their ids altered to include the version number when they get copied. The new <code>id</code> is <code>version-${version}-${id}</code> where <code>${version}</code> is the version number of that document and <code>${id}</code> is the original <code>id</code>. Additionally, versioned documents get an added <code>original_id</code> field with the original document id.</p>
<p>For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">version-1.0.0-doc1</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">Document</span>
<span class="hljs-attr">sidebar_label:</span> <span class="hljs-string">Document</span>
@ -73,7 +73,7 @@
</code></pre>
<p><code>custom_edit_url</code>: The URL for editing this document. If this field is not present, the document's edit URL will fall back to <code>editUrl</code> from optional fields of <code>siteConfig.js</code>. See <a href="site-config.md">siteConfig.js</a> docs for more information.</p>
<p>For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">doc-markdown</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Markdown</span> <span class="hljs-string">Features</span>
<span class="hljs-attr">custom_edit_url:</span> <span class="hljs-attr">https://github.com/facebook/Docusaurus/edit/master/docs/api-doc-markdown.md</span>
@ -86,7 +86,7 @@
<p><code>authorURL</code>: A page to link to when a site user clicks the author's name. If this field is omitted, the author's name will not link to anything.</p>
<p><code>authorFBID</code>: The author's Facebook id, used only to get the author's profile picture to display with the blog post. If this field is omitted, no author picture will be shown for the blog post.</p>
<p>For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">First</span> <span class="hljs-string">Blog</span> <span class="hljs-string">Post</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
<span class="hljs-attr">authorURL:</span> <span class="hljs-attr">http://twitter.com/franchementli</span>
@ -98,20 +98,20 @@
<h3><a class="anchor" aria-hidden="true" id="linking-other-documents"></a><a href="#linking-other-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>Linking other Documents</h3>
<p>You can use relative URLs to other documentation files which will automatically get converted to the corresponding HTML links when they get rendered.</p>
<p>Example:</p>
<pre><code class="hljs css languages- md">[<span class="hljs-string">This links to another document</span>](<span class="hljs-link">other-document.md</span>)
<pre><code class="hljs css languages-md">[<span class="hljs-string">This links to another document</span>](<span class="hljs-link">other-document.md</span>)
</code></pre>
<p>This markdown will automatically get converted into a link to <code>/docs/other-document.html</code> (or the appropriately translated/versioned link) once it gets rendered.</p>
<p>This can help when you want to navigate through docs on GitHub since the links there will be functional links to other documents (still on GitHub), but the documents will have the correct HTML links when they get rendered.</p>
<h3><a class="anchor" aria-hidden="true" id="linking-to-images-and-other-assets"></a><a href="#linking-to-images-and-other-assets" 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>Linking to Images and Other Assets</h3>
<p>Static assets can be linked to in the same way that documents are, using relative URLs. Static assets used in documents and blogs should go into <code>docs/assets</code> and <code>website/blog/assets</code>, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.</p>
<p>Example:</p>
<pre><code class="hljs css languages- md">![<span class="hljs-string">alt-text</span>](<span class="hljs-link">/docs/assets/doc-image.png</span>)
<pre><code class="hljs css languages-md">![<span class="hljs-string">alt-text</span>](<span class="hljs-link">/docs/assets/doc-image.png</span>)
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="generating-table-of-contents"></a><a href="#generating-table-of-contents" 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>Generating Table of Contents</h3>
<p>You can make an auto-generated list of links, which can be useful as a table of contents for API docs.</p>
<p>In your markdown file, insert a line with the text &lt;<code>AUTOGENERATED_TABLE_OF_CONTENTS</code>&gt;. Write your documentation using <code>h3</code> headers for each function inside a code block. These will be found by Docusaurus and a list of links to these sections will inserted at the text &lt;<code>AUTOGENERATED_TABLE_OF_CONTENTS</code>&gt;.</p>
<p>Example:</p>
<pre><code class="hljs css languages- md"><span class="hljs-section">### `docusaurus.function(a, b)`</span>
<pre><code class="hljs css languages-md"><span class="hljs-section">### `docusaurus.function(a, b)`</span>
Text describing my function
@ -120,7 +120,7 @@ Text describing my function
Text describing my function
</code></pre>
<p>will lead to a table of contents of the functions:</p>
<pre><code class="hljs css languages- md"><span class="hljs-bullet">- </span><span class="hljs-code">`docusaurus.function(a, b)`</span>
<pre><code class="hljs css languages-md"><span class="hljs-bullet">- </span><span class="hljs-code">`docusaurus.function(a, b)`</span>
<span class="hljs-bullet">- </span><span class="hljs-code">`docdoc(file)`</span>
</code></pre>
<p>and each function will link to their corresponding sections in the page.</p>
@ -131,10 +131,10 @@ ReactDOM.render(&lt;h1&gt;Hello, world!&lt;/h1&gt;, document.getElementById('roo
```
</code></pre>
<p>...would be rendered with syntax highlighting like so:</p>
<pre><code class="hljs css languages- js">ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello, world!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>));
<pre><code class="hljs css languages-js">ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello, world!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>));
</code></pre>
<p>Highlighting is provided by <a href="https://highlightjs.org">Highlight.js</a> using the theme specified in your <code>siteConfig.js</code> file as part of the <code>highlight</code> key:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
...
highlight: {
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>
@ -145,7 +145,7 @@ ReactDOM.render(&lt;h1&gt;Hello, world!&lt;/h1&gt;, document.getElementById('roo
<p>You can find the full list of supported themes in the Highlight.js <a href="https://github.com/isagalaev/highlight.js/tree/master/src/styles"><code>styles</code></a> directory.</p>
<h3><a class="anchor" aria-hidden="true" id="registering-additional-languages"></a><a href="#registering-additional-languages" 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>Registering additional languages</h3>
<p>While Highlight.js provides support for <a href="https://highlightjs.org/static/demo/">many popular languages out of the box</a>, you may find the need to register additional language support. For these cases, we provide an escape valve by exposing the <code>hljs</code> constant as part of the <code>highlight</code> config key. This in turn allows you to call <a href="http://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage-name-language"><code>registerLanguage</code></a>:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
...
highlight: {
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>,
@ -164,7 +164,7 @@ ReactDOM.render(&lt;h1&gt;Hello, world!&lt;/h1&gt;, document.getElementById('roo
<span class="hljs-string">usePrism:</span> [<span class="hljs-string">'jsx'</span>]
</code></pre>
<p>Notice that the code block below uses JSX syntax highlighting from Prism.</p>
<pre><code class="hljs css languages- jsx"><span class="token keyword">class</span> <span class="token class-name">Example</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>
<pre><code class="hljs css languages-jsx"><span class="token keyword">class</span> <span class="token class-name">Example</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>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>View</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>

24
docs/en/1.3.0/doc-markdown/index.html
View file

@ -56,7 +56,7 @@
<p><code>hide_title</code>: Whether to hide the title at the top of the doc.</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 its <code>title</code>.</p>
<p>For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">doc1</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">Document</span>
<span class="hljs-attr">sidebar_label:</span> <span class="hljs-string">Document</span>
@ -64,7 +64,7 @@
</code></pre>
<p>Versioned documents have their ids altered to include the version number when they get copied. The new <code>id</code> is <code>version-${version}-${id}</code> where <code>${version}</code> is the version number of that document and <code>${id}</code> is the original <code>id</code>. Additionally, versioned documents get an added <code>original_id</code> field with the original document id.</p>
<p>For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">version-1.0.0-doc1</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">Document</span>
<span class="hljs-attr">sidebar_label:</span> <span class="hljs-string">Document</span>
@ -73,7 +73,7 @@
</code></pre>
<p><code>custom_edit_url</code>: The URL for editing this document. If this field is not present, the document's edit URL will fall back to <code>editUrl</code> from optional fields of <code>siteConfig.js</code>. See <a href="site-config.md">siteConfig.js</a> docs for more information.</p>
<p>For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">doc-markdown</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Markdown</span> <span class="hljs-string">Features</span>
<span class="hljs-attr">custom_edit_url:</span> <span class="hljs-attr">https://github.com/facebook/Docusaurus/edit/master/docs/api-doc-markdown.md</span>
@ -86,7 +86,7 @@
<p><code>authorURL</code>: A page to link to when a site user clicks the author's name. If this field is omitted, the author's name will not link to anything.</p>
<p><code>authorFBID</code>: The author's Facebook id, used only to get the author's profile picture to display with the blog post. If this field is omitted, no author picture will be shown for the blog post.</p>
<p>For example:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">First</span> <span class="hljs-string">Blog</span> <span class="hljs-string">Post</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
<span class="hljs-attr">authorURL:</span> <span class="hljs-attr">http://twitter.com/franchementli</span>
@ -98,20 +98,20 @@
<h3><a class="anchor" aria-hidden="true" id="linking-other-documents"></a><a href="#linking-other-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>Linking other Documents</h3>
<p>You can use relative URLs to other documentation files which will automatically get converted to the corresponding HTML links when they get rendered.</p>
<p>Example:</p>
<pre><code class="hljs css languages- md">[<span class="hljs-string">This links to another document</span>](<span class="hljs-link">other-document.md</span>)
<pre><code class="hljs css languages-md">[<span class="hljs-string">This links to another document</span>](<span class="hljs-link">other-document.md</span>)
</code></pre>
<p>This markdown will automatically get converted into a link to <code>/docs/other-document.html</code> (or the appropriately translated/versioned link) once it gets rendered.</p>
<p>This can help when you want to navigate through docs on GitHub since the links there will be functional links to other documents (still on GitHub), but the documents will have the correct HTML links when they get rendered.</p>
<h3><a class="anchor" aria-hidden="true" id="linking-to-images-and-other-assets"></a><a href="#linking-to-images-and-other-assets" 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>Linking to Images and Other Assets</h3>
<p>Static assets can be linked to in the same way that documents are, using relative URLs. Static assets used in documents and blogs should go into <code>docs/assets</code> and <code>website/blog/assets</code>, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.</p>
<p>Example:</p>
<pre><code class="hljs css languages- md">![<span class="hljs-string">alt-text</span>](<span class="hljs-link">/docs/assets/doc-image.png</span>)
<pre><code class="hljs css languages-md">![<span class="hljs-string">alt-text</span>](<span class="hljs-link">/docs/assets/doc-image.png</span>)
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="generating-table-of-contents"></a><a href="#generating-table-of-contents" 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>Generating Table of Contents</h3>
<p>You can make an auto-generated list of links, which can be useful as a table of contents for API docs.</p>
<p>In your markdown file, insert a line with the text &lt;<code>AUTOGENERATED_TABLE_OF_CONTENTS</code>&gt;. Write your documentation using <code>h3</code> headers for each function inside a code block. These will be found by Docusaurus and a list of links to these sections will inserted at the text &lt;<code>AUTOGENERATED_TABLE_OF_CONTENTS</code>&gt;.</p>
<p>Example:</p>
<pre><code class="hljs css languages- md"><span class="hljs-section">### `docusaurus.function(a, b)`</span>
<pre><code class="hljs css languages-md"><span class="hljs-section">### `docusaurus.function(a, b)`</span>
Text describing my function
@ -120,7 +120,7 @@ Text describing my function
Text describing my function
</code></pre>
<p>will lead to a table of contents of the functions:</p>
<pre><code class="hljs css languages- md"><span class="hljs-bullet">- </span><span class="hljs-code">`docusaurus.function(a, b)`</span>
<pre><code class="hljs css languages-md"><span class="hljs-bullet">- </span><span class="hljs-code">`docusaurus.function(a, b)`</span>
<span class="hljs-bullet">- </span><span class="hljs-code">`docdoc(file)`</span>
</code></pre>
<p>and each function will link to their corresponding sections in the page.</p>
@ -131,10 +131,10 @@ ReactDOM.render(&lt;h1&gt;Hello, world!&lt;/h1&gt;, document.getElementById('roo
```
</code></pre>
<p>...would be rendered with syntax highlighting like so:</p>
<pre><code class="hljs css languages- js">ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello, world!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>));
<pre><code class="hljs css languages-js">ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello, world!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>));
</code></pre>
<p>Highlighting is provided by <a href="https://highlightjs.org">Highlight.js</a> using the theme specified in your <code>siteConfig.js</code> file as part of the <code>highlight</code> key:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
...
highlight: {
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>
@ -145,7 +145,7 @@ ReactDOM.render(&lt;h1&gt;Hello, world!&lt;/h1&gt;, document.getElementById('roo
<p>You can find the full list of supported themes in the Highlight.js <a href="https://github.com/isagalaev/highlight.js/tree/master/src/styles"><code>styles</code></a> directory.</p>
<h3><a class="anchor" aria-hidden="true" id="registering-additional-languages"></a><a href="#registering-additional-languages" 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>Registering additional languages</h3>
<p>While Highlight.js provides support for <a href="https://highlightjs.org/static/demo/">many popular languages out of the box</a>, you may find the need to register additional language support. For these cases, we provide an escape valve by exposing the <code>hljs</code> constant as part of the <code>highlight</code> config key. This in turn allows you to call <a href="http://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage-name-language"><code>registerLanguage</code></a>:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
...
highlight: {
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>,
@ -164,7 +164,7 @@ ReactDOM.render(&lt;h1&gt;Hello, world!&lt;/h1&gt;, document.getElementById('roo
<span class="hljs-string">usePrism:</span> [<span class="hljs-string">'jsx'</span>]
</code></pre>
<p>Notice that the code block below uses JSX syntax highlighting from Prism.</p>
<pre><code class="hljs css languages- jsx"><span class="token keyword">class</span> <span class="token class-name">Example</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>
<pre><code class="hljs css languages-jsx"><span class="token keyword">class</span> <span class="token class-name">Example</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>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>View</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>

4
docs/en/1.3.0/installation.html
View file

@ -61,7 +61,7 @@
</ol>
<h2><a class="anchor" aria-hidden="true" id="verifying-installation"></a><a href="#verifying-installation" 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>Verifying Installation</h2>
<p>Along with previously existing files and directories, your root directory will now contain a structure similar to:</p>
<pre><code class="hljs css languages- bash">root-directory
<pre><code class="hljs css languages-bash">root-directory
├── docs-examples-from-docusaurus
│ ├── doc1.md
│ ├── doc2.md
@ -94,7 +94,7 @@
<p><img src="/img/getting-started-preparation-verify.png" alt=""></p>
<h3><a class="anchor" aria-hidden="true" id="launching-the-server-behind-a-proxy"></a><a href="#launching-the-server-behind-a-proxy" 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>Launching the server behind a proxy</h3>
<p>If you are behind a corporate proxy, you need to disable it for the development server requests. It can be done using the <code>NO_PROXY</code> environment variable.</p>
<pre><code class="hljs css languages- sh">SET NO_PROXY=localhost
<pre><code class="hljs css languages-sh">SET NO_PROXY=localhost
yarn start (or npm run start)
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="updating-your-docusaurus-version"></a><a href="#updating-your-docusaurus-version" 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>Updating Your Docusaurus Version</h2>

4
docs/en/1.3.0/installation/index.html
View file

@ -61,7 +61,7 @@
</ol>
<h2><a class="anchor" aria-hidden="true" id="verifying-installation"></a><a href="#verifying-installation" 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>Verifying Installation</h2>
<p>Along with previously existing files and directories, your root directory will now contain a structure similar to:</p>
<pre><code class="hljs css languages- bash">root-directory
<pre><code class="hljs css languages-bash">root-directory
├── docs-examples-from-docusaurus
│ ├── doc1.md
│ ├── doc2.md
@ -94,7 +94,7 @@
<p><img src="/img/getting-started-preparation-verify.png" alt=""></p>
<h3><a class="anchor" aria-hidden="true" id="launching-the-server-behind-a-proxy"></a><a href="#launching-the-server-behind-a-proxy" 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>Launching the server behind a proxy</h3>
<p>If you are behind a corporate proxy, you need to disable it for the development server requests. It can be done using the <code>NO_PROXY</code> environment variable.</p>
<pre><code class="hljs css languages- sh">SET NO_PROXY=localhost
<pre><code class="hljs css languages-sh">SET NO_PROXY=localhost
yarn start (or npm run start)
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="updating-your-docusaurus-version"></a><a href="#updating-your-docusaurus-version" 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>Updating Your Docusaurus Version</h2>

22
docs/en/1.3.0/navigation.html
View file

@ -50,13 +50,13 @@
</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/facebook/docusaurus/edit/master/docs/guides-navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigation and Sidebars</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="referencing-site-documents"></a><a href="#referencing-site-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>Referencing Site Documents</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://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>For example, if you are in <code>doc2.md</code> and you want to reference <code>doc1.md</code>:</p>
<pre><code class="hljs css languages- md">I am referencing a [<span class="hljs-string">document</span>](<span class="hljs-link">doc1.md</span>).
<pre><code class="hljs css languages-md">I am referencing a [<span class="hljs-string">document</span>](<span class="hljs-link">doc1.md</span>).
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="how-documents-are-linked"></a><a href="#how-documents-are-linked" 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>How Documents are Linked</h2>
<p>New markdown files within <code>docs</code> will show up as pages on the website. Links to those documents are created first by using the <code>id</code> in the header of each document. If there is no <code>id</code> field, then the name of the file will serve as the link name.</p>
<p>For example, creating an empty file such as <code>docs/getting-started.md</code> will enable the new page URL as <code>/docs/getting-started.html</code>.</p>
<p>Suppose you add this to your document:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">intro</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Getting</span> <span class="hljs-string">Started</span>
<span class="hljs-meta">---</span>
@ -77,7 +77,7 @@
<p>Until you add your document to <code>website/sidebars.json</code>, they will only be accessible via a direct URL. The doc will not show up in any sidebar.</p>
</blockquote>
<p>Within <code>sidebars.json</code>, add the <code>id</code> you used in the document header to existing sidebar/category. In the below case, <code>docs</code> is the name of the sidebar and <code>Getting Started</code> is a category within the sidebar.</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-string">"docs"</span>: {
<span class="hljs-string">"Getting Started"</span>: [
<span class="hljs-string">"getting-started"</span>
@ -88,7 +88,7 @@
}
</code></pre>
<p>Or you can create a new category within the sidebar:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-string">"docs"</span>: {
<span class="hljs-string">"My New Sidebar Category"</span>: [
<span class="hljs-string">"getting-started"</span>
@ -100,7 +100,7 @@
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="adding-new-sidebars"></a><a href="#adding-new-sidebars" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding New Sidebars</h3>
<p>You can also put a document in a new sidebar. In the following example, we are creating an <code>examples-sidebar</code> sidebar within <code>sidebars.json</code> that has a category called <code>My Example Category</code> containing a document with an <code>id</code> of <code>my-examples</code>.</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-string">"examples-sidebar"</span>: {
<span class="hljs-string">"My Example Category"</span>: [
<span class="hljs-string">"my-examples"</span>
@ -115,7 +115,7 @@
<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 languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-attr">headerLinks</span>: [
...
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">'my-examples'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Examples'</span> },
@ -127,7 +127,7 @@
<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 languages- js">{
<pre><code class="hljs css languages-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> },
@ -139,7 +139,7 @@
<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 languages- js">{
<pre><code class="hljs css languages-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> },
@ -156,7 +156,7 @@
<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 languages- js">{
<pre><code class="hljs css languages-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> },
@ -167,7 +167,7 @@
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="languages-dropdown"></a><a href="#languages-dropdown" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Languages Dropdown</h3>
<p>If translations is enabled on your site, the language dropdown will appear to the right of your links (and to the left of the search bar, if search is enabled). If you want to put the language selection drop down between links in the header, add a languages entry in the <code>headerLinks</code> config array:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-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> },
@ -189,7 +189,7 @@
<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 more easily 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/en/1.3.0/site-config#optional-fields">option</a> to your <code>siteConfig.js</code>.</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-attr">onPageNav</span>: <span class="hljs-string">'separate'</span>,
...
}

22
docs/en/1.3.0/navigation/index.html
View file

@ -50,13 +50,13 @@
</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/facebook/docusaurus/edit/master/docs/guides-navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigation and Sidebars</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="referencing-site-documents"></a><a href="#referencing-site-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>Referencing Site Documents</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://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>For example, if you are in <code>doc2.md</code> and you want to reference <code>doc1.md</code>:</p>
<pre><code class="hljs css languages- md">I am referencing a [<span class="hljs-string">document</span>](<span class="hljs-link">doc1.md</span>).
<pre><code class="hljs css languages-md">I am referencing a [<span class="hljs-string">document</span>](<span class="hljs-link">doc1.md</span>).
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="how-documents-are-linked"></a><a href="#how-documents-are-linked" 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>How Documents are Linked</h2>
<p>New markdown files within <code>docs</code> will show up as pages on the website. Links to those documents are created first by using the <code>id</code> in the header of each document. If there is no <code>id</code> field, then the name of the file will serve as the link name.</p>
<p>For example, creating an empty file such as <code>docs/getting-started.md</code> will enable the new page URL as <code>/docs/getting-started.html</code>.</p>
<p>Suppose you add this to your document:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">intro</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Getting</span> <span class="hljs-string">Started</span>
<span class="hljs-meta">---</span>
@ -77,7 +77,7 @@
<p>Until you add your document to <code>website/sidebars.json</code>, they will only be accessible via a direct URL. The doc will not show up in any sidebar.</p>
</blockquote>
<p>Within <code>sidebars.json</code>, add the <code>id</code> you used in the document header to existing sidebar/category. In the below case, <code>docs</code> is the name of the sidebar and <code>Getting Started</code> is a category within the sidebar.</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-string">"docs"</span>: {
<span class="hljs-string">"Getting Started"</span>: [
<span class="hljs-string">"getting-started"</span>
@ -88,7 +88,7 @@
}
</code></pre>
<p>Or you can create a new category within the sidebar:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-string">"docs"</span>: {
<span class="hljs-string">"My New Sidebar Category"</span>: [
<span class="hljs-string">"getting-started"</span>
@ -100,7 +100,7 @@
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="adding-new-sidebars"></a><a href="#adding-new-sidebars" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding New Sidebars</h3>
<p>You can also put a document in a new sidebar. In the following example, we are creating an <code>examples-sidebar</code> sidebar within <code>sidebars.json</code> that has a category called <code>My Example Category</code> containing a document with an <code>id</code> of <code>my-examples</code>.</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-string">"examples-sidebar"</span>: {
<span class="hljs-string">"My Example Category"</span>: [
<span class="hljs-string">"my-examples"</span>
@ -115,7 +115,7 @@
<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 languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-attr">headerLinks</span>: [
...
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">'my-examples'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Examples'</span> },
@ -127,7 +127,7 @@
<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 languages- js">{
<pre><code class="hljs css languages-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> },
@ -139,7 +139,7 @@
<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 languages- js">{
<pre><code class="hljs css languages-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> },
@ -156,7 +156,7 @@
<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 languages- js">{
<pre><code class="hljs css languages-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> },
@ -167,7 +167,7 @@
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="languages-dropdown"></a><a href="#languages-dropdown" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Languages Dropdown</h3>
<p>If translations is enabled on your site, the language dropdown will appear to the right of your links (and to the left of the search bar, if search is enabled). If you want to put the language selection drop down between links in the header, add a languages entry in the <code>headerLinks</code> config array:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-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> },
@ -189,7 +189,7 @@
<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 more easily 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/en/1.3.0/site-config#optional-fields">option</a> to your <code>siteConfig.js</code>.</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
<span class="hljs-attr">onPageNav</span>: <span class="hljs-string">'separate'</span>,
...
}

10
docs/en/1.3.0/publishing.html
View file

@ -50,7 +50,7 @@
</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/facebook/docusaurus/edit/master/docs/getting-started-publishing.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Publishing your site</h1></header><article><div><span><p>You should now have a <a href="/docs/en/1.3.0/site-creation">site up and running locally</a>. Once you have <a href="/docs/en/1.3.0/site-config">customized</a> it to your liking, it's time to publish it. Docusaurus generates a static HTML website that is ready to be served by your favorite web server or online hosting solution.</p>
<h2><a class="anchor" aria-hidden="true" id="building-static-html-pages"></a><a href="#building-static-html-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>Building Static HTML Pages</h2>
<p>To create a static build of your website, run the following script from the <code>website</code> directory:</p>
<pre><code class="hljs css languages- bash">yarn run build <span class="hljs-comment"># or `npm run build`</span>
<pre><code class="hljs css languages-bash">yarn run build <span class="hljs-comment"># or `npm run build`</span>
</code></pre>
<p>This will generate a <code>build</code> directory inside the <code>website</code> directory containing the <code>.html</code> files from all of your docs and other pages included in <code>pages</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="hosting-static-html-pages"></a><a href="#hosting-static-html-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>Hosting Static HTML Pages</h2>
@ -111,7 +111,7 @@ For user or org sites, the publish script will deploy these sites to the root of
</table>
<p>Once you have the parameter value information, you can go ahead and run the publish script, ensuring you have inserted your own values inside the various parameter placeholders:</p>
<p>To run the script directly from the command-line, you can use the following, filling in the parameter values as appropriate. If you run into issues related to SSH keys, visit <a href="https://help.github.com/articles/connecting-to-github-with-ssh/">GitHub's authentication documentation</a>.</p>
<pre><code class="hljs css languages- bash">GIT_USER=&lt;GIT_USER&gt; \
<pre><code class="hljs css languages-bash">GIT_USER=&lt;GIT_USER&gt; \
CURRENT_BRANCH=master \
USE_SSH=<span class="hljs-literal">true</span> \
yarn run publish-gh-pages <span class="hljs-comment"># or `npm run publish-gh-pages`</span>
@ -135,7 +135,7 @@ For user or org sites, the publish script will deploy these sites to the root of
<li>Create a <code>.circleci</code> directory and create a <code>config.yml</code> under that directory.</li>
<li>Copy the text below into <code>.circleci/config.yml</code>.</li>
</ol>
<pre><code class="hljs css languages- yaml"><span class="hljs-comment"># If you only want circle to run on direct commits to master, you can uncomment this out</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-comment"># If you only want circle to run on direct commits to master, you can uncomment this out</span>
<span class="hljs-comment"># and uncomment the filters: *filter-only-master down below too</span>
<span class="hljs-comment">#</span>
<span class="hljs-comment"># aliases:</span>
@ -182,7 +182,7 @@ For user or org sites, the publish script will deploy these sites to the root of
</blockquote>
<h3><a class="anchor" aria-hidden="true" id="tips-tricks"></a><a href="#tips-tricks" 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>Tips &amp; Tricks</h3>
<p>When initially deploying to a <code>gh-pages</code> branch using Circle CI, you may notice that some jobs triggered by commits to the <code>gh-pages</code> branch fail to run successfully due to a lack of tests. You can easily work around this by creating a basic Circle CI config with the following contents:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-comment"># Circle CI 2.0 Config File</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-comment"># Circle CI 2.0 Config File</span>
<span class="hljs-comment"># This config file will prevent tests from being run on the gh-pages branch.</span>
<span class="hljs-attr">version:</span> <span class="hljs-number">2</span>
<span class="hljs-attr">jobs:</span>
@ -202,7 +202,7 @@ For user or org sites, the publish script will deploy these sites to the root of
<li>Create a new environment variable named <code>GH_TOKEN</code> with your newly generated token as its value, then <code>GH_EMAIL</code> (your email address) and <code>GH_NAME</code> (your GitHub username).</li>
<li>Create a <code>.travis.yml</code> on the root of your repository with below text.</li>
</ol>
<pre><code class="hljs css languages- yaml"><span class="hljs-comment"># .travis.yml</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-comment"># .travis.yml</span>
<span class="hljs-attr">language:</span> <span class="hljs-string">node_js</span>
<span class="hljs-attr">node_js:</span>
<span class="hljs-bullet"> -</span> <span class="hljs-string">'8'</span>

10
docs/en/1.3.0/publishing/index.html
View file

@ -50,7 +50,7 @@
</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/facebook/docusaurus/edit/master/docs/getting-started-publishing.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Publishing your site</h1></header><article><div><span><p>You should now have a <a href="/docs/en/1.3.0/site-creation">site up and running locally</a>. Once you have <a href="/docs/en/1.3.0/site-config">customized</a> it to your liking, it's time to publish it. Docusaurus generates a static HTML website that is ready to be served by your favorite web server or online hosting solution.</p>
<h2><a class="anchor" aria-hidden="true" id="building-static-html-pages"></a><a href="#building-static-html-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>Building Static HTML Pages</h2>
<p>To create a static build of your website, run the following script from the <code>website</code> directory:</p>
<pre><code class="hljs css languages- bash">yarn run build <span class="hljs-comment"># or `npm run build`</span>
<pre><code class="hljs css languages-bash">yarn run build <span class="hljs-comment"># or `npm run build`</span>
</code></pre>
<p>This will generate a <code>build</code> directory inside the <code>website</code> directory containing the <code>.html</code> files from all of your docs and other pages included in <code>pages</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="hosting-static-html-pages"></a><a href="#hosting-static-html-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>Hosting Static HTML Pages</h2>
@ -111,7 +111,7 @@ For user or org sites, the publish script will deploy these sites to the root of
</table>
<p>Once you have the parameter value information, you can go ahead and run the publish script, ensuring you have inserted your own values inside the various parameter placeholders:</p>
<p>To run the script directly from the command-line, you can use the following, filling in the parameter values as appropriate. If you run into issues related to SSH keys, visit <a href="https://help.github.com/articles/connecting-to-github-with-ssh/">GitHub's authentication documentation</a>.</p>
<pre><code class="hljs css languages- bash">GIT_USER=&lt;GIT_USER&gt; \
<pre><code class="hljs css languages-bash">GIT_USER=&lt;GIT_USER&gt; \
CURRENT_BRANCH=master \
USE_SSH=<span class="hljs-literal">true</span> \
yarn run publish-gh-pages <span class="hljs-comment"># or `npm run publish-gh-pages`</span>
@ -135,7 +135,7 @@ For user or org sites, the publish script will deploy these sites to the root of
<li>Create a <code>.circleci</code> directory and create a <code>config.yml</code> under that directory.</li>
<li>Copy the text below into <code>.circleci/config.yml</code>.</li>
</ol>
<pre><code class="hljs css languages- yaml"><span class="hljs-comment"># If you only want circle to run on direct commits to master, you can uncomment this out</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-comment"># If you only want circle to run on direct commits to master, you can uncomment this out</span>
<span class="hljs-comment"># and uncomment the filters: *filter-only-master down below too</span>
<span class="hljs-comment">#</span>
<span class="hljs-comment"># aliases:</span>
@ -182,7 +182,7 @@ For user or org sites, the publish script will deploy these sites to the root of
</blockquote>
<h3><a class="anchor" aria-hidden="true" id="tips-tricks"></a><a href="#tips-tricks" 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>Tips &amp; Tricks</h3>
<p>When initially deploying to a <code>gh-pages</code> branch using Circle CI, you may notice that some jobs triggered by commits to the <code>gh-pages</code> branch fail to run successfully due to a lack of tests. You can easily work around this by creating a basic Circle CI config with the following contents:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-comment"># Circle CI 2.0 Config File</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-comment"># Circle CI 2.0 Config File</span>
<span class="hljs-comment"># This config file will prevent tests from being run on the gh-pages branch.</span>
<span class="hljs-attr">version:</span> <span class="hljs-number">2</span>
<span class="hljs-attr">jobs:</span>
@ -202,7 +202,7 @@ For user or org sites, the publish script will deploy these sites to the root of
<li>Create a new environment variable named <code>GH_TOKEN</code> with your newly generated token as its value, then <code>GH_EMAIL</code> (your email address) and <code>GH_NAME</code> (your GitHub username).</li>
<li>Create a <code>.travis.yml</code> on the root of your repository with below text.</li>
</ol>
<pre><code class="hljs css languages- yaml"><span class="hljs-comment"># .travis.yml</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-comment"># .travis.yml</span>
<span class="hljs-attr">language:</span> <span class="hljs-string">node_js</span>
<span class="hljs-attr">node_js:</span>
<span class="hljs-bullet"> -</span> <span class="hljs-string">'8'</span>

6
docs/en/1.3.0/search.html
View file

@ -51,7 +51,7 @@
<p>DocSearch works by crawling the content of your website every 24 hours and putting all the content in an Algolia index. This content is then queried directly from your front-end using the Algolia API. Note that your website need to be publicly available for this to work (ie. not behind a firewall). This service is free.</p>
<h2><a class="anchor" aria-hidden="true" id="enabling-the-search-bar"></a><a href="#enabling-the-search-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>Enabling the Search Bar</h2>
<p>Enter your API key and index name (sent by Algolia) into <code>siteConfig.js</code> in the <code>algolia</code> section to enable search for your site.</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> siteConfig = {
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> siteConfig = {
...
algolia: {
<span class="hljs-attr">apiKey</span>: <span class="hljs-string">'my-api-key'</span>,
@ -63,7 +63,7 @@
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="extra-search-options"></a><a href="#extra-search-options" 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>Extra Search Options</h2>
<p>You can also specify extra <a href="https://community.algolia.com/docsearch/documentation/">search options used by Algolia</a> by using an <code>algoliaOptions</code> field in <code>algolia</code>. This may be useful if you want to provide different search results for the different versions or languages of your docs. Any occurrences of &quot;VERSION&quot; or &quot;LANGUAGE&quot; will be replaced by the version or language of the current page, respectively. More details about search options can be <a href="https://www.algolia.com/doc/api-reference/api-parameters/#overview">found here</a>.</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> siteConfig = {
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> siteConfig = {
...
algolia: {
...
@ -77,7 +77,7 @@
<h2><a class="anchor" aria-hidden="true" id="controlling-the-location-of-the-search-bar"></a><a href="#controlling-the-location-of-the-search-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>Controlling the Location of the Search Bar</h2>
<p>By default, the search bar will be the rightmost element in the top navigation bar.</p>
<p>If you want to change the default location, add the <code>searchBar</code> flag in the <code>headerLinks</code> field of <code>siteConfig.js</code> in your desired location. For example, you may want the search bar between your internal and external links.</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> siteConfig = {
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> siteConfig = {
...
headerLinks: [
{...}

6
docs/en/1.3.0/search/index.html
View file

@ -51,7 +51,7 @@
<p>DocSearch works by crawling the content of your website every 24 hours and putting all the content in an Algolia index. This content is then queried directly from your front-end using the Algolia API. Note that your website need to be publicly available for this to work (ie. not behind a firewall). This service is free.</p>
<h2><a class="anchor" aria-hidden="true" id="enabling-the-search-bar"></a><a href="#enabling-the-search-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>Enabling the Search Bar</h2>
<p>Enter your API key and index name (sent by Algolia) into <code>siteConfig.js</code> in the <code>algolia</code> section to enable search for your site.</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> siteConfig = {
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> siteConfig = {
...
algolia: {
<span class="hljs-attr">apiKey</span>: <span class="hljs-string">'my-api-key'</span>,
@ -63,7 +63,7 @@
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="extra-search-options"></a><a href="#extra-search-options" 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>Extra Search Options</h2>
<p>You can also specify extra <a href="https://community.algolia.com/docsearch/documentation/">search options used by Algolia</a> by using an <code>algoliaOptions</code> field in <code>algolia</code>. This may be useful if you want to provide different search results for the different versions or languages of your docs. Any occurrences of &quot;VERSION&quot; or &quot;LANGUAGE&quot; will be replaced by the version or language of the current page, respectively. More details about search options can be <a href="https://www.algolia.com/doc/api-reference/api-parameters/#overview">found here</a>.</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> siteConfig = {
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> siteConfig = {
...
algolia: {
...
@ -77,7 +77,7 @@
<h2><a class="anchor" aria-hidden="true" id="controlling-the-location-of-the-search-bar"></a><a href="#controlling-the-location-of-the-search-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>Controlling the Location of the Search Bar</h2>
<p>By default, the search bar will be the rightmost element in the top navigation bar.</p>
<p>If you want to change the default location, add the <code>searchBar</code> flag in the <code>headerLinks</code> field of <code>siteConfig.js</code> in your desired location. For example, you may want the search bar between your internal and external links.</p>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> siteConfig = {
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> siteConfig = {
...
headerLinks: [
{...}

12
docs/en/1.3.0/site-config.html
View file

@ -66,7 +66,7 @@
<p><code>headerIcon</code> - URL for icon used in header navigation bar.</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><code class="hljs css languages- js">headerLinks: [
<pre><code class="hljs css languages-js">headerLinks: [
<span class="hljs-comment">// Links to document with id doc1 for current language/version</span>
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">"doc1"</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">"Getting Started"</span> },
<span class="hljs-comment">// Link to page found at pages/en/help.js or if that does not exist, pages/help.js, for current language</span>
@ -99,9 +99,9 @@
<p><code>cleanUrl</code> - If <code>true</code>, allow URLs with no <code>html</code> extension. For example, a request to URL <a href="https://docusaurus.io/docs/installation">https://docusaurus.io/docs/installation</a> will returns the same result as <a href="https://docusaurus.io/docs/installation.html">https://docusaurus.io/docs/installation.html</a>.</p>
<p><code>cname</code> - The CNAME for your website. It will go into a <code>CNAME</code> file when your site is built.</p>
<p><code>customDocsPath</code> - By default, Docusaurus expects your documentation to be in a directory called <code>docs</code>. This directory is at the same level as the <code>website</code> directory (i.e., not inside the <code>website</code> directory). You can specify a custom path to your documentation with this field.</p>
<pre><code class="hljs css languages- js">customDocsPath: <span class="hljs-string">'docs/site'</span>;
<pre><code class="hljs css languages-js">customDocsPath: <span class="hljs-string">'docs/site'</span>;
</code></pre>
<pre><code class="hljs css languages- js">customDocsPath: <span class="hljs-string">'website-docs'</span>;
<pre><code class="hljs css languages-js">customDocsPath: <span class="hljs-string">'website-docs'</span>;
</code></pre>
<p><code>defaultVersionShown</code> - The default version for the site to be shown. If this is not set, the latest version will be shown.</p>
<p><code>disableHeaderTitle</code> - An option to disable showing the title in the header next to the header icon. Exclude this field to keep the header as normal, otherwise set to <code>true</code>.</p>
@ -112,7 +112,7 @@
<p><code>facebookPixelId</code> - <a href="https://www.facebook.com/business/a/facebook-pixel">Facebook Pixel</a> ID to track page views.</p>
<p><code>fonts</code> - Font-family CSS configuration for the site. If a font family is specified in <code>siteConfig.js</code> as <code>$myFont</code>, then adding a <code>myFont</code> key to an array in <code>fonts</code> will allow you to configure the font. Items appearing earlier in the array will take priority of later elements, so ordering of the fonts matter.</p>
<p>In the below example, we have two sets of font configurations, <code>myFont</code> and <code>myOtherFont</code>. <code>Times New Roman</code> is the preferred font in <code>myFont</code>. <code>-apple-system</code> is the preferred in <code>myOtherFont</code>.</p>
<pre><code class="hljs css languages- js">fonts: {
<pre><code class="hljs css languages-js">fonts: {
<span class="hljs-attr">myFont</span>: [
<span class="hljs-string">'Times New Roman'</span>,
<span class="hljs-string">'Serif'</span>
@ -124,7 +124,7 @@
},
</code></pre>
<p>The above fonts would be represented in your CSS file(s) as variables <code>$myFont</code> and <code>$myOtherFont</code>.</p>
<pre><code class="hljs css languages- css"><span class="hljs-selector-tag">h1</span> {
<pre><code class="hljs css languages-css"><span class="hljs-selector-tag">h1</span> {
<span class="hljs-attribute">font-family</span>: $myFont;
}
</code></pre>
@ -161,7 +161,7 @@
<p><code>wrapPagesHTML</code> - Boolean flag to indicate whether <code>html</code> files in <code>/pages</code> should be wrapped with Docusaurus site styles, header and footer. This feature is experimental and relies on the files being <code>html</code> fragments instead of complete pages. It inserts the contents of your <code>html</code> file with no extra processing. Defaults to <code>false</code>.</p>
<p>Users can also add their own custom fields if they wish to provide some data across different files.</p>
<h2><a class="anchor" aria-hidden="true" id="example-siteconfigjs-with-many-available-fields"></a><a href="#example-siteconfigjs-with-many-available-fields" 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>Example siteConfig.js with many available fields</h2>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> users = [
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> users = [
{
<span class="hljs-attr">caption</span>: <span class="hljs-string">'User1'</span>,
<span class="hljs-attr">image</span>: <span class="hljs-string">'/test-site/img/docusaurus.svg'</span>,

12
docs/en/1.3.0/site-config/index.html
View file

@ -66,7 +66,7 @@
<p><code>headerIcon</code> - URL for icon used in header navigation bar.</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><code class="hljs css languages- js">headerLinks: [
<pre><code class="hljs css languages-js">headerLinks: [
<span class="hljs-comment">// Links to document with id doc1 for current language/version</span>
{ <span class="hljs-attr">doc</span>: <span class="hljs-string">"doc1"</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">"Getting Started"</span> },
<span class="hljs-comment">// Link to page found at pages/en/help.js or if that does not exist, pages/help.js, for current language</span>
@ -99,9 +99,9 @@
<p><code>cleanUrl</code> - If <code>true</code>, allow URLs with no <code>html</code> extension. For example, a request to URL <a href="https://docusaurus.io/docs/installation">https://docusaurus.io/docs/installation</a> will returns the same result as <a href="https://docusaurus.io/docs/installation.html">https://docusaurus.io/docs/installation.html</a>.</p>
<p><code>cname</code> - The CNAME for your website. It will go into a <code>CNAME</code> file when your site is built.</p>
<p><code>customDocsPath</code> - By default, Docusaurus expects your documentation to be in a directory called <code>docs</code>. This directory is at the same level as the <code>website</code> directory (i.e., not inside the <code>website</code> directory). You can specify a custom path to your documentation with this field.</p>
<pre><code class="hljs css languages- js">customDocsPath: <span class="hljs-string">'docs/site'</span>;
<pre><code class="hljs css languages-js">customDocsPath: <span class="hljs-string">'docs/site'</span>;
</code></pre>
<pre><code class="hljs css languages- js">customDocsPath: <span class="hljs-string">'website-docs'</span>;
<pre><code class="hljs css languages-js">customDocsPath: <span class="hljs-string">'website-docs'</span>;
</code></pre>
<p><code>defaultVersionShown</code> - The default version for the site to be shown. If this is not set, the latest version will be shown.</p>
<p><code>disableHeaderTitle</code> - An option to disable showing the title in the header next to the header icon. Exclude this field to keep the header as normal, otherwise set to <code>true</code>.</p>
@ -112,7 +112,7 @@
<p><code>facebookPixelId</code> - <a href="https://www.facebook.com/business/a/facebook-pixel">Facebook Pixel</a> ID to track page views.</p>
<p><code>fonts</code> - Font-family CSS configuration for the site. If a font family is specified in <code>siteConfig.js</code> as <code>$myFont</code>, then adding a <code>myFont</code> key to an array in <code>fonts</code> will allow you to configure the font. Items appearing earlier in the array will take priority of later elements, so ordering of the fonts matter.</p>
<p>In the below example, we have two sets of font configurations, <code>myFont</code> and <code>myOtherFont</code>. <code>Times New Roman</code> is the preferred font in <code>myFont</code>. <code>-apple-system</code> is the preferred in <code>myOtherFont</code>.</p>
<pre><code class="hljs css languages- js">fonts: {
<pre><code class="hljs css languages-js">fonts: {
<span class="hljs-attr">myFont</span>: [
<span class="hljs-string">'Times New Roman'</span>,
<span class="hljs-string">'Serif'</span>
@ -124,7 +124,7 @@
},
</code></pre>
<p>The above fonts would be represented in your CSS file(s) as variables <code>$myFont</code> and <code>$myOtherFont</code>.</p>
<pre><code class="hljs css languages- css"><span class="hljs-selector-tag">h1</span> {
<pre><code class="hljs css languages-css"><span class="hljs-selector-tag">h1</span> {
<span class="hljs-attribute">font-family</span>: $myFont;
}
</code></pre>
@ -161,7 +161,7 @@
<p><code>wrapPagesHTML</code> - Boolean flag to indicate whether <code>html</code> files in <code>/pages</code> should be wrapped with Docusaurus site styles, header and footer. This feature is experimental and relies on the files being <code>html</code> fragments instead of complete pages. It inserts the contents of your <code>html</code> file with no extra processing. Defaults to <code>false</code>.</p>
<p>Users can also add their own custom fields if they wish to provide some data across different files.</p>
<h2><a class="anchor" aria-hidden="true" id="example-siteconfigjs-with-many-available-fields"></a><a href="#example-siteconfigjs-with-many-available-fields" 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>Example siteConfig.js with many available fields</h2>
<pre><code class="hljs css languages- js"><span class="hljs-keyword">const</span> users = [
<pre><code class="hljs css languages-js"><span class="hljs-keyword">const</span> users = [
{
<span class="hljs-attr">caption</span>: <span class="hljs-string">'User1'</span>,
<span class="hljs-attr">image</span>: <span class="hljs-string">'/test-site/img/docusaurus.svg'</span>,

8
docs/en/1.3.0/site-creation.html
View file

@ -51,7 +51,7 @@
<p>After <a href="/docs/en/1.3.0/installation">installation</a> and <a href="/docs/en/1.3.0/site-preparation">preparation</a>, much of the work to create a basic site for your docs is already complete.</p>
<h2><a class="anchor" aria-hidden="true" id="site-structure"></a><a href="#site-structure" 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 Structure</h2>
<p>Your site structure looks like the following:</p>
<pre><code class="hljs css languages- bash">root-directory
<pre><code class="hljs css languages-bash">root-directory
├── docs
└── website
├── blog
@ -74,7 +74,7 @@
<p>To create a fully functional site, you only need to do a few steps:</p>
<ol>
<li><p>Add your documentation to the <code>/docs</code> directory as <code>.md</code> files, ensuring you have the proper <a href="/docs/en/1.3.0/doc-markdown#documents">header</a> in each file. The simplest header would be the following, where <code>id</code> is the link name (e.g., <code>docs/intro.html</code>) and the <code>title</code>, is, of course, the title of the browser page.</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">intro</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Getting</span> <span class="hljs-string">Started</span>
<span class="hljs-meta">---</span>
@ -92,7 +92,7 @@
<li>Place assets, such as images, in the <code>website/static/</code> directory.</li>
<li>Run the site to see the results of your changes.</li>
</ol>
<pre><code class="hljs css languages- bash"><span class="hljs-built_in">cd</span> website
<pre><code class="hljs css languages-bash"><span class="hljs-built_in">cd</span> website
yarn run start <span class="hljs-comment"># or `npm run start`</span>
<span class="hljs-comment"># Navigate to http://localhost:3000</span>
</code></pre>
@ -103,7 +103,7 @@ yarn run start <span class="hljs-comment"># or `npm run start`</span>
<li>Remove the <code>index.js</code> file from the <code>website/pages</code> directory, if it exists.</li>
<li>Add a <a href="/docs/en/1.3.0/custom-pages#adding-static-pages">custom static <code>index.html</code> page</a> in the <code>website/static</code> directory with the following contents:</li>
</ol>
<pre><code class="hljs css languages- html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<pre><code class="hljs css languages-html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en-US"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>

8
docs/en/1.3.0/site-creation/index.html
View file

@ -51,7 +51,7 @@
<p>After <a href="/docs/en/1.3.0/installation">installation</a> and <a href="/docs/en/1.3.0/site-preparation">preparation</a>, much of the work to create a basic site for your docs is already complete.</p>
<h2><a class="anchor" aria-hidden="true" id="site-structure"></a><a href="#site-structure" 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 Structure</h2>
<p>Your site structure looks like the following:</p>
<pre><code class="hljs css languages- bash">root-directory
<pre><code class="hljs css languages-bash">root-directory
├── docs
└── website
├── blog
@ -74,7 +74,7 @@
<p>To create a fully functional site, you only need to do a few steps:</p>
<ol>
<li><p>Add your documentation to the <code>/docs</code> directory as <code>.md</code> files, ensuring you have the proper <a href="/docs/en/1.3.0/doc-markdown#documents">header</a> in each file. The simplest header would be the following, where <code>id</code> is the link name (e.g., <code>docs/intro.html</code>) and the <code>title</code>, is, of course, the title of the browser page.</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-meta">---</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">intro</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Getting</span> <span class="hljs-string">Started</span>
<span class="hljs-meta">---</span>
@ -92,7 +92,7 @@
<li>Place assets, such as images, in the <code>website/static/</code> directory.</li>
<li>Run the site to see the results of your changes.</li>
</ol>
<pre><code class="hljs css languages- bash"><span class="hljs-built_in">cd</span> website
<pre><code class="hljs css languages-bash"><span class="hljs-built_in">cd</span> website
yarn run start <span class="hljs-comment"># or `npm run start`</span>
<span class="hljs-comment"># Navigate to http://localhost:3000</span>
</code></pre>
@ -103,7 +103,7 @@ yarn run start <span class="hljs-comment"># or `npm run start`</span>
<li>Remove the <code>index.js</code> file from the <code>website/pages</code> directory, if it exists.</li>
<li>Add a <a href="/docs/en/1.3.0/custom-pages#adding-static-pages">custom static <code>index.html</code> page</a> in the <code>website/static</code> directory with the following contents:</li>
</ol>
<pre><code class="hljs css languages- html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<pre><code class="hljs css languages-html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en-US"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>

2
docs/en/1.3.0/site-preparation.html
View file

@ -50,7 +50,7 @@
</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/facebook/docusaurus/edit/master/docs/getting-started-preparation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Site Preparation</h1></header><article><div><span><p>After <a href="/docs/en/1.3.0/installation">installing Docusaurus</a>, you now have a skeleton to work from for your specific website. The following discusses the rest of the Docusaurus structure in order for you to prepare your site.</p>
<h2><a class="anchor" aria-hidden="true" id="directory-structure"></a><a href="#directory-structure" 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>Directory Structure</h2>
<p>As shown after you <a href="/docs/en/1.3.0/installation">installed Docusaurus</a>, the initialization script created a directory structure similar to:</p>
<pre><code class="hljs css languages- bash">root-directory
<pre><code class="hljs css languages-bash">root-directory
├── docs-examples-from-docusaurus
│ ├── doc1.md
│ ├── doc2.md

2
docs/en/1.3.0/site-preparation/index.html
View file

@ -50,7 +50,7 @@
</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/facebook/docusaurus/edit/master/docs/getting-started-preparation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Site Preparation</h1></header><article><div><span><p>After <a href="/docs/en/1.3.0/installation">installing Docusaurus</a>, you now have a skeleton to work from for your specific website. The following discusses the rest of the Docusaurus structure in order for you to prepare your site.</p>
<h2><a class="anchor" aria-hidden="true" id="directory-structure"></a><a href="#directory-structure" 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>Directory Structure</h2>
<p>As shown after you <a href="/docs/en/1.3.0/installation">installed Docusaurus</a>, the initialization script created a directory structure similar to:</p>
<pre><code class="hljs css languages- bash">root-directory
<pre><code class="hljs css languages-bash">root-directory
├── docs-examples-from-docusaurus
│ ├── doc1.md
│ ├── doc2.md

26
docs/en/1.3.0/translation.html
View file

@ -50,13 +50,13 @@
</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/facebook/docusaurus/edit/master/docs/guides-translation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Translations &amp; Localization</h1></header><article><div><span><p>Docusaurus allows for easy translation functionality using <a href="https://crowdin.com/">Crowdin</a>. 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>&lt;translate&gt;</code> tag. Other titles and labels will also be found and properly translated.</p>
<h2><a class="anchor" aria-hidden="true" id="docusaurus-translation-configurations"></a><a href="#docusaurus-translation-configurations" 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>Docusaurus Translation Configurations</h2>
<p>To generate example files for translations with Docusaurus, run the <code>examples</code> script with the command line argument <code>translations</code>:</p>
<pre><code class="hljs css languages- bash">npm run examples translations
<pre><code class="hljs css languages-bash">npm run examples translations
</code></pre>
<p>or</p>
<pre><code class="hljs css languages- bash">yarn examples translations
<pre><code class="hljs css languages-bash">yarn examples translations
</code></pre>
<p>This will create the following files:</p>
<pre><code class="hljs css languages- bash">pages/en/<span class="hljs-built_in">help</span>-with-translations.js
<pre><code class="hljs css languages-bash">pages/en/<span class="hljs-built_in">help</span>-with-translations.js
languages.js
../crowdin.yaml
</code></pre>
@ -76,7 +76,7 @@ languages.js
<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> directory.</p>
<p>Wrap strings you want translated in a <code>&lt;translate&gt;</code> tag, and add the following <code>require</code> statement to the top of the file:</p>
<pre><code class="hljs css languages- jsx"><span class="token operator">...</span>
<pre><code class="hljs css languages-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>
<span class="token operator">...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>
@ -85,7 +85,7 @@ languages.js
<span class="token operator">...</span>
</code></pre>
<p>You can also include an optional description attribute to give more context to a translator about how to translate the string:</p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>translate</span> <span class="token attr-name">desc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flower, not verb<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Rose<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>translate</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
</code></pre>
@ -95,7 +95,7 @@ languages.js
<h2><a class="anchor" aria-hidden="true" id="gathering-strings-to-translate"></a><a href="#gathering-strings-to-translate" 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>Gathering Strings to Translate</h2>
<p>The strings within localized Pages must be extracted and provided to Crowdin.</p>
<p>Add the following script to your <code>website/package.json</code> file, if it does not exist already:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
...
<span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"write-translations"</span>: <span class="hljs-string">"docusaurus-write-translations"</span>
@ -114,7 +114,7 @@ languages.js
</ul>
<h3><a class="anchor" aria-hidden="true" id="custom-translation-strings"></a><a href="#custom-translation-strings" 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>Custom Translation Strings</h3>
<p>If you want to add additional custom translation strings, or override any of the strings that get produced by the script that creates the <code>website/i18n/en.json</code> file, you can add a <code>website/data/custom-translation-strings.json</code> file. The file should have form of:</p>
<pre><code class="hljs css languages- json">{
<pre><code class="hljs css languages-json">{
<span class="hljs-attr">"localized-strings"</span>: {
<span class="hljs-attr">"id"</span>: <span class="hljs-string">"string"</span>,
<span class="hljs-attr">"id2"</span>: <span class="hljs-string">"string2"</span>
@ -127,7 +127,7 @@ languages.js
</code></pre>
<p>where <code>localized-strings</code> represent strings in your documentation content and <code>pages-strings</code> represents metadata in your documentation (e.g., title, links, etc).</p>
<p>Here is an example:</p>
<pre><code class="hljs css languages- json">{
<pre><code class="hljs css languages-json">{
<span class="hljs-attr">"_comment"</span>: <span class="hljs-string">"This file is used to provide custom strings for translations, including overriding defaults"</span>,
<span class="hljs-attr">"localized-strings"</span>: {
<span class="hljs-attr">"translation"</span>: <span class="hljs-string">"Translations and Localization"</span>
@ -161,7 +161,7 @@ languages.js
</blockquote>
<p>The example below can be automatically generated by the Docusaurus cli with the <code>examples</code> script. It should be placed in the top level of your project directory to configure how and what files are uploaded/downloaded.</p>
<p>Below is an example Crowdin configuration for the respective languages: German, Spanish, French, Japanese, Korean, Bahasa Indonesia, Portuguese Brazilian, Chinese Simplified, and Chinese Traditional.</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-attr">project_identifier_env:</span> <span class="hljs-string">CROWDIN_DOCUSAURUS_PROJECT_ID</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-attr">project_identifier_env:</span> <span class="hljs-string">CROWDIN_DOCUSAURUS_PROJECT_ID</span>
<span class="hljs-attr">api_key_env:</span> <span class="hljs-string">CROWDIN_DOCUSAURUS_API_KEY</span>
<span class="hljs-attr">base_path:</span> <span class="hljs-string">"./"</span>
<span class="hljs-attr">preserve_hierarchy:</span> <span class="hljs-literal">true</span>
@ -186,14 +186,14 @@ languages.js
<h3><a class="anchor" aria-hidden="true" id="setup-the-crowdin-scripts"></a><a href="#setup-the-crowdin-scripts" 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>Setup the Crowdin Scripts</h3>
<p>You will want to manually sync your files to and from Crowdin. The sync process will upload any markdown files in <code>/docs</code> as well as translatable strings in <code>website/i18n/en.json</code>. (These strings can be generated by running <code>yarn write-translations</code>.)</p>
<p>You can add the following to your <code>package.json</code> to manually trigger Crowdin.</p>
<pre><code class="hljs css languages- js"><span class="hljs-string">"scripts"</span>: {
<pre><code class="hljs css languages-js"><span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"crowdin-upload"</span>: <span class="hljs-string">"crowdin --config ../crowdin.yaml upload sources --auto-update -b master"</span>,
<span class="hljs-string">"crowdin-download"</span>: <span class="hljs-string">"crowdin --config ../crowdin.yaml download -b master"</span>
},
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="manual-file-sync"></a><a href="#manual-file-sync" 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>Manual File Sync</h3>
<p>You will always want to upload your markdown files and translatable strings first and the download the translations section. So run the commands in this order:</p>
<pre><code class="hljs css languages- bash">CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=YOUR_CROWDIN_API_KEY yarn run crowdin-upload
<pre><code class="hljs css languages-bash">CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=YOUR_CROWDIN_API_KEY yarn run crowdin-upload
CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=YOUR_CROWDIN_API_KEY yarn run crowdin-download
</code></pre>
<blockquote>
@ -211,7 +211,7 @@ CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY
<h3><a class="anchor" aria-hidden="true" id="automated-file-sync-using-circleci"></a><a href="#automated-file-sync-using-circleci" 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>Automated File Sync Using CircleCI</h3>
<p>You can automate pulling down and uploading translations for your files using the <a href="https://circleci.com">CircleCI</a> web continuous integration service.</p>
<p>First, update the <code>circle.yml</code> file in your project directory to include steps to upload English files to be translated and download translated files using the Crowdin CLI. Here is an example <code>circle.yml</code> file:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-attr">machine:</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-attr">machine:</span>
<span class="hljs-attr"> node:</span>
<span class="hljs-attr"> version:</span> <span class="hljs-number">6.10</span><span class="hljs-number">.3</span>
<span class="hljs-attr"> npm:</span>
@ -247,7 +247,7 @@ CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY
<p>If you wish to use Crowdin on your machine locally, you can install the <a href="https://support.crowdin.com/cli-tool/">Crowdin CLI tool</a> and run the same commands found in the <code>circle.yaml</code> file. The only difference is that you must set <code>project_identifier</code> and <code>api_key</code> values in the <code>crowdin.yaml</code> file since you will not have Circle environment variables set up.</p>
<h2><a class="anchor" aria-hidden="true" id="versioned-translations"></a><a href="#versioned-translations" 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>Versioned Translations</h2>
<p>If you wish to have translation and versioning for your documentation, add the following section to the end of your <code>crowdin.yaml</code> file:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-bullet"> -</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-bullet"> -</span>
<span class="hljs-attr"> source:</span> <span class="hljs-string">'/website/versioned_docs/**/*.md'</span>
<span class="hljs-attr"> translation:</span> <span class="hljs-string">'/website/translated_docs/%locale%/**/%original_file_name%'</span>
<span class="hljs-attr"> languages_mapping:</span> <span class="hljs-meta">*anchor</span>

26
docs/en/1.3.0/translation/index.html
View file

@ -50,13 +50,13 @@
</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/facebook/docusaurus/edit/master/docs/guides-translation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Translations &amp; Localization</h1></header><article><div><span><p>Docusaurus allows for easy translation functionality using <a href="https://crowdin.com/">Crowdin</a>. 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>&lt;translate&gt;</code> tag. Other titles and labels will also be found and properly translated.</p>
<h2><a class="anchor" aria-hidden="true" id="docusaurus-translation-configurations"></a><a href="#docusaurus-translation-configurations" 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>Docusaurus Translation Configurations</h2>
<p>To generate example files for translations with Docusaurus, run the <code>examples</code> script with the command line argument <code>translations</code>:</p>
<pre><code class="hljs css languages- bash">npm run examples translations
<pre><code class="hljs css languages-bash">npm run examples translations
</code></pre>
<p>or</p>
<pre><code class="hljs css languages- bash">yarn examples translations
<pre><code class="hljs css languages-bash">yarn examples translations
</code></pre>
<p>This will create the following files:</p>
<pre><code class="hljs css languages- bash">pages/en/<span class="hljs-built_in">help</span>-with-translations.js
<pre><code class="hljs css languages-bash">pages/en/<span class="hljs-built_in">help</span>-with-translations.js
languages.js
../crowdin.yaml
</code></pre>
@ -76,7 +76,7 @@ languages.js
<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> directory.</p>
<p>Wrap strings you want translated in a <code>&lt;translate&gt;</code> tag, and add the following <code>require</code> statement to the top of the file:</p>
<pre><code class="hljs css languages- jsx"><span class="token operator">...</span>
<pre><code class="hljs css languages-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>
<span class="token operator">...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>
@ -85,7 +85,7 @@ languages.js
<span class="token operator">...</span>
</code></pre>
<p>You can also include an optional description attribute to give more context to a translator about how to translate the string:</p>
<pre><code class="hljs css languages- jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
<pre><code class="hljs css languages-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>translate</span> <span class="token attr-name">desc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flower, not verb<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Rose<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>translate</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
</code></pre>
@ -95,7 +95,7 @@ languages.js
<h2><a class="anchor" aria-hidden="true" id="gathering-strings-to-translate"></a><a href="#gathering-strings-to-translate" 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>Gathering Strings to Translate</h2>
<p>The strings within localized Pages must be extracted and provided to Crowdin.</p>
<p>Add the following script to your <code>website/package.json</code> file, if it does not exist already:</p>
<pre><code class="hljs css languages- js">{
<pre><code class="hljs css languages-js">{
...
<span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"write-translations"</span>: <span class="hljs-string">"docusaurus-write-translations"</span>
@ -114,7 +114,7 @@ languages.js
</ul>
<h3><a class="anchor" aria-hidden="true" id="custom-translation-strings"></a><a href="#custom-translation-strings" 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>Custom Translation Strings</h3>
<p>If you want to add additional custom translation strings, or override any of the strings that get produced by the script that creates the <code>website/i18n/en.json</code> file, you can add a <code>website/data/custom-translation-strings.json</code> file. The file should have form of:</p>
<pre><code class="hljs css languages- json">{
<pre><code class="hljs css languages-json">{
<span class="hljs-attr">"localized-strings"</span>: {
<span class="hljs-attr">"id"</span>: <span class="hljs-string">"string"</span>,
<span class="hljs-attr">"id2"</span>: <span class="hljs-string">"string2"</span>
@ -127,7 +127,7 @@ languages.js
</code></pre>
<p>where <code>localized-strings</code> represent strings in your documentation content and <code>pages-strings</code> represents metadata in your documentation (e.g., title, links, etc).</p>
<p>Here is an example:</p>
<pre><code class="hljs css languages- json">{
<pre><code class="hljs css languages-json">{
<span class="hljs-attr">"_comment"</span>: <span class="hljs-string">"This file is used to provide custom strings for translations, including overriding defaults"</span>,
<span class="hljs-attr">"localized-strings"</span>: {
<span class="hljs-attr">"translation"</span>: <span class="hljs-string">"Translations and Localization"</span>
@ -161,7 +161,7 @@ languages.js
</blockquote>
<p>The example below can be automatically generated by the Docusaurus cli with the <code>examples</code> script. It should be placed in the top level of your project directory to configure how and what files are uploaded/downloaded.</p>
<p>Below is an example Crowdin configuration for the respective languages: German, Spanish, French, Japanese, Korean, Bahasa Indonesia, Portuguese Brazilian, Chinese Simplified, and Chinese Traditional.</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-attr">project_identifier_env:</span> <span class="hljs-string">CROWDIN_DOCUSAURUS_PROJECT_ID</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-attr">project_identifier_env:</span> <span class="hljs-string">CROWDIN_DOCUSAURUS_PROJECT_ID</span>
<span class="hljs-attr">api_key_env:</span> <span class="hljs-string">CROWDIN_DOCUSAURUS_API_KEY</span>
<span class="hljs-attr">base_path:</span> <span class="hljs-string">"./"</span>
<span class="hljs-attr">preserve_hierarchy:</span> <span class="hljs-literal">true</span>
@ -186,14 +186,14 @@ languages.js
<h3><a class="anchor" aria-hidden="true" id="setup-the-crowdin-scripts"></a><a href="#setup-the-crowdin-scripts" 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>Setup the Crowdin Scripts</h3>
<p>You will want to manually sync your files to and from Crowdin. The sync process will upload any markdown files in <code>/docs</code> as well as translatable strings in <code>website/i18n/en.json</code>. (These strings can be generated by running <code>yarn write-translations</code>.)</p>
<p>You can add the following to your <code>package.json</code> to manually trigger Crowdin.</p>
<pre><code class="hljs css languages- js"><span class="hljs-string">"scripts"</span>: {
<pre><code class="hljs css languages-js"><span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"crowdin-upload"</span>: <span class="hljs-string">"crowdin --config ../crowdin.yaml upload sources --auto-update -b master"</span>,
<span class="hljs-string">"crowdin-download"</span>: <span class="hljs-string">"crowdin --config ../crowdin.yaml download -b master"</span>
},
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="manual-file-sync"></a><a href="#manual-file-sync" 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>Manual File Sync</h3>
<p>You will always want to upload your markdown files and translatable strings first and the download the translations section. So run the commands in this order:</p>
<pre><code class="hljs css languages- bash">CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=YOUR_CROWDIN_API_KEY yarn run crowdin-upload
<pre><code class="hljs css languages-bash">CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=YOUR_CROWDIN_API_KEY yarn run crowdin-upload
CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=YOUR_CROWDIN_API_KEY yarn run crowdin-download
</code></pre>
<blockquote>
@ -211,7 +211,7 @@ CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY
<h3><a class="anchor" aria-hidden="true" id="automated-file-sync-using-circleci"></a><a href="#automated-file-sync-using-circleci" 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>Automated File Sync Using CircleCI</h3>
<p>You can automate pulling down and uploading translations for your files using the <a href="https://circleci.com">CircleCI</a> web continuous integration service.</p>
<p>First, update the <code>circle.yml</code> file in your project directory to include steps to upload English files to be translated and download translated files using the Crowdin CLI. Here is an example <code>circle.yml</code> file:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-attr">machine:</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-attr">machine:</span>
<span class="hljs-attr"> node:</span>
<span class="hljs-attr"> version:</span> <span class="hljs-number">6.10</span><span class="hljs-number">.3</span>
<span class="hljs-attr"> npm:</span>
@ -247,7 +247,7 @@ CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY
<p>If you wish to use Crowdin on your machine locally, you can install the <a href="https://support.crowdin.com/cli-tool/">Crowdin CLI tool</a> and run the same commands found in the <code>circle.yaml</code> file. The only difference is that you must set <code>project_identifier</code> and <code>api_key</code> values in the <code>crowdin.yaml</code> file since you will not have Circle environment variables set up.</p>
<h2><a class="anchor" aria-hidden="true" id="versioned-translations"></a><a href="#versioned-translations" 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>Versioned Translations</h2>
<p>If you wish to have translation and versioning for your documentation, add the following section to the end of your <code>crowdin.yaml</code> file:</p>
<pre><code class="hljs css languages- yaml"><span class="hljs-bullet"> -</span>
<pre><code class="hljs css languages-yaml"><span class="hljs-bullet"> -</span>
<span class="hljs-attr"> source:</span> <span class="hljs-string">'/website/versioned_docs/**/*.md'</span>
<span class="hljs-attr"> translation:</span> <span class="hljs-string">'/website/translated_docs/%locale%/**/%original_file_name%'</span>
<span class="hljs-attr"> languages_mapping:</span> <span class="hljs-meta">*anchor</span>

10
docs/en/1.3.0/versioning.html
View file

@ -50,19 +50,19 @@
</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/facebook/docusaurus/edit/master/docs/guides-versioning.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Versioning</h1></header><article><div><span><p>You can use the <code>version</code> script to cut a new documentation version based on the latest content in the <code>docs</code> directory. That specific set of documentation will then be preserved and accessible even as the documentation in the <code>docs</code> directory changes moving forward.</p>
<h2><a class="anchor" aria-hidden="true" id="how-to-create-new-versions"></a><a href="#how-to-create-new-versions" 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>How to Create New Versions</h2>
<p>Run the following script to generate a starter versions page listing all the site versions:</p>
<pre><code class="hljs css languages- bash">yarn examples versions
<pre><code class="hljs css languages-bash">yarn examples versions
</code></pre>
<p>This creates the <code>pages/en/versions.js</code> file.</p>
<p>You can edit this file later on to customize how you display the versions.</p>
<p>Add the following script to your <code>package.json</code> file if it doesn't already exist:</p>
<pre><code class="hljs css languages- js">...
<pre><code class="hljs css languages-js">...
<span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"version"</span>: <span class="hljs-string">"docusaurus-version"</span>
},
...
</code></pre>
<p>Run the script with a command line argument of the version you wish to create. e.g.,</p>
<pre><code class="hljs css languages- bash">yarn run version 1.0.0
<pre><code class="hljs css languages-bash">yarn run version 1.0.0
</code></pre>
<p>This will preserve all documents currently in the <code>docs</code> directory and make them available as documentation for version <code>1.0.0</code>.</p>
<p>If, for example, you ran the version script with <code>1.0.0</code> as the version number, version <code>1.0.0</code> is considered the latest release version for your project. The site will display the version number next to the title in the header. This version number links to a versions page that you created earlier.</p>
@ -93,14 +93,14 @@
<p>For example, a document with the original id <code>doc1</code> exists for the latest version, <code>1.0.0</code>, and has the same content as the document with the id <code>doc1</code> in the <code>docs</code> directory. When a new version <code>2.0.0</code> is created, the file for <code>doc1</code> will not be copied into <code>versioned_docs/version-2.0.0/</code>. There will still be a page for <code>docs/2.0.0/doc1.html</code>, but it will use the file from version <code>1.0.0</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="renaming-existing-versions"></a><a href="#renaming-existing-versions" 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>Renaming Existing Versions</h2>
<p>To rename an existing version number to something else, first make sure the following script is in your <code>package.json</code> file:</p>
<pre><code class="hljs css languages- js">...
<pre><code class="hljs css languages-js">...
<span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"rename-version"</span>: <span class="hljs-string">"docusaurus-rename-version"</span>
},
...
</code></pre>
<p>Run the script with command line arguments of first, the current version name, then second, the new version name. e.g.,</p>
<pre><code class="hljs css languages- bash">yarn run rename-version 1.0.0 1.0.1
<pre><code class="hljs css languages-bash">yarn run rename-version 1.0.0 1.0.1
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="versioning-and-translations"></a><a href="#versioning-and-translations" 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>Versioning and Translations</h2>
<p>If you wish to use versioning and translations features, the <code>crowdin.yaml</code> file should be set up to upload and download versioned documents to and from Crowdin for translation. Translated, versioned files will go into the directory <code>translated_docs/${language}/version-${version}/</code>. For more information, check out the <a href="/docs/en/1.3.0/translation">translations guide</a>.</p>

10
docs/en/1.3.0/versioning/index.html
View file

@ -50,19 +50,19 @@
</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/facebook/docusaurus/edit/master/docs/guides-versioning.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Versioning</h1></header><article><div><span><p>You can use the <code>version</code> script to cut a new documentation version based on the latest content in the <code>docs</code> directory. That specific set of documentation will then be preserved and accessible even as the documentation in the <code>docs</code> directory changes moving forward.</p>
<h2><a class="anchor" aria-hidden="true" id="how-to-create-new-versions"></a><a href="#how-to-create-new-versions" 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>How to Create New Versions</h2>
<p>Run the following script to generate a starter versions page listing all the site versions:</p>
<pre><code class="hljs css languages- bash">yarn examples versions
<pre><code class="hljs css languages-bash">yarn examples versions
</code></pre>
<p>This creates the <code>pages/en/versions.js</code> file.</p>
<p>You can edit this file later on to customize how you display the versions.</p>
<p>Add the following script to your <code>package.json</code> file if it doesn't already exist:</p>
<pre><code class="hljs css languages- js">...
<pre><code class="hljs css languages-js">...
<span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"version"</span>: <span class="hljs-string">"docusaurus-version"</span>
},
...
</code></pre>
<p>Run the script with a command line argument of the version you wish to create. e.g.,</p>
<pre><code class="hljs css languages- bash">yarn run version 1.0.0
<pre><code class="hljs css languages-bash">yarn run version 1.0.0
</code></pre>
<p>This will preserve all documents currently in the <code>docs</code> directory and make them available as documentation for version <code>1.0.0</code>.</p>
<p>If, for example, you ran the version script with <code>1.0.0</code> as the version number, version <code>1.0.0</code> is considered the latest release version for your project. The site will display the version number next to the title in the header. This version number links to a versions page that you created earlier.</p>
@ -93,14 +93,14 @@
<p>For example, a document with the original id <code>doc1</code> exists for the latest version, <code>1.0.0</code>, and has the same content as the document with the id <code>doc1</code> in the <code>docs</code> directory. When a new version <code>2.0.0</code> is created, the file for <code>doc1</code> will not be copied into <code>versioned_docs/version-2.0.0/</code>. There will still be a page for <code>docs/2.0.0/doc1.html</code>, but it will use the file from version <code>1.0.0</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="renaming-existing-versions"></a><a href="#renaming-existing-versions" 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>Renaming Existing Versions</h2>
<p>To rename an existing version number to something else, first make sure the following script is in your <code>package.json</code> file:</p>
<pre><code class="hljs css languages- js">...
<pre><code class="hljs css languages-js">...
<span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"rename-version"</span>: <span class="hljs-string">"docusaurus-rename-version"</span>
},
...
</code></pre>
<p>Run the script with command line arguments of first, the current version name, then second, the new version name. e.g.,</p>
<pre><code class="hljs css languages- bash">yarn run rename-version 1.0.0 1.0.1
<pre><code class="hljs css languages-bash">yarn run rename-version 1.0.0 1.0.1
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="versioning-and-translations"></a><a href="#versioning-and-translations" 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>Versioning and Translations</h2>
<p>If you wish to use versioning and translations features, the <code>crowdin.yaml</code> file should be set up to upload and download versioned documents to and from Crowdin for translation. Translated, versioned files will go into the directory <code>translated_docs/${language}/version-${version}/</code>. For more information, check out the <a href="/docs/en/1.3.0/translation">translations guide</a>.</p>