3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-07 13:22:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

Deploy website

Browse source 
Deploy website version based on 9ef4d7d8bf
This commit is contained in:
Website Deployment Script 2018-04-28 05:55:52 +00:00
parent 9ef4d7d8bf
commit 8b9f82c487
19 changed files with 330 additions and 298 deletions
Download patch file Download diff file Expand all files Collapse all files

70
blog/2017/12/14/introducing-docusaurus.html
View file

@ -20,53 +20,53 @@
<p><img src="/img/slash-birth.png" alt="Birth of Slash"></p> <p><img src="/img/slash-birth.png" alt="Birth of Slash"></p>
<p>When Facebook first started their open source program, many teams implemented a custom website for each of their open source projects. This approach presented challenges when the open source program team was asked to help the project teams improve their documentation. Since each site was unique, adding basic infrastructure such as a blog, consistent navigation, search, etc. became challenging undertakings.</p> <p>When Facebook first started their open source program, many teams implemented a custom website for each of their open source projects. This approach presented challenges when the open source program team was asked to help the project teams improve their documentation. Since each site was unique, adding basic infrastructure such as a blog, consistent navigation, search, etc. became challenging undertakings.</p>
<p>The open source team tried to help mitigate this problem by coming up with a standard template, based on Jekyll, that could be used as a starting point for a project website. We asked our new projects to manually copy our template source to their repo, write their docs, and publish. This template approach was adopted by most of open source projects launched; some existing projects even converted their custom website implementations to the new template as well.</p> <p>The open source team tried to help mitigate this problem by coming up with a standard template, based on Jekyll, that could be used as a starting point for a project website. We asked our new projects to manually copy our template source to their repo, write their docs, and publish. This template approach was adopted by most of open source projects launched; some existing projects even converted their custom website implementations to the new template as well.</p>
<p>The problem with the “copy the template to your repo” approach is that, even though the platform is consistent, pushing updates becomes unmaintainable across an entire suite of projects already using the template. This is because we lost control of the template after a project copied it to their repo. Projects were free to modify the template as desired and apply their own project-specific features to it. So while projects share the same site generation platform, they have now diverted enough where they cannot take advantage of the new features we have added to the template over time. There was no easy way we could ask all current projects to “copy” a new version of the template since it might break their existing site or remove features that they have added on their own. Instead, we would have to apply the updates manually to each project one-by-one. This became very problematic when projects started asking for our team for internationalization support within the template, requiring low-level changes to how the template was structured and generated.</p> <p>The problem with the &quot;copy the template to your repo&quot; approach is that, even though the platform is consistent, pushing updates becomes unmaintainable across an entire suite of projects already using the template. This is because we lost control of the template after a project copied it to their repo. Projects were free to modify the template as desired and apply their own project-specific features to it. So while projects share the same site generation platform, they have now diverted enough where they cannot take advantage of the new features we have added to the template over time. There was no easy way we could ask all current projects to &quot;copy&quot; a new version of the template since it might break their existing site or remove features that they have added on their own. Instead, we would have to apply the updates manually to each project one-by-one. This became very problematic when projects started asking for our team for internationalization support within the template, requiring low-level changes to how the template was structured and generated.</p>
<p>So we started thinking about what we could do to help mitigate the challenge of keeping sites updated and consistent across our entire portfolio. We also wanted multiple projects to share the same site generation software. We wanted them to start out with the same template, and yet have the flexibility to customize and adapt their site theme to suit their needs. They should be able to extend and customize their site, but when we update the underlying infrastructure with fixes and features, the project should be able update simply and without any breaking changes.</p> <p>So we started thinking about what we could do to help mitigate the challenge of keeping sites updated and consistent across our entire portfolio. We also wanted multiple projects to share the same site generation software. We wanted them to start out with the same template, and yet have the flexibility to customize and adapt their site theme to suit their needs. They should be able to extend and customize their site, but when we update the underlying infrastructure with fixes and features, the project should be able update simply and without any breaking changes.</p>
<p>Docusaurus was born!</p> <p>Docusaurus was born!</p>
<p>At Facebook, Docusaurus allows us to quickly get different projects up and running with documentation websites, especially for teams who don't have much experience with web development or primarily want a basic site to showcase their project. Docusaurus already supports sites needing more advanced features like internationalization for Jest and versioning for React Native. As different projects request new features for their sites, they are added to Docusaurus and simultaneously provided to all projects! All together, this ends up greatly reducing the work needed to maintain different sites for different projects. Our teams are able to focus on keeping their projects healthier by spending more time adding features, fixing bugs, and writing documentation.</p> <p>At Facebook, Docusaurus allows us to quickly get different projects up and running with documentation websites, especially for teams who don't have much experience with web development or primarily want a basic site to showcase their project. Docusaurus already supports sites needing more advanced features like internationalization for Jest and versioning for React Native. As different projects request new features for their sites, they are added to Docusaurus and simultaneously provided to all projects! All together, this ends up greatly reducing the work needed to maintain different sites for different projects. Our teams are able to focus on keeping their projects healthier by spending more time adding features, fixing bugs, and writing documentation.</p>
<h2><a class="anchor" aria-hidden="true" id="getting-up-and-running"></a><a href="#getting-up-and-running" aria-hidden="true" class="hash-link" ><svg 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>Getting Up and Running</h2> <h2><a class="anchor" aria-hidden="true" id="getting-up-and-running"></a><a href="#getting-up-and-running" aria-hidden="true" class="hash-link" ><svg 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>Getting Up and Running</h2>
<p><img src="/img/slash-upandrunning.png" alt="Slash Up and Running"></p> <p><img src="/img/slash-upandrunning.png" alt="Slash Up and Running"></p>
<p>At its core, we wanted sites running Docusaurus to be simple to use. With one <a href="https://docusaurus.io/docs/en/installation.html">installation</a> command and some simple <a href="https://docusaurus.io/docs/en/site-preparation.html">configuration</a>, you can actually have a default running website.</p> <p>At its core, we wanted sites running Docusaurus to be simple to use. With one <a href="https://docusaurus.io/docs/en/installation.html">installation</a> command and some simple <a href="https://docusaurus.io/docs/en/site-preparation.html">configuration</a>, you can actually have a default running website.</p>
<p>When you run docusaurus-init, you will see a structure similar to:</p> <p>When you run <code>docusaurus-init</code>, you will see a structure similar to:</p>
<pre><code class="hljs">root-of-repo <pre><code class="hljs css bash">root-of-repo
├── docs-examples-from-docusaurus ├── docs-examples-from-docusaurus
│ ├── doc1<span class="hljs-selector-class">.md</span> │ ├── doc1.md
│ ├── doc2<span class="hljs-selector-class">.md</span> │ ├── doc2.md
│ ├── doc3<span class="hljs-selector-class">.md</span> │ ├── doc3.md
│ ├── exampledoc4<span class="hljs-selector-class">.md</span> │ ├── exampledoc4.md
│ └── exampledoc5<span class="hljs-selector-class">.md</span> │ └── exampledoc5.md
├── website ├── website
│ ├── blog-examples-from-docusaurus │ ├── blog-examples-from-docusaurus
│ │ ├── <span class="hljs-number">2016</span>-<span class="hljs-number">03</span>-<span class="hljs-number">11</span>-blog-post<span class="hljs-selector-class">.md</span> │ │ ├── 2016-03-11-blog-post.md
│ │ └── <span class="hljs-number">2017</span>-<span class="hljs-number">04</span>-<span class="hljs-number">10</span>-blog-post-two<span class="hljs-selector-class">.md</span> │ │ └── 2017-04-10-blog-post-two.md
│ ├── core │ ├── core
│ │ └── Footer<span class="hljs-selector-class">.js</span> │ │ └── Footer.js
│ ├── node_modules │ ├── node_modules
│ ├── package<span class="hljs-selector-class">.json</span> │ ├── package.json
│ ├── pages │ ├── pages
│ ├── sidebars<span class="hljs-selector-class">.json</span> │ ├── sidebars.json
│ ├── siteConfig<span class="hljs-selector-class">.js</span> │ ├── siteConfig.js
│ └── static │ └── static
</code></pre> </code></pre>
<p>With the exception of node_modules and package.json, all the directories and files you see are where you customize and add content to your Docusaurus-based website. The docs folder is where you add your markdown that represents your documentation; the blog folder is where you add your markdown for your <a href="https://docusaurus.io/docs/en/blog.html">blog posts</a>; siteConfig.js is where you make most of the <a href="https://docusaurus.io/docs/en/site-config.html">customizations</a> for your site; sidebars.json is where you maintain the layout and content of the <a href="https://docusaurus.io/docs/en/navigation.html">sidebar</a> for your documentation; the pages folder is where you add <a href="https://docusaurus.io/docs/en/custom-pages.html">custom</a> pages for your site; the static folder is where all of your static assets go (e.g., css stylesheets and images); and the core folder is where you can customize core components of the site, in this case the footer.</p> <p>With the exception of node_modules and package.json, all the directories and files you see are where you customize and add content to your Docusaurus-based website. The docs folder is where you add your markdown that represents your documentation; the blog folder is where you add your markdown for your <a href="https://docusaurus.io/docs/en/blog.html">blog posts</a>; <code>siteConfig.js</code> is where you make most of the <a href="https://docusaurus.io/docs/en/site-config.html">customizations</a> for your site; <code>sidebars.json</code> is where you maintain the layout and content of the <a href="https://docusaurus.io/docs/en/navigation.html">sidebar</a> for your documentation; the <code>pages</code> folder is where you add <a href="https://docusaurus.io/docs/en/custom-pages.html">custom</a> pages for your site; the <code>static</code> folder is where all of your static assets go (e.g., CSS stylesheets and images); and the <code>core</code> folder is where you can customize core components of the site, in this case the footer.</p>
<h2><a class="anchor" aria-hidden="true" id="how-does-docusaurus-work"></a><a href="#how-does-docusaurus-work" aria-hidden="true" class="hash-link" ><svg 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 does Docusaurus work?</h2> <h2><a class="anchor" aria-hidden="true" id="how-does-docusaurus-work"></a><a href="#how-does-docusaurus-work" aria-hidden="true" class="hash-link" ><svg 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 does Docusaurus work?</h2>
<p>Docusaurus is written primarily in JavaScript and <a href="https://facebook.github.io/react">React</a>, replacing the Jekyll we had in the old template. We use <a href="https://github.com/jonschlinkert/remarkable">Remarkable</a> for our markdown rendering and <a href="https://highlightjs.org/">highlight.js</a> for our code block syntax highlighting. The core of Docusaurus' functionality is in the <a href="https://github.com/facebookexperimental/Docusaurus/tree/master/lib">lib directory</a> of the <a href="https://github.com/facebookexperimental/Docusaurus/">Docusaurus repo</a>. The general structure looks like:</p> <p>Docusaurus is written primarily in JavaScript and <a href="https://facebook.github.io/react">React</a>, replacing Jekyll which we used in the old template. We use <a href="https://github.com/jonschlinkert/remarkable">Remarkable</a> for our markdown rendering and <a href="https://highlightjs.org/">highlight.js</a> for our code block syntax highlighting. The core of Docusaurus' functionality is in the <a href="https://github.com/facebookexperimental/Docusaurus/tree/master/lib">lib directory</a> of the <a href="https://github.com/facebook/Docusaurus/">Docusaurus repo</a>. The general structure looks like:</p>
<pre><code class="hljs">root-of-Docusaurus <pre><code class="hljs css bash">root-of-Docusaurus
├── lib ├── lib
│ ├── core │ ├── core
│ ├── server │ ├── server
│ │ ├── generate<span class="hljs-selector-class">.js</span> │ │ ├── generate.js
│ │ ├── server<span class="hljs-selector-class">.js</span> │ │ ├── server.js
│ │ └── ..<span class="hljs-selector-class">.and</span> more files │ │ └── ...and more files
│ ├── static │ ├── static
│ ├── build-files<span class="hljs-selector-class">.js</span> │ ├── build-files.js
│ ├── copy-examples<span class="hljs-selector-class">.js</span> │ ├── copy-examples.js
│ ├── generate-feed<span class="hljs-selector-class">.js</span> │ ├── generate-feed.js
│ ├── publish-gh-pages<span class="hljs-selector-class">.js</span> │ ├── publish-gh-pages.js
│ ├── rename-version<span class="hljs-selector-class">.js</span> │ ├── rename-version.js
│ ├── start-server<span class="hljs-selector-class">.js</span> │ ├── start-server.js
│ ├── versions<span class="hljs-selector-class">.js</span> │ ├── versions.js
│ └── write-translations<span class="hljs-selector-class">.js</span> │ └── write-translations.js
</code></pre> </code></pre>
<p>The key files here are build-files.js and start-server.js. There are many similarities between these two files: <code>build-files.js</code> is used to build the physical artifacts for serving by an external web server. <code>start-server.js</code> is used to run the Docusaurus server and locally test your site. Both go through the following general process to take all of the markdown and configuration to create a runnable website:</p> <p>The key files here are build-files.js and start-server.js. There are many similarities between these two files: <code>build-files.js</code> is used to build the physical artifacts for serving by an external web server. <code>start-server.js</code> is used to run the Docusaurus server and locally test your site. Both go through the following general process to take all of the markdown and configuration to create a runnable website:</p>
<ol> <ol>
@ -84,19 +84,19 @@
</ol> </ol>
<p>Note that this process does not take into full account how translations or versioning works. The underlying details of those features will be saved for future blog posts.</p> <p>Note that this process does not take into full account how translations or versioning works. The underlying details of those features will be saved for future blog posts.</p>
<p>The final structure of your compiled site will look similar to:</p> <p>The final structure of your compiled site will look similar to:</p>
<pre><code class="hljs">build <pre><code class="hljs css bash">build
├── website ├── website
│ ├── CNAME │ ├── CNAME
│ ├── blog │ ├── blog
│ ├── css │ ├── css
│ ├── docs │ ├── docs
│ ├── en │ ├── en
│ ├── help.html # custom<span class="hljs-built_in"> page │ ├── help.html <span class="hljs-comment"># custom page</span>
</span>│ ├── img │ ├── img
│ ├── index.html # landing<span class="hljs-built_in"> page │ ├── index.html <span class="hljs-comment"># landing page</span>
</span>│ ├── sitemap.xml │ ├── sitemap.xml
│ └── users.html # custom<span class="hljs-built_in"> page │ └── users.html <span class="hljs-comment"># custom page</span>
</span></code></pre> </code></pre>
<h2><a class="anchor" aria-hidden="true" id="community"></a><a href="#community" aria-hidden="true" class="hash-link" ><svg 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>Community</h2> <h2><a class="anchor" aria-hidden="true" id="community"></a><a href="#community" aria-hidden="true" class="hash-link" ><svg 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>Community</h2>
<p><img src="/img/docusaurus.svg" alt="Docusaurus"></p> <p><img src="/img/docusaurus.svg" alt="Docusaurus"></p>
<p>We welcome your <a href="https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md">contributions</a> to Docusaurus, whether you want to use it for your own site, you want to <a href="https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md">contribute</a> to the Docusaurus core or just have questions. Follow us on <a href="https://github.com/facebook/Docusaurus">GitHub</a> and <a href="https://twitter.com/docusaurus">Twitter</a>.</p> <p>We welcome your <a href="https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md">contributions</a> to Docusaurus, whether you want to use it for your own site, you want to <a href="https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md">contribute</a> to the Docusaurus core or just have questions. Follow us on <a href="https://github.com/facebook/Docusaurus">GitHub</a> and <a href="https://twitter.com/docusaurus">Twitter</a>.</p>

2
docs/en/1.0.11/custom-pages.html
View file

@ -32,7 +32,7 @@
</blockquote> </blockquote>
<h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2> <h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2>
<p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/1.0.11/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p> <p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/1.0.11/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p>
<p>If you wish to use Docusaurus's stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus's styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p> <p>If you wish to use Docusaurus' stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p>
<blockquote> <blockquote>
<p>You can set the <a href="/docs/en/1.0.11/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p> <p>You can set the <a href="/docs/en/1.0.11/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p>
</blockquote> </blockquote>

2
docs/en/1.0.12/custom-pages.html
View file

@ -32,7 +32,7 @@
</blockquote> </blockquote>
<h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2> <h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2>
<p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/1.0.12/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p> <p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/1.0.12/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p>
<p>If you wish to use Docusaurus's stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus's styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p> <p>If you wish to use Docusaurus' stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p>
<blockquote> <blockquote>
<p>You can set the <a href="/docs/en/1.0.12/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p> <p>You can set the <a href="/docs/en/1.0.12/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p>
</blockquote> </blockquote>

2
docs/en/1.0.13/custom-pages.html
View file

@ -32,7 +32,7 @@
</blockquote> </blockquote>
<h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2> <h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2>
<p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/1.0.13/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p> <p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/1.0.13/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p>
<p>If you wish to use Docusaurus's stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus's styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p> <p>If you wish to use Docusaurus' stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p>
<blockquote> <blockquote>
<p>You can set the <a href="/docs/en/1.0.13/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p> <p>You can set the <a href="/docs/en/1.0.13/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p>
</blockquote> </blockquote>

2
docs/en/custom-pages.html
View file

@ -32,7 +32,7 @@
</blockquote> </blockquote>
<h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2> <h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2>
<p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p> <p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p>
<p>If you wish to use Docusaurus's stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus's styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p> <p>If you wish to use Docusaurus' stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p>
<blockquote> <blockquote>
<p>You can set the <a href="/docs/en/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p> <p>You can set the <a href="/docs/en/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p>
</blockquote> </blockquote>

36
docs/en/next/api-pages.html
View file

@ -5,12 +5,12 @@
nav.classList.toggle('docsSliderActive'); nav.classList.toggle('docsSliderActive');
}; };
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/docusaurus/edit/master/docs/api-pages.md" target="_blank" rel="noreferrer noopener">Edit</a><h1>Pages and Styles</h1></header><article><div><span><p>Docusaurus provides support for writing pages as React components inside the <code>website/pages</code> folder which will share the same header, footer, and styles as the rest of the site.</p> </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/api-pages.md" target="_blank" rel="noreferrer noopener">Edit</a><h1>Pages and Styles</h1></header><article><div><span><p>Docusaurus provides support for writing pages as React components inside the <code>website/pages</code> folder which will share the same header, footer, and styles as the rest of the site.</p>
<h2><a class="anchor" aria-hidden="true" id="urls-for-pages"></a><a href="#urls-for-pages" aria-hidden="true" class="hash-link" ><svg 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>Urls for Pages</h2> <h2><a class="anchor" aria-hidden="true" id="urls-for-pages"></a><a href="#urls-for-pages" aria-hidden="true" class="hash-link" ><svg 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>URLs for Pages</h2>
<p>Any <code>.js</code> files in <code>website/pages</code> will be rendered to static html using the path of the file after &quot;pages&quot;. Files in <code>website/pages/en</code> will also get copied out into <code>pages</code> and will OVERRIDE any files of the same name in <code>pages</code>. For example, the page for the <code>website/pages/en/help.js</code> file will be found at the url <code>${baseUrl}en/help.js</code> as well as the url <code>${baseUrl}help.js</code>, where <code>${baseUrl}</code> is the <code>baseUrl</code> field set in your <a href="/docs/en/next/site-config.html">siteConfig.js file</a>.</p> <p>Any <code>.js</code> files in <code>website/pages</code> will be rendered to static html using the path of the file after &quot;pages&quot;. Files in <code>website/pages/en</code> will also get copied out into <code>pages</code> and will OVERRIDE any files of the same name in <code>pages</code>. For example, the page for the <code>website/pages/en/help.js</code> file will be found at the url <code>${baseUrl}en/help.js</code> as well as the url <code>${baseUrl}help.js</code>, where <code>${baseUrl}</code> is the <code>baseUrl</code> field set in your <a href="/docs/en/next/site-config.html">siteConfig.js file</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="page-require-paths"></a><a href="#page-require-paths" aria-hidden="true" class="hash-link" ><svg 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> <h2><a class="anchor" aria-hidden="true" id="page-require-paths"></a><a href="#page-require-paths" aria-hidden="true" class="hash-link" ><svg 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>
<p>Docusaurus provides a few useful React components for users to write their own pages, found in the <code>CompLibrary</code> module. This module is provided as part of Docusaurus in <code>node_modules/docusaurus</code>, so to access it, pages in the <code>pages</code> folder are temporarily copied into <code>node_modules/docusaurus</code> when rendering to static html. As seen in the example files, this means that a user page at <code>pages/en/index.js</code> uses a require path to <code>&quot;../../core/CompLibrary.js&quot;</code> to import the provided components.</p> <p>Docusaurus provides a few useful React components for users to write their own pages, found in the <code>CompLibrary</code> module. This module is provided as part of Docusaurus in <code>node_modules/docusaurus</code>, so to access it, pages in the <code>pages</code> folder are temporarily copied into <code>node_modules/docusaurus</code> when rendering to static html. As seen in the example files, this means that a user page at <code>pages/en/index.js</code> uses a require path to <code>'../../core/CompLibrary.js'</code> to import the provided components.</p>
<p>What this means to the user is that if you wish to use the <code>CompLibrary</code> module, make sure the require path is set correctly. For example, a page at <code>page/mypage.js</code> would use a path <code>&quot;../core/CompLibrary.js&quot;</code>.</p> <p>What this means to the user is that if you wish to use the <code>CompLibrary</code> module, make sure the require path is set correctly. For example, a page at <code>page/mypage.js</code> would use a path <code>'../core/CompLibrary.js'</code>.</p>
<p>If you wish to use your own components inside the website folder, use <code>process.cwd()</code> which will refer to the <code>website</code> folder to construct require paths. For example, if you add a component to <code>website/core/mycomponent.js</code>, you can use the require path, <code>&quot;process.cwd() + /core/mycomponent.js&quot;</code>.</p> <p>If you wish to use your own components inside the website folder, use <code>process.cwd()</code> which will refer to the <code>website</code> folder to construct require paths. For example, if you add a component to <code>website/core/mycomponent.js</code>, you can use the require path, <code>'process.cwd() + /core/mycomponent.js'</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="provided-components"></a><a href="#provided-components" aria-hidden="true" class="hash-link" ><svg 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>Provided Components</h2> <h2><a class="anchor" aria-hidden="true" id="provided-components"></a><a href="#provided-components" aria-hidden="true" class="hash-link" ><svg 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>Provided Components</h2>
<p>Docusaurus provides the following components in <code>CompLibrary</code>:</p> <p>Docusaurus provides the following components in <code>CompLibrary</code>:</p>
<h3><a class="anchor" aria-hidden="true" id="complibrarymarkdownblock"></a><a href="#complibrarymarkdownblock" aria-hidden="true" class="hash-link" ><svg 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> <h3><a class="anchor" aria-hidden="true" id="complibrarymarkdownblock"></a><a href="#complibrarymarkdownblock" aria-hidden="true" class="hash-link" ><svg 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>
@ -72,27 +72,27 @@
</tbody> </tbody>
</table> </table>
<p><strong>Example</strong></p> <p><strong>Example</strong></p>
<pre><code class="hljs">&lt;GridBlock <pre><code class="hljs css jsx">&lt;GridBlock
align=<span class="hljs-string">"center"</span> align=<span class="hljs-string">"center"</span>
layout=<span class="hljs-string">"threeColumn"</span> layout=<span class="hljs-string">"threeColumn"</span>
className=<span class="hljs-string">"myCustomClass"</span> className=<span class="hljs-string">"myCustomClass"</span>
contents={[ contents={[
{ {
title: `[Learn](${siteConfig.baseUrl}docs/tutorial.html)`, <span class="hljs-attr">title</span>: <span class="hljs-string">`[Learn](<span class="hljs-subst">${siteConfig.baseUrl}</span>docs/tutorial.html)`</span>,
<span class="hljs-attribute">content</span>: <span class="hljs-string">'Learn how to use this project'</span>, <span class="hljs-attr">content</span>: <span class="hljs-string">'Learn how to use this project'</span>,
image: siteConfig<span class="hljs-selector-class">.baseUrl</span> + <span class="hljs-string">'img/learn.png'</span>, <span class="hljs-attr">image</span>: siteConfig.baseUrl + <span class="hljs-string">'img/learn.png'</span>,
imageAlt: <span class="hljs-string">'Learn how to use this project'</span>, <span class="hljs-attr">imageAlt</span>: <span class="hljs-string">'Learn how to use this project'</span>,
imageLink: siteConfig<span class="hljs-selector-class">.baseUrl</span> + <span class="hljs-string">'docs/tutorial.html'</span>, <span class="hljs-attr">imageLink</span>: siteConfig.baseUrl + <span class="hljs-string">'docs/tutorial.html'</span>,
}, },
{ {
title: <span class="hljs-string">'Frequently Asked Questions'</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">'Frequently Asked Questions'</span>,
<span class="hljs-attribute">content</span>: <span class="hljs-string">'Questions gathered from the community'</span>, <span class="hljs-attr">content</span>: <span class="hljs-string">'Questions gathered from the community'</span>,
image: siteConfig<span class="hljs-selector-class">.baseUrl</span> + <span class="hljs-string">'img/faq.png'</span>, <span class="hljs-attr">image</span>: siteConfig.baseUrl + <span class="hljs-string">'img/faq.png'</span>,
imageAlign: <span class="hljs-string">'top'</span>, <span class="hljs-attr">imageAlign</span>: <span class="hljs-string">'top'</span>,
}, },
{ {
title: <span class="hljs-string">'More'</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">'More'</span>,
<span class="hljs-attribute">content</span>: <span class="hljs-string">'Lots of documentation is on this site'</span>, <span class="hljs-attr">content</span>: <span class="hljs-string">'Lots of documentation is on this site'</span>,
}, },
]} ]}
/&gt; /&gt;
@ -117,12 +117,12 @@
</code></pre> </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> <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 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> <h2><a class="anchor" aria-hidden="true" id="using-static-assets"></a><a href="#using-static-assets" aria-hidden="true" class="hash-link" ><svg 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>
<p>Static assets should be placed into the <code>website/static</code> folder. They can be accessed by their paths, excluding &quot;static&quot;. For example, if the site's <code>baseUrl</code> is &quot;/docusaurus/&quot;, an image in <code>website/static/img/logo.png</code> is available at <code>/docusaurus/img/logo.png</code>.</p> <p>Static assets should be placed into the <code>website/static</code> folder. They can be accessed by their paths, excluding <code>static</code>. For example, if the site's <code>baseUrl</code> is <code>/docusaurus/</code>, an image in <code>website/static/img/logo.png</code> is available at <code>/docusaurus/img/logo.png</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="styles"></a><a href="#styles" aria-hidden="true" class="hash-link" ><svg 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>Styles</h2> <h2><a class="anchor" aria-hidden="true" id="styles"></a><a href="#styles" aria-hidden="true" class="hash-link" ><svg 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>Styles</h2>
<p>You should configure your site's primary, secondary, and code block colors using the <code>colors</code> field in <code>siteConfig</code> as specified <a href="/docs/en/next/site-config.html">here</a>. You can also configure other colors in the same way as described in the <code>siteConfig</code> doc.</p> <p>You should configure your site's primary, secondary, and code block colors using the <code>colors</code> field in <code>siteConfig</code> as specified <a href="/docs/en/next/site-config.html">here</a>. You can also configure other colors in the same way as described in the <code>siteConfig</code> doc.</p>
<p>You can provide your own custom styles by adding them anywhere in the <code>website/static</code> folder. Any <code>.css</code> files you provide in the <code>static</code> folder will get concatenated to the end of Docusaurus' provided styles, allowing you to add to or override Docusaurus default styles as you wish.</p> <p>You can provide your own custom styles by adding them anywhere in the <code>website/static</code> folder. Any <code>.css</code> files you provide in the <code>static</code> folder will get concatenated to the end of Docusaurus' provided styles, allowing you to add to or override Docusaurus default styles as you wish.</p>
<p>An easy way to figure out what classes you wish to override or add to is to <a href="/docs/en/next/commands.html">start your server locally</a> and use your browser's inspect element tool.</p> <p>An easy way to figure out what classes you wish to override or add to is to <a href="/docs/en/next/commands.html">start your server locally</a> and use your browser's inspect element tool.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="doc-markdown.html">← Markdown Features</a><a class="docs-next button" href="site-config.html">siteConfig.js →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#urls-for-pages">Urls for Pages</a></li><li><a href="#page-require-paths">Page Require Paths</a></li><li><a href="#provided-components">Provided Components</a><ul class="toc-headings"><li><a href="#complibrarymarkdownblock"><code>CompLibrary.MarkdownBlock</code></a></li><li><a href="#complibrarycontainer"><code>CompLibrary.Container</code></a></li><li><a href="#complibrarygridblock"><code>CompLibrary.GridBlock</code></a></li></ul></li><li><a href="#translating-strings">Translating Strings</a></li><li><a href="#using-static-assets">Using Static Assets</a></li><li><a href="#styles">Styles</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href=" </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="doc-markdown.html">← Markdown Features</a><a class="docs-next button" href="site-config.html">siteConfig.js →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#urls-for-pages">URLs for Pages</a></li><li><a href="#page-require-paths">Page Require Paths</a></li><li><a href="#provided-components">Provided Components</a><ul class="toc-headings"><li><a href="#complibrarymarkdownblock"><code>CompLibrary.MarkdownBlock</code></a></li><li><a href="#complibrarycontainer"><code>CompLibrary.Container</code></a></li><li><a href="#complibrarygridblock"><code>CompLibrary.GridBlock</code></a></li></ul></li><li><a href="#translating-strings">Translating Strings</a></li><li><a href="#using-static-assets">Using Static Assets</a></li><li><a href="#styles">Styles</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href="
/docs/en/installation.html">Getting Started</a><a href=" /docs/en/installation.html">Getting Started</a><a href="
/docs/en/versioning.html">Versioning</a><a href=" /docs/en/versioning.html">Versioning</a><a href="
/docs/en/translation.html">Localization</a><a href=" /docs/en/translation.html">Localization</a><a href="

43
docs/en/next/blog.html
View file

@ -7,16 +7,16 @@
</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>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 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> </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>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 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> folder within your repo's <code>website</code> directory.</p> <p>To setup your site's blog, start by creating a <code>blog</code> folder within your repo's <code>website</code> directory.</p>
<p>Then, add a header link to your blog within <code>siteConfig.js</code>:</p> <p>Then, add a header link to your blog within <code>siteConfig.js</code>:</p>
<pre><code class="hljs"><span class="hljs-string">headerLinks:</span> [ <pre><code class="hljs css js">headerLinks: [
... ...
{<span class="hljs-string">blog:</span> <span class="hljs-literal">true</span>, <span class="hljs-string">label:</span> <span class="hljs-string">'Blog'</span>}, { <span class="hljs-attr">blog</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Blog'</span> },
... ...
] ]
</code></pre> </code></pre>
<h2><a class="anchor" aria-hidden="true" id="adding-posts"></a><a href="#adding-posts" aria-hidden="true" class="hash-link" ><svg 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> <h2><a class="anchor" aria-hidden="true" id="adding-posts"></a><a href="#adding-posts" aria-hidden="true" class="hash-link" ><svg 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 folder 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>To publish in the blog, create a file within the blog folder 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> <p>For example, at <code>website/blog/2017-08-18-Introducing-Docusaurus.md</code>:</p>
<pre><code class="hljs"><span class="hljs-meta">---</span> <pre><code class="hljs css 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">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">authorURL:</span> <span class="hljs-attr">https://twitter.com/foobarbaz</span>
<span class="hljs-attr">authorFBID:</span> <span class="hljs-number">503283835</span> <span class="hljs-attr">authorFBID:</span> <span class="hljs-number">503283835</span>
@ -36,7 +36,7 @@
</ul> </ul>
<h2><a class="anchor" aria-hidden="true" id="summary-truncation"></a><a href="#summary-truncation" aria-hidden="true" class="hash-link" ><svg 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> <h2><a class="anchor" aria-hidden="true" id="summary-truncation"></a><a href="#summary-truncation" aria-hidden="true" class="hash-link" ><svg 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 blog published blog posts. Anything above <code>&lt;!--truncate--&gt;</code> will be part of the summary. For example:</p> <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 blog published blog posts. Anything above <code>&lt;!--truncate--&gt;</code> will be part of the summary. For example:</p>
<pre><code class="hljs"><span class="hljs-meta">---</span> <pre><code class="hljs css 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-attr">title:</span> <span class="hljs-string">Truncation</span> <span class="hljs-string">Example</span>
<span class="hljs-meta">---</span> <span class="hljs-meta">---</span>
@ -57,7 +57,7 @@
<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>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 'ALL'.</p> <p>The available options are an integer representing the number of posts you wish to show or a string with the value 'ALL'.</p>
<p>Example:</p> <p>Example:</p>
<pre><code class="hljs"><span class="hljs-string">blogSidebarCount:</span> <span class="hljs-string">'ALL'</span> <pre><code class="hljs css js">blogSidebarCount: <span class="hljs-string">'ALL'</span>
</code></pre> </code></pre>
<h2><a class="anchor" aria-hidden="true" id="rss-feed"></a><a href="#rss-feed" aria-hidden="true" class="hash-link" ><svg 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> <h2><a class="anchor" aria-hidden="true" id="rss-feed"></a><a href="#rss-feed" aria-hidden="true" class="hash-link" ><svg 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> <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>
@ -69,27 +69,28 @@
<p>You can run your Docusaurus site without a landing page and instead have your blog load first.</p> <p>You can run your Docusaurus site without a landing page and instead have your blog load first.</p>
<p>To do this:</p> <p>To do this:</p>
<ol> <ol>
<li><p>Create a file <code>index.html</code> in <code>website/static/</code>.</p></li> <li>Create a file <code>index.html</code> in <code>website/static/</code>.</li>
<li><p>Place the contents of the template below into <code>website/static/index.html</code></p></li> <li>Place the contents of the template below into <code>website/static/index.html</code></li>
<li><p>Customize the <code>&lt;title&gt;</code> of <code>website/static/index.html</code></p></li> <li>Customize the <code>&lt;title&gt;</code> of <code>website/static/index.html</code></li>
<li><p>Delete the dynamic landing page <code>website/pages/en/index.js</code></p></li> <li>Delete the dynamic landing page <code>website/pages/en/index.js</code></li>
</ol> </ol>
<blockquote> <blockquote>
<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 folder. 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> <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 folder. 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> </blockquote>
<p>You can use this template:</p> <p>You can use this template:</p>
<pre><code class="hljs css &lt;!DOCTYPE HTML&gt;"><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> <pre><code class="hljs css html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&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">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</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">http-equiv</span>=<span class="hljs-string">"refresh"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"0; url=blog/"</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>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"refresh"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"0; url=blog/"</span>&gt;</span>
<span class="hljs-built_in">window</span>.location.href = <span class="hljs-string">"blog/"</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript">
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-built_in">window</span>.location.href = <span class="hljs-string">'blog/'</span>;
<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title of Your Blog<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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">title</span>&gt;</span>Title of Your Blog<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
If you are not redirected automatically, follow this <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'blog/'</span>&gt;</span>link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>. <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> If you are not redirected automatically, follow this <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"blog/"</span>&gt;</span>link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>.
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre> </code></pre>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="publishing.html">← Publishing your site</a><a class="docs-next button" href="custom-pages.html">Custom Pages →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#initial-setup">Initial Setup</a></li><li><a href="#adding-posts">Adding Posts</a></li><li><a href="#header-options">Header Options</a></li><li><a href="#summary-truncation">Summary Truncation</a></li><li><a href="#changing-how-many-blog-posts-show-on-sidebar">Changing How Many Blog Posts Show on Sidebar</a></li><li><a href="#rss-feed">RSS Feed</a></li><li><a href="#social-buttons">Social Buttons</a></li><li><a href="#advanced-topics">Advanced Topics</a><ul class="toc-headings"><li><a href="#i-want-to-run-in-blog-only-mode">I want to run in &quot;Blog Only&quot; mode.</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href=" </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="publishing.html">← Publishing your site</a><a class="docs-next button" href="custom-pages.html">Custom Pages →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#initial-setup">Initial Setup</a></li><li><a href="#adding-posts">Adding Posts</a></li><li><a href="#header-options">Header Options</a></li><li><a href="#summary-truncation">Summary Truncation</a></li><li><a href="#changing-how-many-blog-posts-show-on-sidebar">Changing How Many Blog Posts Show on Sidebar</a></li><li><a href="#rss-feed">RSS Feed</a></li><li><a href="#social-buttons">Social Buttons</a></li><li><a href="#advanced-topics">Advanced Topics</a><ul class="toc-headings"><li><a href="#i-want-to-run-in-blog-only-mode">I want to run in &quot;Blog Only&quot; mode.</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href="

16
docs/en/next/commands.html
View file

@ -11,19 +11,19 @@
</ul> </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 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> <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 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> <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">yarn <span class="hljs-keyword">run</span><span class="bash"> start <pre><code class="hljs css bash">yarn run start
</span></code></pre> </code></pre>
<p>The same script can be invoked using npm:</p> <p>The same script can be invoked using npm:</p>
<pre><code class="hljs">npm <span class="hljs-keyword">run</span><span class="bash"> start <pre><code class="hljs css bash">npm run start
</span></code></pre> </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> <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 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> <h2><a class="anchor" aria-hidden="true" id="using-arguments"></a><a href="#using-arguments" aria-hidden="true" class="hash-link" ><svg 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> <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">yarn <span class="hljs-keyword">run</span><span class="bash"> start --port 8080 <pre><code class="hljs css bash">yarn run start --port 8080
</span></code></pre> </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> <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">npm <span class="hljs-keyword">run</span><span class="bash"> start -- --port 8080 <pre><code class="hljs css bash">npm run start -- --port 8080
</span></code></pre> </code></pre>
<h2><a class="anchor" aria-hidden="true" id="configuration"></a><a href="#configuration" aria-hidden="true" class="hash-link" ><svg 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> <h2><a class="anchor" aria-hidden="true" id="configuration"></a><a href="#configuration" aria-hidden="true" class="hash-link" ><svg 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/next/installation.html">Installation guide</a>.</p> <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/next/installation.html">Installation guide</a>.</p>
<p>Docusaurus provides some default mappings to allow you to run commands following Node conventions. Instead of typing <code>docusaurus-start</code> every time, you can type <code>yarn run start</code> or <code>npm start</code> to achieve the same.</p> <p>Docusaurus provides some default mappings to allow you to run commands following Node conventions. Instead of typing <code>docusaurus-start</code> every time, you can type <code>yarn run start</code> or <code>npm start</code> to achieve the same.</p>

6
docs/en/next/custom-pages.html
View file

@ -28,11 +28,11 @@
</code></pre> </code></pre>
<p>Of course, you are also free to write your own pages. It is strongly suggested that you at least have an index page, but none of the pages provided are mandatory to include in your site. More information on how to use the provided components or include your own can be found <a href="/docs/en/next/api-pages.html">here</a>. Information on how to link to your different pages in the header navigation bar can be found <a href="/docs/en/next/navigation.html">here</a>.</p> <p>Of course, you are also free to write your own pages. It is strongly suggested that you at least have an index page, but none of the pages provided are mandatory to include in your site. More information on how to use the provided components or include your own can be found <a href="/docs/en/next/api-pages.html">here</a>. Information on how to link to your different pages in the header navigation bar can be found <a href="/docs/en/next/navigation.html">here</a>.</p>
<blockquote> <blockquote>
<p>If you want your page to show up in your navigation header, you will need to update <code>siteConfig.js</code> to add to the <code>headerLinks</code> element. e.g., <code>{ page: &quot;about-slash&quot;, label: &quot;About/&quot;}</code>,</p> <p>If you want your page to show up in your navigation header, you will need to update <code>siteConfig.js</code> to add to the <code>headerLinks</code> element. e.g., <code>{ page: 'about-slash', label: 'About/' }</code>,</p>
</blockquote> </blockquote>
<h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2> <h2><a class="anchor" aria-hidden="true" id="adding-static-pages"></a><a href="#adding-static-pages" aria-hidden="true" class="hash-link" ><svg 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 Static Pages</h2>
<p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/next/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p> <p>Static <code>.html</code> files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the <code>static</code> folder in the same way as other <a href="/docs/en/next/api-pages.html#using-static-assets">static assets</a>. Alternatively, they can be placed in the <code>pages</code> folder and would be served as-is instead of being rendered from React.</p>
<p>If you wish to use Docusaurus's stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus's styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p> <p>If you wish to use Docusaurus' stylesheet, you can access it at <code>${baseUrl}css/main.css</code>. If you wish to use separate css for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p>
<blockquote> <blockquote>
<p>You can set the <a href="/docs/en/next/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p> <p>You can set the <a href="/docs/en/next/site-config.html#optional-fields"><code>$wrapPagesHTML</code> site config option</a> in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.</p>
</blockquote> </blockquote>
@ -42,7 +42,7 @@
<p>Some suggestions for links you may want to provide: documentation, API, Twitter, Discord, Facebook groups, Stack Overflow, GitHub, etc.</p> <p>Some suggestions for links you may want to provide: documentation, API, Twitter, Discord, Facebook groups, Stack Overflow, GitHub, etc.</p>
<p>Your footer will automatically get applied to all pages on your site, including docs and blog posts. The sole exception to this is any static html pages you include.</p> <p>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> <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 jsx"><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 jsx"><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">Footer</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Footer</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() { render() {

80
docs/en/next/doc-markdown.html
View file

@ -12,28 +12,28 @@
<p><code>hide_title</code>: Whether to hide the title at the top of the doc.</p> <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><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> <p>For example:</p>
<pre><code class="hljs css markdown">--- <pre><code class="hljs css yaml"><span class="hljs-meta">---</span>
id: doc1 <span class="hljs-attr">id:</span> <span class="hljs-string">doc1</span>
title: My Document <span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">Document</span>
<span class="hljs-section">sidebar_label: Document <span class="hljs-attr">sidebar_label:</span> <span class="hljs-string">Document</span>
---</span> <span class="hljs-meta">---</span>
</code></pre> </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>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> <p>For example:</p>
<pre><code class="hljs css markdown">--- <pre><code class="hljs css yaml"><span class="hljs-meta">---</span>
id: version-1.0.0-doc1 <span class="hljs-attr">id:</span> <span class="hljs-string">version-1.0.0-doc1</span>
title: My Document <span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">Document</span>
sidebar_label: Document <span class="hljs-attr">sidebar_label:</span> <span class="hljs-string">Document</span>
<span class="hljs-section">original_id: doc1 <span class="hljs-attr">original_id:</span> <span class="hljs-string">doc1</span>
---</span> <span class="hljs-meta">---</span>
</code></pre> </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 fallback 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><code>custom_edit_url</code>: The url for editing this document. If this field is not present, the document's edit url will fallback 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> <p>For example:</p>
<pre><code class="hljs css markdown">--- <pre><code class="hljs css yaml"><span class="hljs-meta">---</span>
id: doc-markdown <span class="hljs-attr">id:</span> <span class="hljs-string">doc-markdown</span>
title: Markdown Features <span class="hljs-attr">title:</span> <span class="hljs-string">Markdown</span> <span class="hljs-string">Features</span>
<span class="hljs-section">custom_edit_url: https://github.com/facebook/Docusaurus/edit/master/docs/api-doc-markdown.md <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>
---</span> <span class="hljs-meta">---</span>
</code></pre> </code></pre>
<h3><a class="anchor" aria-hidden="true" id="blog-posts"></a><a href="#blog-posts" aria-hidden="true" class="hash-link" ><svg 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>Blog Posts</h3> <h3><a class="anchor" aria-hidden="true" id="blog-posts"></a><a href="#blog-posts" aria-hidden="true" class="hash-link" ><svg 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>Blog Posts</h3>
<p>Blog Posts use the following markdown header fields that are enclosed by a line <code>---</code> on either side:</p> <p>Blog Posts use the following markdown header fields that are enclosed by a line <code>---</code> on either side:</p>
@ -42,48 +42,47 @@ title: Markdown Features
<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>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><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> <p>For example:</p>
<pre><code class="hljs css markdown">--- <pre><code class="hljs css yaml"><span class="hljs-meta">---</span>
title: My First Blog Post <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>
author: Frank Li <span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
authorURL: http://twitter.com/franchementli <span class="hljs-attr">authorURL:</span> <span class="hljs-attr">http://twitter.com/franchementli</span>
<span class="hljs-section">authorFBID: 100002976521003 <span class="hljs-attr">authorFBID:</span> <span class="hljs-number">100002976521003</span>
---</span> <span class="hljs-meta">---</span>
</code></pre> </code></pre>
<h2><a class="anchor" aria-hidden="true" id="extra-features"></a><a href="#extra-features" aria-hidden="true" class="hash-link" ><svg 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 Features</h2> <h2><a class="anchor" aria-hidden="true" id="extra-features"></a><a href="#extra-features" aria-hidden="true" class="hash-link" ><svg 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 Features</h2>
<p>Docusaurus supports some extra features when writing documentation in markdown.</p> <p>Docusaurus supports some extra features when writing documentation in markdown.</p>
<h3><a class="anchor" aria-hidden="true" id="linking-other-documents"></a><a href="#linking-other-documents" aria-hidden="true" class="hash-link" ><svg 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> <h3><a class="anchor" aria-hidden="true" id="linking-other-documents"></a><a href="#linking-other-documents" aria-hidden="true" class="hash-link" ><svg 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>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> <p>Example:</p>
<pre><code class="hljs css markdown">[<span class="hljs-string">This links to another document</span>](<span class="hljs-link">other-document.md</span>) <pre><code class="hljs css md">[<span class="hljs-string">This links to another document</span>](<span class="hljs-link">other-document.md</span>)
</code></pre> </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 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> <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 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> <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 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>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> <p>Example:</p>
<pre><code class="hljs css markdown">![<span class="hljs-string">alt-text</span>](<span class="hljs-link">/docs/assets/doc-image.png</span>) <pre><code class="hljs css md">![<span class="hljs-string">alt-text</span>](<span class="hljs-link">/docs/assets/doc-image.png</span>)
</code></pre> </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 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> <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 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 autogenerated list of links, which can be useful as a table of contents for API docs.</p> <p>You can make an autogenerated 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>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> <p>Example:</p>
<pre><code class="hljs css markdown"><span class="hljs-section">### `docusaurus.function(a, b)`</span> <pre><code class="hljs css md"><span class="hljs-section">### `docusaurus.function(a, b)`</span>
Text describing my function Text describing my function
<span class="hljs-section">### `docdoc(file)`</span> <span class="hljs-section">### `docdoc(file)`</span>
Text describing my function Text describing my function
</code></pre> </code></pre>
<p>will lead to a table of contents of the functions:</p> <p>will lead to a table of contents of the functions:</p>
<pre><code class="hljs css markdown"><span class="hljs-bullet">- </span><span class="hljs-code">`docusaurus.function(a, b)`</span> <pre><code class="hljs css 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> <span class="hljs-bullet">- </span><span class="hljs-code">`docdoc(file)`</span>
</code></pre> </code></pre>
<p>and each function will link to their corresponding sections in the page.</p> <p>and each function will link to their corresponding sections in the page.</p>
<h2><a class="anchor" aria-hidden="true" id="syntax-highlighting"></a><a href="#syntax-highlighting" aria-hidden="true" class="hash-link" ><svg 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>Syntax Highlighting</h2> <h2><a class="anchor" aria-hidden="true" id="syntax-highlighting"></a><a href="#syntax-highlighting" aria-hidden="true" class="hash-link" ><svg 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>Syntax Highlighting</h2>
<p>Syntax highlighting is enabled by default on fenced code blocks. The language should be detected automatically, but you can sometimes get better results by specifying the language. You can do so using an <a href="https://github.github.com/gfm/#example-111">info string</a>, following the three opening backticks. The following JavaScript example...</p> <p>Syntax highlighting is enabled by default on fenced code blocks. The language should be detected automatically, but you can sometimes get better results by specifying the language. You can do so using an <a href="https://github.github.com/gfm/#example-111">info string</a>, following the three opening backticks. The following JavaScript example...</p>
<pre><code class="hljs">```javascript <pre><code class="hljs">```js
ReactDOM.render( ReactDOM.render(
&lt;h1&gt;Hello, world!&lt;/h1&gt;, &lt;h1&gt;Hello, world!&lt;/h1&gt;,
document.getElementById('root') document.getElementById('root')
@ -91,25 +90,32 @@ ReactDOM.render(
``` ```
</code></pre> </code></pre>
<p>...would be rendered with syntax highlighting like so:</p> <p>...would be rendered with syntax highlighting like so:</p>
<pre><code class="hljs css javascript">ReactDOM.render( <pre><code class="hljs css 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="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>) <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>)
); );
</code></pre> </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> <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 javascript">highlight: { <pre><code class="hljs css js">{
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span> ...
highlight: {
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>
}
...
} }
</code></pre> </code></pre>
<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> <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 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> <h3><a class="anchor" aria-hidden="true" id="registering-additional-languages"></a><a href="#registering-additional-languages" aria-hidden="true" class="hash-link" ><svg 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> <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 javascript">highlight: { <pre><code class="hljs css js">{
<span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>, ...
<span class="hljs-attr">hljs</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hljs</span>) </span>{ highlight: {
hljs.registerLanguage(<span class="hljs-string">'galacticbasic'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hljs</span>) </span>{ <span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>,
<span class="hljs-comment">// ...</span> <span class="hljs-attr">hljs</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hljs</span>) </span>{
}); hljs.registerLanguage(<span class="hljs-string">'galacticbasic'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hljs</span>) </span>{
<span class="hljs-comment">// ...</span>
});
}
} }
} }
</code></pre> </code></pre>

6
docs/en/next/installation.html
View file

@ -1,10 +1,10 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Installation · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Installation · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/index.html"/><meta property="og:description" content="Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly. To install Docusaurus, we have created an easy script that will get all of the infrastructure setup for you:"/><meta property="og:image" content="https://docusaurus.io/img/docusaurus.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://docusaurus.io/img/docusaurus.png"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://docusaurus.io/blog/atom.xml" title="Docusaurus Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://docusaurus.io/blog/feed.xml" title="Docusaurus Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible doc separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/en"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitle">Docusaurus</h2></a><a href="/en/versions.html"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive siteNavItemActive"><a href="/docs/en/next/installation.html" target="_self">Docs</a></li><li class=""><a href="/en/help.html" target="_self">Help</a></li><li class=""><a href="/en/users.html" target="_self">Users</a></li><li class=""><a href="/en/about-slash.html" target="_self">About /</a></li><li class=""><a href="/blog" target="_self">Blog</a></li><li class=""><a href="https://github.com/facebook/docusaurus" target="_self">GitHub</a></li><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 docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Getting Started</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Getting Started</h3><ul><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/docs/en/next/installation.html">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/site-preparation.html">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/site-creation.html">Creating your site</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/publishing.html">Publishing your site</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem"><a class="navItem" href="/docs/en/next/blog.html">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/custom-pages.html">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/search.html">Enabling Search</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/navigation.html">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/translation.html">Translations &amp; Localization</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/versioning.html">Versioning</a></li></ul></div><div class="navGroup navGroupActive"><h3>API</h3><ul><li class="navListItem"><a class="navItem" href="/docs/en/next/commands.html">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/doc-markdown.html">Markdown Features</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/api-pages.html">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/site-config.html">siteConfig.js</a></li></ul></div></div></section></div><script> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Installation · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Installation · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/index.html"/><meta property="og:description" content="Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly. To install Docusaurus, we have created an easy script that will get all of the infrastructure set up for you:"/><meta property="og:image" content="https://docusaurus.io/img/docusaurus.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://docusaurus.io/img/docusaurus.png"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://docusaurus.io/blog/atom.xml" title="Docusaurus Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://docusaurus.io/blog/feed.xml" title="Docusaurus Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible doc separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/en"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitle">Docusaurus</h2></a><a href="/en/versions.html"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive siteNavItemActive"><a href="/docs/en/next/installation.html" target="_self">Docs</a></li><li class=""><a href="/en/help.html" target="_self">Help</a></li><li class=""><a href="/en/users.html" target="_self">Users</a></li><li class=""><a href="/en/about-slash.html" target="_self">About /</a></li><li class=""><a href="/blog" target="_self">Blog</a></li><li class=""><a href="https://github.com/facebook/docusaurus" target="_self">GitHub</a></li><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 docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Getting Started</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Getting Started</h3><ul><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/docs/en/next/installation.html">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/site-preparation.html">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/site-creation.html">Creating your site</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/publishing.html">Publishing your site</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem"><a class="navItem" href="/docs/en/next/blog.html">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/custom-pages.html">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/search.html">Enabling Search</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/navigation.html">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/translation.html">Translations &amp; Localization</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/versioning.html">Versioning</a></li></ul></div><div class="navGroup navGroupActive"><h3>API</h3><ul><li class="navListItem"><a class="navItem" href="/docs/en/next/commands.html">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/doc-markdown.html">Markdown Features</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/api-pages.html">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/en/next/site-config.html">siteConfig.js</a></li></ul></div></div></section></div><script>
var toggler = document.getElementById('navToggler'); var toggler = document.getElementById('navToggler');
var nav = document.getElementById('docsNav'); var nav = document.getElementById('docsNav');
toggler.onclick = function() { toggler.onclick = function() {
nav.classList.toggle('docsSliderActive'); nav.classList.toggle('docsSliderActive');
}; };
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/docusaurus/edit/master/docs/getting-started-installation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1>Installation</h1></header><article><div><span><p>Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly. To install Docusaurus, we have created an easy script that will get all of the infrastructure setup for you:</p> </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-installation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1>Installation</h1></header><article><div><span><p>Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly. To install Docusaurus, we have created an easy script that will get all of the infrastructure set up for you:</p>
<ol> <ol>
<li><p>Ensure you have the latest version of <a href="https://nodejs.org/en/download/">Node</a> installed. We also recommend you install <a href="https://yarnpkg.com/en/docs/install">Yarn</a> as well.</p> <li><p>Ensure you have the latest version of <a href="https://nodejs.org/en/download/">Node</a> installed. We also recommend you install <a href="https://yarnpkg.com/en/docs/install">Yarn</a> as well.</p>
<blockquote> <blockquote>
@ -16,9 +16,7 @@
<p>If you don't have Node 8.2+ or if you prefer to install Docusaurus globally, run <code>yarn global add docusaurus-init</code> or <code>npm install --global docusaurus-init</code>. After that, run <code>docusaurus-init</code>.</p> <p>If you don't have Node 8.2+ or if you prefer to install Docusaurus globally, run <code>yarn global add docusaurus-init</code> or <code>npm install --global docusaurus-init</code>. After that, run <code>docusaurus-init</code>.</p>
</blockquote></li> </blockquote></li>
</ol> </ol>
<blockquote>
<p>After Docusaurus is installed, moving forward, you can check your current version of Docusaurus by going into the <code>website</code> directory and typing <code>yarn outdated docusaurus</code> or <code>npm outdated docusaurus</code>. You can update to the <a href="https://www.npmjs.com/package/docusaurus">latest version</a> of Docusaurus by typing <code>yarn upgrade docusaurus --latest</code> or <code>npm update docusaurus</code>.</p> <p>After Docusaurus is installed, moving forward, you can check your current version of Docusaurus by going into the <code>website</code> directory and typing <code>yarn outdated docusaurus</code> or <code>npm outdated docusaurus</code>. You can update to the <a href="https://www.npmjs.com/package/docusaurus">latest version</a> of Docusaurus by typing <code>yarn upgrade docusaurus --latest</code> or <code>npm update docusaurus</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="verifying-installation"></a><a href="#verifying-installation" aria-hidden="true" class="hash-link" ><svg 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> <h2><a class="anchor" aria-hidden="true" id="verifying-installation"></a><a href="#verifying-installation" aria-hidden="true" class="hash-link" ><svg 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> <p>Along with previously existing files and directories, your root directory will now contain a structure similar to:</p>
<pre><code class="hljs css bash">root-of-repo <pre><code class="hljs css bash">root-of-repo

91
docs/en/next/navigation.html
View file

@ -7,21 +7,21 @@
</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>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 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> </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>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 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> folder (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>If you want to reference another document in your <code>docs</code> folder (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> <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">I am referencing a [<span class="hljs-string">document</span>](<span class="hljs-link">doc1.md</span>). <pre><code class="hljs css md">I am referencing a [<span class="hljs-string">document</span>](<span class="hljs-link">doc1.md</span>).
</code></pre> </code></pre>
<blockquote> <blockquote>
<p>Docusaurus currently does not support documents in nested folders; only in a flatfile structure. We are looking into adding support for nested folders.</p> <p>Docusaurus currently does not support documents in nested folders; only in a flat folder structure. We are looking into adding support for nested folders.</p>
</blockquote> </blockquote>
<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 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> <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 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>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>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> <p>Suppose you add this to your document:</p>
<pre><code class="hljs"><span class="hljs-meta">---</span> <pre><code class="hljs css yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">intro</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-attr">title:</span> <span class="hljs-string">Getting</span> <span class="hljs-string">Started</span>
<span class="hljs-meta">---</span> <span class="hljs-meta">---</span>
<span class="hljs-string">My</span> <span class="hljs-meta">*new</span> <span class="hljs-string">content*</span> <span class="hljs-string">here..</span> <span class="hljs-string">My</span> <span class="hljs-string">new</span> <span class="hljs-string">content</span> <span class="hljs-string">here..</span>
</code></pre> </code></pre>
<p>If you set the <code>id</code> field in the markdown header of the file, the doc will then be accessed from a URL of the form <code>/docs/intro.html</code>.</p> <p>If you set the <code>id</code> field in the markdown header of the file, the doc will then be accessed from a URL of the form <code>/docs/intro.html</code>.</p>
<blockquote> <blockquote>
@ -37,58 +37,76 @@
<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> <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> </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> <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">{ <pre><code class="hljs css js">{
<span class="hljs-string">"docs"</span>: { <span class="hljs-string">"docs"</span>: {
<span class="hljs-string">"Getting Started"</span>: [ <span class="hljs-string">"Getting Started"</span>: [
<span class="hljs-string">"getting-started"</span> <span class="hljs-string">"getting-started"</span>
],
...
},
...
}
</code></pre> </code></pre>
<p>Or you can create a new category within the sidebar:</p> <p>Or you can create a new category within the sidebar:</p>
<pre><code class="hljs">{ <pre><code class="hljs css js">{
<span class="hljs-string">"docs"</span>: { <span class="hljs-string">"docs"</span>: {
...
<span class="hljs-string">"My New Sidebar Category"</span>: [ <span class="hljs-string">"My New Sidebar Category"</span>: [
<span class="hljs-string">"getting-started"</span> <span class="hljs-string">"getting-started"</span>
], ],
... ...
},
...
}
</code></pre> </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 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> <h3><a class="anchor" aria-hidden="true" id="adding-new-sidebars"></a><a href="#adding-new-sidebars" aria-hidden="true" class="hash-link" ><svg 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> <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">{ <pre><code class="hljs css js">{
<span class="hljs-string">"examples-sidebar"</span>: { <span class="hljs-string">"examples-sidebar"</span>: {
<span class="hljs-string">"My Example Category"</span>: [ <span class="hljs-string">"My Example Category"</span>: [
<span class="hljs-string">"my-examples"</span> <span class="hljs-string">"my-examples"</span>
], ],
...
}, },
... ...
}
</code></pre> </code></pre>
<p>It is important to note that until you <a href="#additions-to-the-site-navigation-bar">add a document from the <code>&quot;examples-sidebar&quot;</code> sidebar to the nav bar</a>, it will be hidden.</p> <p>It is important to note that until you <a href="#additions-to-the-site-navigation-bar">add a document from the <code>&quot;examples-sidebar&quot;</code> sidebar to the nav bar</a>, it will be hidden.</p>
<h2><a class="anchor" aria-hidden="true" id="additions-to-the-site-navigation-bar"></a><a href="#additions-to-the-site-navigation-bar" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Additions to the Site Navigation Bar</h2> <h2><a class="anchor" aria-hidden="true" id="additions-to-the-site-navigation-bar"></a><a href="#additions-to-the-site-navigation-bar" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Additions to the Site Navigation Bar</h2>
<p>To expose sidebars, you will add clickable labels to the site navigation bar at the top of the website. You can add documents, pages and external links.</p> <p>To expose sidebars, you will add clickable 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 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> <h3><a class="anchor" aria-hidden="true" id="adding-documents"></a><a href="#adding-documents" aria-hidden="true" class="hash-link" ><svg 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> <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">headerLinks: [ <pre><code class="hljs css 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> },
...
],
... ...
{ doc: <span class="hljs-string">'my-examples'</span>, <span class="hljs-keyword">label</span><span class="bash">: <span class="hljs-string">'Examples'</span> }, }
</span> ...
],
</code></pre> </code></pre>
<p>A label called <code>Examples</code> will be added to the site navigation bar and when you click on it at the top of your site, the <code>examples-sidebar</code> will be shown and the default document will be <code>my-examples</code>.</p> <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 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> <h3><a class="anchor" aria-hidden="true" id="adding-custom-pages"></a><a href="#adding-custom-pages" aria-hidden="true" class="hash-link" ><svg 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> <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">headerLinks: [ <pre><code class="hljs css 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> },
...
],
... ...
{ page: <span class="hljs-string">'help'</span>, <span class="hljs-keyword">label</span><span class="bash">: <span class="hljs-string">'Help'</span> }, }
</span> ...
],
</code></pre> </code></pre>
<p>A label called <code>Help</code> will be added to the site navigation bar and when you click on it at the top of your site, the content from the <code>help.js</code> page will be shown.</p> <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 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> <h3><a class="anchor" aria-hidden="true" id="adding-external-links"></a><a href="#adding-external-links" aria-hidden="true" class="hash-link" ><svg 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> <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">headerLinks: [ <pre><code class="hljs css 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> },
...
],
... ...
{ href: <span class="hljs-string">'https://github.com/facebook/Docusaurus'</span>, <span class="hljs-keyword">label</span><span class="bash">: <span class="hljs-string">'GitHub'</span> }, }
</span> ...
],
</code></pre> </code></pre>
<p>A label called <code>GitHub</code> will be added to the site navigation bar and when you click on it at the top of your site, the content of the external link will be shown.</p> <p>A label called <code>GitHub</code> will be added to the site navigation bar and when you click on it at the top of your site, the content of the external link will be shown.</p>
<blockquote> <blockquote>
@ -98,19 +116,25 @@
<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> <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 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> <h3><a class="anchor" aria-hidden="true" id="search"></a><a href="#search" aria-hidden="true" class="hash-link" ><svg 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> <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"><span class="hljs-string">headerLinks:</span> [ <pre><code class="hljs css js">{
{ <span class="hljs-string">doc:</span> <span class="hljs-string">'foo'</span>, <span class="hljs-string">label:</span> <span class="hljs-string">'Foo'</span> }, <span class="hljs-attr">headerLinks</span>: [
{ <span class="hljs-string">search:</span> <span class="hljs-literal">true</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-string">doc:</span> <span class="hljs-string">'bar'</span>, <span class="hljs-string">label:</span> <span class="hljs-string">'Bar'</span> }, { <span class="hljs-attr">search</span>: <span class="hljs-literal">true</span> },
], { <span class="hljs-attr">doc</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Bar'</span> },
],
...
}
</code></pre> </code></pre>
<h3><a class="anchor" aria-hidden="true" id="languages-dropdown"></a><a href="#languages-dropdown" aria-hidden="true" class="hash-link" ><svg 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> <h3><a class="anchor" aria-hidden="true" id="languages-dropdown"></a><a href="#languages-dropdown" aria-hidden="true" class="hash-link" ><svg 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> <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"><span class="hljs-string">headerLinks:</span> [ <pre><code class="hljs css js">{
{ <span class="hljs-string">doc:</span> <span class="hljs-string">'foo'</span>, <span class="hljs-string">label:</span> <span class="hljs-string">'Foo'</span> }, <span class="hljs-attr">headerLinks</span>: [
{ <span class="hljs-string">languages:</span> <span class="hljs-literal">true</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-string">doc:</span> <span class="hljs-string">'bar'</span>, <span class="hljs-string">label:</span> <span class="hljs-string">'Bar'</span> }, { <span class="hljs-attr">languages</span>: <span class="hljs-literal">true</span> },
], { <span class="hljs-attr">doc</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Bar'</span> },
],
...
}
</code></pre> </code></pre>
<h2><a class="anchor" aria-hidden="true" id="active-links-in-site-navigation-bar"></a><a href="#active-links-in-site-navigation-bar" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Active Links In Site Navigation Bar</h2> <h2><a class="anchor" aria-hidden="true" id="active-links-in-site-navigation-bar"></a><a href="#active-links-in-site-navigation-bar" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Active Links In Site Navigation Bar</h2>
<p>The links in the top navigation bar get <code>siteNavItemActive</code> and <code>siteNavGroupActive</code> class names to allow you to style the currently active link different from the others. <code>siteNavItemActive</code> is applied when there's an exact match between the navigation link and the currently displayed web page.</p> <p>The links in the top navigation bar get <code>siteNavItemActive</code> and <code>siteNavGroupActive</code> class names to allow you to style the currently active link different from the others. <code>siteNavItemActive</code> is applied when there's an exact match between the navigation link and the currently displayed web page.</p>
@ -125,9 +149,12 @@
<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> <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 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> <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 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/next/site-config.html#optional-fields">option</a> to your <code>siteConfig.js</code>.</p> <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/next/site-config.html#optional-fields">option</a> to your <code>siteConfig.js</code>.</p>
<pre><code class="hljs"><span class="hljs-string">onPageNav:</span> <span class="hljs-string">'separate'</span>, <pre><code class="hljs css js">{
<span class="hljs-attr">onPageNav</span>: <span class="hljs-string">'separate'</span>,
...
}
</code></pre> </code></pre>
<p>Currently, <code>separate</code> is the only option available for this field. This provides a separate navigation on the right side of the page.</p> <p>Currently, <code>'separate'</code> is the only option available for this field. This provides a separate navigation on the right side of the page.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="search.html">← Enabling Search</a><a class="docs-next button" href="translation.html">Translations &amp; Localization →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#referencing-site-documents">Referencing Site Documents</a></li><li><a href="#how-documents-are-linked">How Documents are Linked</a></li><li><a href="#adding-documents-to-a-sidebar">Adding Documents to a Sidebar</a><ul class="toc-headings"><li><a href="#adding-new-sidebars">Adding New Sidebars</a></li></ul></li><li><a href="#additions-to-the-site-navigation-bar">Additions to the Site Navigation Bar</a><ul class="toc-headings"><li><a href="#adding-documents">Adding Documents</a></li><li><a href="#adding-custom-pages">Adding Custom Pages</a></li><li><a href="#adding-external-links">Adding External Links</a></li></ul></li><li><a href="#site-navigation-bar-positioning">Site Navigation Bar Positioning</a><ul class="toc-headings"><li><a href="#search">Search</a></li><li><a href="#languages-dropdown">Languages Dropdown</a></li></ul></li><li><a href="#active-links-in-site-navigation-bar">Active Links In Site Navigation Bar</a></li><li><a href="#secondary-on-page-navigation">Secondary On-Page Navigation</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href=" </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="search.html">← Enabling Search</a><a class="docs-next button" href="translation.html">Translations &amp; Localization →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#referencing-site-documents">Referencing Site Documents</a></li><li><a href="#how-documents-are-linked">How Documents are Linked</a></li><li><a href="#adding-documents-to-a-sidebar">Adding Documents to a Sidebar</a><ul class="toc-headings"><li><a href="#adding-new-sidebars">Adding New Sidebars</a></li></ul></li><li><a href="#additions-to-the-site-navigation-bar">Additions to the Site Navigation Bar</a><ul class="toc-headings"><li><a href="#adding-documents">Adding Documents</a></li><li><a href="#adding-custom-pages">Adding Custom Pages</a></li><li><a href="#adding-external-links">Adding External Links</a></li></ul></li><li><a href="#site-navigation-bar-positioning">Site Navigation Bar Positioning</a><ul class="toc-headings"><li><a href="#search">Search</a></li><li><a href="#languages-dropdown">Languages Dropdown</a></li></ul></li><li><a href="#active-links-in-site-navigation-bar">Active Links In Site Navigation Bar</a></li><li><a href="#secondary-on-page-navigation">Secondary On-Page Navigation</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href="
/docs/en/installation.html">Getting Started</a><a href=" /docs/en/installation.html">Getting Started</a><a href="
/docs/en/versioning.html">Versioning</a><a href=" /docs/en/versioning.html">Versioning</a><a href="

24
docs/en/next/publishing.html
View file

@ -7,7 +7,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>Publishing your site</h1></header><article><div><span><p>You should now have a <a href="/docs/en/next/site-creation.html">site up and running locally</a>. Once you have <a href="/docs/en/next/site-config.html">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> </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>Publishing your site</h1></header><article><div><span><p>You should now have a <a href="/docs/en/next/site-creation.html">site up and running locally</a>. Once you have <a href="/docs/en/next/site-config.html">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 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> <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 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> <p>To create a static build of your website, run the following script from the <code>website</code> directory:</p>
<pre><code class="hljs">yarn <span class="hljs-builtin-name">run</span> build # <span class="hljs-keyword">or</span> `npm <span class="hljs-builtin-name">run</span> build` <pre><code class="hljs css bash">yarn run build <span class="hljs-comment"># or `npm run build`</span>
</code></pre> </code></pre>
<p>This will generate a <code>build</code> folder 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> <p>This will generate a <code>build</code> folder 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 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> <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 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>
@ -16,7 +16,7 @@
<p>For example, both Apache and nginx serve content from <code>/var/www/html</code> by default. That said, choosing a web server or provider is outside the scope of Docusaurus.</p> <p>For example, both Apache and nginx serve content from <code>/var/www/html</code> by default. That said, choosing a web server or provider is outside the scope of Docusaurus.</p>
</blockquote> </blockquote>
<blockquote> <blockquote>
<p>When serving the site from your own web server, ensure the web server is serving the asset files with the proper HTTP headers. CSS files should be served with the <code>content-type</code> header - <code>text/css</code>. In the case of nginx, this would mean setting <code>include /etc/nginx/mime.types;</code> in your <code>nginx.conf</code> file. See <a href="https://github.com/facebook/Docusaurus/issues/602">https://github.com/facebook/Docusaurus/issues/602</a> for more info.</p> <p>When serving the site from your own web server, ensure the web server is serving the asset files with the proper HTTP headers. CSS files should be served with the <code>content-type</code> header of <code>text/css</code>. In the case of nginx, this would mean setting <code>include /etc/nginx/mime.types;</code> in your <code>nginx.conf</code> file. See <a href="https://github.com/facebook/Docusaurus/issues/602">this issue</a> for more info.</p>
</blockquote> </blockquote>
<h3><a class="anchor" aria-hidden="true" id="hosting-on-a-service"></a><a href="#hosting-on-a-service" aria-hidden="true" class="hash-link" ><svg 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 on a Service:</h3> <h3><a class="anchor" aria-hidden="true" id="hosting-on-a-service"></a><a href="#hosting-on-a-service" aria-hidden="true" class="hash-link" ><svg 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 on a Service:</h3>
<ul> <ul>
@ -91,7 +91,7 @@
<li>Create a <code>.circleci</code> folder and create a <code>config.yml</code> under that folder.</li> <li>Create a <code>.circleci</code> folder and create a <code>config.yml</code> under that folder.</li>
<li>Copy the text below into <code>.circleci/config.yml</code>.</li> <li>Copy the text below into <code>.circleci/config.yml</code>.</li>
</ol> </ol>
<pre><code class="hljs css yml"><span class="hljs-comment"># If you only one circle to run on direct commits to master, you can uncomment this out</span> <pre><code class="hljs css yaml"><span class="hljs-comment"># If you only one 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"># and uncomment the filters: *filter-only-master down below too</span>
<span class="hljs-comment">#</span> <span class="hljs-comment">#</span>
<span class="hljs-comment"># aliases:</span> <span class="hljs-comment"># aliases:</span>
@ -138,7 +138,7 @@
</blockquote> </blockquote>
<h3><a class="anchor" aria-hidden="true" id="tips-tricks"></a><a href="#tips-tricks" aria-hidden="true" class="hash-link" ><svg 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> <h3><a class="anchor" aria-hidden="true" id="tips-tricks"></a><a href="#tips-tricks" aria-hidden="true" class="hash-link" ><svg 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> <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 yml"><span class="hljs-comment"># Circle CI 2.0 Config File</span> <pre><code class="hljs css 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-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">version:</span> <span class="hljs-number">2</span>
<span class="hljs-attr">jobs:</span> <span class="hljs-attr">jobs:</span>
@ -153,17 +153,15 @@
<h3><a class="anchor" aria-hidden="true" id="hosting-on-netlify"></a><a href="#hosting-on-netlify" aria-hidden="true" class="hash-link" ><svg 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 on Netlify</h3> <h3><a class="anchor" aria-hidden="true" id="hosting-on-netlify"></a><a href="#hosting-on-netlify" aria-hidden="true" class="hash-link" ><svg 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 on Netlify</h3>
<p>Steps to configure your Docusaurus-powered site on Netlify.</p> <p>Steps to configure your Docusaurus-powered site on Netlify.</p>
<ol> <ol>
<li>Select <strong>New site from Git</strong></li> <li><p>Select <strong>New site from Git</strong></p></li>
<li>Connect to your preferred Git provider.</li> <li><p>Connect to your preferred Git provider.</p></li>
<li>Select the branch to deploy. Default is <code>master</code></li> <li><p>Select the branch to deploy. Default is <code>master</code></p></li>
<li>Configure your build steps:</li> <li><p>Configure your build steps:</p>
</ol>
<ul> <ul>
<li>For your build command enter: <code>cd website; npm install; npm run build;</code></li> <li>For your build command enter: <code>cd website; npm install; npm run build;</code></li>
<li>For publish directory: <code>build/&lt;projectName&gt;</code> (use the projectName from your siteConfig)</li> <li>For publish directory: <code>build/&lt;projectName&gt;</code> (use the <code>projectName</code> from your <code>siteConfig</code>)</li>
</ul> </ul></li>
<ol start="5"> <li><p>Click <strong>Deploy site</strong></p></li>
<li>Click <strong>Deploy site</strong></li>
</ol> </ol>
<p>You can also configure Netlify to rebuild on every commit to your repo, or only <code>master</code> branch commits.</p> <p>You can also configure Netlify to rebuild on every commit to your repo, or only <code>master</code> branch commits.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="site-creation.html">← Creating your site</a><a class="docs-next button" href="blog.html">Adding a Blog →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#building-static-html-pages">Building Static HTML Pages</a></li><li><a href="#hosting-static-html-pages">Hosting Static HTML Pages</a><ul class="toc-headings"><li><a href="#hosting-on-a-service">Hosting on a Service:</a></li><li><a href="#using-github-pages">Using GitHub Pages</a></li></ul></li><li><a href="#automating-deployments-using-continuous-integration">Automating Deployments Using Continuous Integration</a><ul class="toc-headings"><li><a href="#using-circle-ci-20">Using Circle CI 2.0</a></li><li><a href="#tips-tricks">Tips &amp; Tricks</a></li><li><a href="#hosting-on-netlify">Hosting on Netlify</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href=" </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="site-creation.html">← Creating your site</a><a class="docs-next button" href="blog.html">Adding a Blog →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#building-static-html-pages">Building Static HTML Pages</a></li><li><a href="#hosting-static-html-pages">Hosting Static HTML Pages</a><ul class="toc-headings"><li><a href="#hosting-on-a-service">Hosting on a Service:</a></li><li><a href="#using-github-pages">Using GitHub Pages</a></li></ul></li><li><a href="#automating-deployments-using-continuous-integration">Automating Deployments Using Continuous Integration</a><ul class="toc-headings"><li><a href="#using-circle-ci-20">Using Circle CI 2.0</a></li><li><a href="#tips-tricks">Tips &amp; Tricks</a></li><li><a href="#hosting-on-netlify">Hosting on Netlify</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href="

12
docs/en/next/search.html
View file

@ -10,11 +10,11 @@
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> siteConfig = { <pre><code class="hljs css js"><span class="hljs-keyword">const</span> siteConfig = {
... ...
algolia: { algolia: {
<span class="hljs-attr">apiKey</span>: <span class="hljs-string">"my-search-only-api-key-1234"</span>, <span class="hljs-attr">apiKey</span>: <span class="hljs-string">'my-search-only-api-key-1234'</span>,
<span class="hljs-attr">indexName</span>: <span class="hljs-string">"my-index-name"</span> <span class="hljs-attr">indexName</span>: <span class="hljs-string">'my-index-name'</span>
}, },
... ...
} };
</code></pre> </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 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> <h2><a class="anchor" aria-hidden="true" id="extra-search-options"></a><a href="#extra-search-options" aria-hidden="true" class="hash-link" ><svg 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> <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>
@ -23,11 +23,11 @@
algolia: { algolia: {
... ...
algoliaOptions: { algoliaOptions: {
<span class="hljs-attr">facetFilters</span>: [ <span class="hljs-string">"tags:VERSION"</span> ], <span class="hljs-attr">facetFilters</span>: [ <span class="hljs-string">'tags:VERSION'</span> ],
<span class="hljs-attr">hitsPerPage</span>: <span class="hljs-number">5</span> <span class="hljs-attr">hitsPerPage</span>: <span class="hljs-number">5</span>
} }
}, },
} };
</code></pre> </code></pre>
<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 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> <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 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>By default, the search bar will be the rightmost element in the top navigation bar.</p>
@ -42,7 +42,7 @@
{...} {...}
], ],
... ...
} };
</code></pre> </code></pre>
<h2><a class="anchor" aria-hidden="true" id="disabling-the-search-bar"></a><a href="#disabling-the-search-bar" aria-hidden="true" class="hash-link" ><svg 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>Disabling the Search Bar</h2> <h2><a class="anchor" aria-hidden="true" id="disabling-the-search-bar"></a><a href="#disabling-the-search-bar" aria-hidden="true" class="hash-link" ><svg 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>Disabling the Search Bar</h2>
<p>To disable the search bar, comment out (recommended) or delete the <code>algolia</code> section in the <code>siteConfig.js</code> file.</p> <p>To disable the search bar, comment out (recommended) or delete the <code>algolia</code> section in the <code>siteConfig.js</code> file.</p>

152
docs/en/next/site-config.html
View file

@ -54,9 +54,9 @@
<p><code>blogSidebarCount</code> - Control the number of blog posts that show up in the sidebar. See the <a href="/docs/en/next/blog.html#changing-how-many-blog-posts-show-on-sidebar">adding a blog docs</a> for more information.</p> <p><code>blogSidebarCount</code> - Control the number of blog posts that show up in the sidebar. See the <a href="/docs/en/next/blog.html#changing-how-many-blog-posts-show-on-sidebar">adding a blog docs</a> for more information.</p>
<p><code>cname</code> - The CNAME for your website. It will go into a <code>CNAME</code> file when your site it built.</p> <p><code>cname</code> - The CNAME for your website. It will go into a <code>CNAME</code> file when your site it 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. <strong>Note that all of your documentation <code>*.md</code> files must still reside in a flat hierarchy. You cannot have your documents in nested directories</strong>.</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. <strong>Note that all of your documentation <code>*.md</code> files must still reside in a flat hierarchy. You cannot have your documents in nested directories</strong>.</p>
<pre><code class="hljs css js">customDocsPath: <span class="hljs-string">"docs/site"</span> <pre><code class="hljs css js">customDocsPath: <span class="hljs-string">'docs/site'</span>
</code></pre> </code></pre>
<pre><code class="hljs css js">customDocsPath: <span class="hljs-string">"website-docs"</span> <pre><code class="hljs css js">customDocsPath: <span class="hljs-string">'website-docs'</span>
</code></pre> </code></pre>
<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> <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>
<p><code>disableTitleTagline</code> - An option to disable showing the tagline in the title of main pages. Exclude this field to keep page titles as <code>Title • Tagline</code>. Set to <code>true</code> to make page titles just <code>Title</code>.</p> <p><code>disableTitleTagline</code> - An option to disable showing the tagline in the title of main pages. Exclude this field to keep page titles as <code>Title • Tagline</code>. Set to <code>true</code> to make page titles just <code>Title</code>.</p>
@ -65,19 +65,19 @@
<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>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><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> <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"><span class="hljs-selector-tag">fonts</span>: { <pre><code class="hljs css js">fonts: {
<span class="hljs-attribute">myFont</span>: [ <span class="hljs-attr">myFont</span>: [
<span class="hljs-string">"Times New Roman"</span>, <span class="hljs-string">'Times New Roman'</span>,
<span class="hljs-string">"Serif"</span> <span class="hljs-string">'Serif'</span>
], ],
myOtherFont: [ <span class="hljs-attr">myOtherFont</span>: [
<span class="hljs-string">"-apple-system"</span>, <span class="hljs-string">'-apple-system'</span>,
<span class="hljs-string">"system-ui"</span> <span class="hljs-string">'system-ui'</span>
] ]
}, },
</code></pre> </code></pre>
<p>The above fonts would be represented in your CSS file(s) as variables <code>$myFont</code> and <code>$myOtherFont</code>.</p> <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"><span class="hljs-selector-tag">h1</span> { <pre><code class="hljs css css"><span class="hljs-selector-tag">h1</span> {
<span class="hljs-attribute">font-family</span>: $myFont; <span class="hljs-attribute">font-family</span>: $myFont;
} }
</code></pre> </code></pre>
@ -108,74 +108,74 @@
<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><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> <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 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> <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 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"><span class="hljs-string">const</span> <span class="hljs-string">users</span> <span class="hljs-string">=</span> <span class="hljs-string">[</span> <pre><code class="hljs css js"><span class="hljs-keyword">const</span> users = [
<span class="hljs-string">{</span> {
<span class="hljs-attr"> caption:</span> <span class="hljs-string">"User1"</span><span class="hljs-string">,</span> <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><span class="hljs-string">,</span> <span class="hljs-attr">image</span>: <span class="hljs-string">'/test-site/img/docusaurus.svg'</span>,
<span class="hljs-attr"> infoLink:</span> <span class="hljs-string">"https://www.example.com"</span><span class="hljs-string">,</span> <span class="hljs-attr">infoLink</span>: <span class="hljs-string">'https://www.example.com'</span>,
<span class="hljs-attr"> pinned:</span> <span class="hljs-literal">true</span> <span class="hljs-attr">pinned</span>: <span class="hljs-literal">true</span>
<span class="hljs-string">}</span> }
<span class="hljs-string">];</span> ];
<span class="hljs-string">const</span> <span class="hljs-string">siteConfig</span> <span class="hljs-string">=</span> <span class="hljs-string">{</span> <span class="hljs-keyword">const</span> siteConfig = {
<span class="hljs-attr"> title:</span> <span class="hljs-string">"Docusaurus"</span><span class="hljs-string">,</span> <span class="hljs-attr">title</span>: <span class="hljs-string">'Docusaurus'</span>,
<span class="hljs-attr"> tagline:</span> <span class="hljs-string">"Generate websites!"</span><span class="hljs-string">,</span> <span class="hljs-attr">tagline</span>: <span class="hljs-string">'Generate websites!'</span>,
<span class="hljs-attr"> url:</span> <span class="hljs-string">"https://docusaurus.io"</span><span class="hljs-string">,</span> <span class="hljs-attr">url</span>: <span class="hljs-string">'https://docusaurus.io'</span>,
<span class="hljs-attr"> baseUrl:</span> <span class="hljs-string">"/"</span><span class="hljs-string">,</span> <span class="hljs-attr">baseUrl</span>: <span class="hljs-string">'/'</span>,
<span class="hljs-string">//</span> <span class="hljs-string">For</span> <span class="hljs-string">github.io</span> <span class="hljs-string">type</span> <span class="hljs-string">URLS,</span> <span class="hljs-string">you</span> <span class="hljs-string">would</span> <span class="hljs-string">combine</span> <span class="hljs-string">the</span> <span class="hljs-string">url</span> <span class="hljs-string">and</span> <span class="hljs-string">baseUrl</span> <span class="hljs-attr">like:</span> <span class="hljs-comment">// For github.io type URLS, you would combine the url and baseUrl like:</span>
<span class="hljs-string">//</span> <span class="hljs-attr">url:</span> <span class="hljs-string">"https://reasonml.github.io"</span><span class="hljs-string">,</span> <span class="hljs-comment">// url: 'https://reasonml.github.io',</span>
<span class="hljs-string">//</span> <span class="hljs-attr">baseUrl:</span> <span class="hljs-string">"/reason-react/"</span><span class="hljs-string">,</span> <span class="hljs-comment">// baseUrl: '/reason-react/',</span>
<span class="hljs-attr"> organizationName:</span> <span class="hljs-string">"facebook"</span><span class="hljs-string">,</span> organizationName: <span class="hljs-string">'facebook'</span>,
<span class="hljs-attr"> projectName:</span> <span class="hljs-string">"docusaurus"</span><span class="hljs-string">,</span> <span class="hljs-attr">projectName</span>: <span class="hljs-string">'docusaurus'</span>,
<span class="hljs-attr"> noIndex:</span> <span class="hljs-literal">false</span><span class="hljs-string">,</span> <span class="hljs-attr">noIndex</span>: <span class="hljs-literal">false</span>,
<span class="hljs-string">//</span> <span class="hljs-string">For</span> <span class="hljs-literal">no</span> <span class="hljs-string">header</span> <span class="hljs-string">links</span> <span class="hljs-string">in</span> <span class="hljs-string">the</span> <span class="hljs-string">top</span> <span class="hljs-string">nav</span> <span class="hljs-string">bar</span> <span class="hljs-bullet">-&gt;</span> <span class="hljs-attr">headerLinks:</span> <span class="hljs-string">[],</span> <span class="hljs-comment">// For no header links in the top nav bar -&gt; headerLinks: [],</span>
<span class="hljs-attr"> headerLinks:</span> <span class="hljs-string">[</span> headerLinks: [
<span class="hljs-string">{</span> <span class="hljs-attr">doc:</span> <span class="hljs-string">"doc1"</span><span class="hljs-string">,</span> <span class="hljs-attr">label:</span> <span class="hljs-string">"Docs"</span> <span class="hljs-string">},</span> { <span class="hljs-attr">doc</span>: <span class="hljs-string">'doc1'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Docs'</span> },
<span class="hljs-string">{</span> <span class="hljs-attr">page:</span> <span class="hljs-string">"help"</span><span class="hljs-string">,</span> <span class="hljs-attr">label:</span> <span class="hljs-string">"Help"</span> <span class="hljs-string">},</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> },
<span class="hljs-string">{</span> <span class="hljs-attr">search:</span> <span class="hljs-literal">true</span> <span class="hljs-string">},</span> { <span class="hljs-attr">search</span>: <span class="hljs-literal">true</span> },
<span class="hljs-string">{</span> <span class="hljs-attr">blog:</span> <span class="hljs-literal">true</span> <span class="hljs-string">}</span> { <span class="hljs-attr">blog</span>: <span class="hljs-literal">true</span> }
<span class="hljs-string">],</span> ],
<span class="hljs-attr"> headerIcon:</span> <span class="hljs-string">"img/docusaurus.svg"</span><span class="hljs-string">,</span> <span class="hljs-attr">headerIcon</span>: <span class="hljs-string">'img/docusaurus.svg'</span>,
<span class="hljs-attr"> favicon:</span> <span class="hljs-string">"img/favicon.png"</span><span class="hljs-string">,</span> <span class="hljs-attr">favicon</span>: <span class="hljs-string">'img/favicon.png'</span>,
<span class="hljs-attr"> colors:</span> <span class="hljs-string">{</span> <span class="hljs-attr">colors</span>: {
<span class="hljs-attr"> primaryColor:</span> <span class="hljs-string">"#2E8555"</span><span class="hljs-string">,</span> <span class="hljs-attr">primaryColor</span>: <span class="hljs-string">'#2E8555'</span>,
<span class="hljs-attr"> secondaryColor:</span> <span class="hljs-string">"#205C3B"</span> <span class="hljs-attr">secondaryColor</span>: <span class="hljs-string">'#205C3B'</span>
<span class="hljs-string">},</span> },
<span class="hljs-attr"> editUrl:</span> <span class="hljs-string">"https://github.com/facebook/docusaurus/edit/master/docs/"</span><span class="hljs-string">,</span> <span class="hljs-attr">editUrl</span>: <span class="hljs-string">'https://github.com/facebook/docusaurus/edit/master/docs/'</span>,
<span class="hljs-string">//</span> <span class="hljs-string">Users</span> <span class="hljs-string">variable</span> <span class="hljs-string">set</span> <span class="hljs-string">above</span> <span class="hljs-comment">// Users variable set above</span>
<span class="hljs-string">users,</span> users,
<span class="hljs-attr"> disableHeaderTitle:</span> <span class="hljs-literal">true</span><span class="hljs-string">,</span> <span class="hljs-attr">disableHeaderTitle</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr"> disableTitleTagline:</span> <span class="hljs-literal">true</span><span class="hljs-string">,</span> <span class="hljs-attr">disableTitleTagline</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr"> separateCss:</span> <span class="hljs-string">["static/css/non-docusaurus",</span> <span class="hljs-string">"static/assets/separate-css"</span><span class="hljs-string">],</span> <span class="hljs-attr">separateCss</span>: [<span class="hljs-string">'static/css/non-docusaurus'</span>, <span class="hljs-string">'static/assets/separate-css'</span>],
<span class="hljs-attr"> footerIcon:</span> <span class="hljs-string">"img/docusaurus.svg"</span><span class="hljs-string">,</span> <span class="hljs-attr">footerIcon</span>: <span class="hljs-string">'img/docusaurus.svg'</span>,
<span class="hljs-attr"> translationRecruitingLink:</span> <span class="hljs-attr">translationRecruitingLink</span>:
<span class="hljs-string">"https://crowdin.com/project/docusaurus"</span><span class="hljs-string">,</span> <span class="hljs-string">'https://crowdin.com/project/docusaurus'</span>,
<span class="hljs-attr"> algolia:</span> <span class="hljs-string">{</span> <span class="hljs-attr">algolia</span>: {
<span class="hljs-attr"> apiKey:</span> <span class="hljs-attr">apiKey</span>:
<span class="hljs-string">"0f9f28b9ab9efae89810921a351753b5"</span><span class="hljs-string">,</span> <span class="hljs-string">'0f9f28b9ab9efae89810921a351753b5'</span>,
<span class="hljs-attr"> indexName:</span> <span class="hljs-string">"github"</span> <span class="hljs-attr">indexName</span>: <span class="hljs-string">'github'</span>
<span class="hljs-string">},</span> },
<span class="hljs-attr"> gaTrackingId:</span> <span class="hljs-string">"U-A2352"</span><span class="hljs-string">,</span> <span class="hljs-attr">gaTrackingId</span>: <span class="hljs-string">'UA-12345678-9'</span>,
<span class="hljs-attr"> highlight:</span> <span class="hljs-string">{</span> <span class="hljs-attr">highlight</span>: {
<span class="hljs-attr"> theme:</span> <span class="hljs-string">'default'</span> <span class="hljs-attr">theme</span>: <span class="hljs-string">'default'</span>
<span class="hljs-string">},</span> },
<span class="hljs-attr"> markdownPlugins:</span> <span class="hljs-string">[</span> <span class="hljs-attr">markdownPlugins</span>: [
<span class="hljs-string">function</span> <span class="hljs-string">foo(md)</span> <span class="hljs-string">{</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params">md</span>) </span>{
<span class="hljs-string">md.renderer.rules.fence_custom.foo</span> <span class="hljs-string">=</span> <span class="hljs-string">function(tokens,</span> <span class="hljs-string">idx,</span> <span class="hljs-string">options,</span> <span class="hljs-string">env,</span> <span class="hljs-string">instance)</span> <span class="hljs-string">{</span> md.renderer.rules.fence_custom.foo = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">tokens, idx, options, env, instance</span>) </span>{
<span class="hljs-string">return</span> <span class="hljs-string">'&lt;div class="foo"&gt;bar&lt;/div&gt;'</span><span class="hljs-string">;</span> <span class="hljs-keyword">return</span> <span class="hljs-string">'&lt;div class="foo"&gt;bar&lt;/div&gt;'</span>;
<span class="hljs-string">}</span> }
<span class="hljs-string">}</span> }
<span class="hljs-string">],</span> ],
<span class="hljs-attr"> scripts:</span> <span class="hljs-string">[</span> <span class="hljs-string">"https://docusaurus.io/slash.js"</span> <span class="hljs-string">],</span> <span class="hljs-attr">scripts</span>: [ <span class="hljs-string">'https://docusaurus.io/slash.js'</span> ],
<span class="hljs-attr"> stylesheets:</span> <span class="hljs-string">[</span> <span class="hljs-string">"https://docusaurus.io/style.css"</span> <span class="hljs-string">],</span> <span class="hljs-attr">stylesheets</span>: [ <span class="hljs-string">'https://docusaurus.io/style.css'</span> ],
<span class="hljs-attr"> facebookAppId:</span> <span class="hljs-string">"1615782811974223"</span><span class="hljs-string">,</span> <span class="hljs-attr">facebookAppId</span>: <span class="hljs-string">'1615782811974223'</span>,
<span class="hljs-attr"> facebookPixelId:</span> <span class="hljs-string">"352490515235776"</span><span class="hljs-string">,</span> <span class="hljs-attr">facebookPixelId</span>: <span class="hljs-string">'352490515235776'</span>,
<span class="hljs-attr"> twitter:</span> <span class="hljs-string">"true"</span><span class="hljs-string">,</span> <span class="hljs-attr">twitter</span>: <span class="hljs-string">'true'</span>,
<span class="hljs-attr"> twitterImage:</span> <span class="hljs-string">"img/docusaurus.png"</span><span class="hljs-string">,</span> <span class="hljs-attr">twitterImage</span>: <span class="hljs-string">'img/docusaurus.png'</span>,
<span class="hljs-attr"> ogImage:</span> <span class="hljs-string">"img/docusaurus.png"</span><span class="hljs-string">,</span> <span class="hljs-attr">ogImage</span>: <span class="hljs-string">'img/docusaurus.png'</span>,
<span class="hljs-string">};</span> };
<span class="hljs-string">module.exports</span> <span class="hljs-string">=</span> <span class="hljs-string">siteConfig;</span> <span class="hljs-built_in">module</span>.exports = siteConfig;
</code></pre> </code></pre>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="api-pages.html">← Pages and Styles</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#user-showcase">User Showcase</a></li><li><a href="#siteconfig-fields">siteConfig Fields</a><ul class="toc-headings"><li><a href="#mandatory-fields">Mandatory Fields</a></li><li><a href="#optional-fields">Optional Fields</a></li></ul></li><li><a href="#example-siteconfigjs-with-many-available-fields">Example siteConfig.js with many available fields</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href=" </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="api-pages.html">← Pages and Styles</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#user-showcase">User Showcase</a></li><li><a href="#siteconfig-fields">siteConfig Fields</a><ul class="toc-headings"><li><a href="#mandatory-fields">Mandatory Fields</a></li><li><a href="#optional-fields">Optional Fields</a></li></ul></li><li><a href="#example-siteconfigjs-with-many-available-fields">Example siteConfig.js with many available fields</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href="
/docs/en/installation.html">Getting Started</a><a href=" /docs/en/installation.html">Getting Started</a><a href="

32
docs/en/next/site-creation.html
View file

@ -32,12 +32,12 @@
<p>To create a fully functional site, you only need to do a few steps:</p> <p>To create a fully functional site, you only need to do a few steps:</p>
<ol> <ol>
<li><p>Add your documentation to the <code>/docs</code> folder as <code>.md</code> files, ensuring you have the proper <a href="/docs/en/next/doc-markdown.html#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> <li><p>Add your documentation to the <code>/docs</code> folder as <code>.md</code> files, ensuring you have the proper <a href="/docs/en/next/doc-markdown.html#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"><span class="hljs-meta">---</span> <pre><code class="hljs css yaml"><span class="hljs-meta">---</span>
<span class="hljs-attr">id:</span> <span class="hljs-string">intro</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-attr">title:</span> <span class="hljs-string">Getting</span> <span class="hljs-string">Started</span>
<span class="hljs-meta">---</span> <span class="hljs-meta">---</span>
<span class="hljs-string">My</span> <span class="hljs-meta">*new</span> <span class="hljs-string">content*</span> <span class="hljs-string">here..</span> <span class="hljs-string">My</span> <span class="hljs-string">new</span> <span class="hljs-string">content</span> <span class="hljs-string">here..</span>
</code></pre></li> </code></pre></li>
<li><p>Add zero or more docs to the <a href="/docs/en/next/navigation.html#adding-docs-to-a-sidebar"><code>sidebars.json</code></a> file so that your documentation is rendered in a sidebar, if you choose them to be.</p></li> <li><p>Add zero or more docs to the <a href="/docs/en/next/navigation.html#adding-docs-to-a-sidebar"><code>sidebars.json</code></a> file so that your documentation is rendered in a sidebar, if you choose them to be.</p></li>
</ol> </ol>
@ -50,9 +50,9 @@
<li>Place assets, such as images, in the <code>website/static/</code> folder.</li> <li>Place assets, such as images, in the <code>website/static/</code> folder.</li>
<li>Run the site to see the results of your changes.</li> <li>Run the site to see the results of your changes.</li>
</ol> </ol>
<pre><code class="hljs">cd website <pre><code class="hljs css bash"><span class="hljs-built_in">cd</span> website
yarn <span class="hljs-builtin-name">run</span> start # <span class="hljs-keyword">or</span> `npm <span class="hljs-builtin-name">run</span> start` yarn run start <span class="hljs-comment"># or `npm run start`</span>
<span class="hljs-comment"># navigate to http://localhost:3000</span> <span class="hljs-comment"># Navigate to http://localhost:3000</span>
</code></pre> </code></pre>
<h2><a class="anchor" aria-hidden="true" id="special-customization"></a><a href="#special-customization" aria-hidden="true" class="hash-link" ><svg 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>Special Customization</h2> <h2><a class="anchor" aria-hidden="true" id="special-customization"></a><a href="#special-customization" aria-hidden="true" class="hash-link" ><svg 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>Special Customization</h2>
<h3><a class="anchor" aria-hidden="true" id="docs-landing-page"></a><a href="#docs-landing-page" aria-hidden="true" class="hash-link" ><svg 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>Docs Landing Page</h3> <h3><a class="anchor" aria-hidden="true" id="docs-landing-page"></a><a href="#docs-landing-page" aria-hidden="true" class="hash-link" ><svg 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>Docs Landing Page</h3>
@ -63,17 +63,17 @@ yarn <span class="hljs-builtin-name">run</span> start # <span class="hljs-keywor
</ol> </ol>
<pre><code class="hljs css html"><span class="hljs-meta">&lt;!DOCTYPE HTML&gt;</span> <pre><code class="hljs css 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">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">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> <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>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"refresh"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"0; url=docs/id-of-doc-to-land-on.html"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"refresh"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"0; url=docs/id-of-doc-to-land-on.html"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript">
<span class="hljs-built_in">window</span>.location.href = <span class="hljs-string">"docs/id-of-doc-to-land-on.html"</span> <span class="hljs-built_in">window</span>.location.href = <span class="hljs-string">'docs/id-of-doc-to-land-on.html'</span>;
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Your Site Title Here<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Your Site Title Here<span class="hljs-tag">&lt;/<span class="hljs-name">title</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">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
If you are not redirected automatically, follow this <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'docs/id-of-doc-to-land-on.html'</span>&gt;</span>link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>. If you are not redirected automatically, follow this <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"docs/id-of-doc-to-land-on.html"</span>&gt;</span>link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>.
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre> </code></pre>
<blockquote> <blockquote>

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

@ -28,7 +28,7 @@
│ └── static │ └── static
</code></pre> </code></pre>
<blockquote> <blockquote>
<p>You may have already renamed the example blog (website/blog-examples-from-docusaurus and document (docs-examples-from-docusaurus) directories when you <a href="/docs/en/next/installation.html##verifying-installation">verified the installation</a>.</p> <p>You may have already renamed the example blog (<code>website/blog-examples-from-docusaurus</code>) and document (<code>docs-examples-from-docusaurus</code>) directories when you <a href="/docs/en/next/installation.html##verifying-installation">verified the installation</a>.</p>
</blockquote> </blockquote>
<ul> <ul>
<li>The <code>website/core/Footer.js</code> file is a React component that acts as the footer for the site generated by Docusaurus and should be customized by the user.</li> <li>The <code>website/core/Footer.js</code> file is a React component that acts as the footer for the site generated by Docusaurus and should be customized by the user.</li>

36
docs/en/next/translation.html
View file

@ -7,15 +7,15 @@
</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>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> </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>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 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> <h2><a class="anchor" aria-hidden="true" id="docusaurus-translation-configurations"></a><a href="#docusaurus-translation-configurations" aria-hidden="true" class="hash-link" ><svg 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> <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">npm <span class="hljs-keyword">run</span><span class="bash"> examples translations <pre><code class="hljs css bash">npm run examples translations
</span></code></pre> </code></pre>
<p>or</p> <p>or</p>
<pre><code class="hljs"><span class="hljs-attribute">yarn examples translations</span> <pre><code class="hljs css bash">yarn examples translations
</code></pre> </code></pre>
<p>This will create the following files:</p> <p>This will create the following files:</p>
<pre><code class="hljs">pages/en/help-with-translations<span class="hljs-selector-class">.js</span> <pre><code class="hljs css bash">pages/en/<span class="hljs-built_in">help</span>-with-translations.js
languages<span class="hljs-selector-class">.js</span> languages.js
../crowdin<span class="hljs-selector-class">.yaml</span> ../crowdin.yaml
</code></pre> </code></pre>
<ul> <ul>
<li>The <code>pages/en/help-with-translations.js</code> file includes the same starter help page generated by the <code>examples</code> script, but now includes translation tags.</li> <li>The <code>pages/en/help-with-translations.js</code> file includes the same starter help page generated by the <code>examples</code> script, but now includes translation tags.</li>
@ -34,7 +34,7 @@ languages<span class="hljs-selector-class">.js</span>
<p>Pages with text that you want translated should be placed in <code>website/pages/en</code> folder.</p> <p>Pages with text that you want translated should be placed in <code>website/pages/en</code> folder.</p>
<p>Wrap strings you want translated in a <code>&lt;translate&gt;</code> tag, and add the following <code>require</code> statement to the top of the file:</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 jsx">... <pre><code class="hljs css jsx">...
const translate = require("../../server/translate.js").translate; const translate = require('../../server/translate.js').translate;
... ...
&lt;h2&gt; &lt;h2&gt;
&lt;translate&gt;This header will be translated&lt;/translate&gt; &lt;translate&gt;This header will be translated&lt;/translate&gt;
@ -52,11 +52,13 @@ const translate = require("../../server/translate.js").translate;
<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 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> <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 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>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> <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 json">... <pre><code class="hljs css js">{
"scripts": { ...
"write-translations": "docusaurus-write-translations" <span class="hljs-string">"scripts"</span>: {
}, <span class="hljs-string">"write-translations"</span>: <span class="hljs-string">"docusaurus-write-translations"</span>
... },
...
}
</code></pre> </code></pre>
<p>Running the script will generate a <code>website/i18n/en.json</code> file containing all the strings that will be translated from English into other languages.</p> <p>Running the script will generate a <code>website/i18n/en.json</code> file containing all the strings that will be translated from English into other languages.</p>
<p>The script will include text from the following places:</p> <p>The script will include text from the following places:</p>
@ -115,15 +117,15 @@ const translate = require("../../server/translate.js").translate;
<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 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> <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 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 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> <p>You can add the following to your <code>package.json</code> to manually trigger Crowdin.</p>
<pre><code class="hljs css json">"scripts": { <pre><code class="hljs css js"><span class="hljs-string">"scripts"</span>: {
"crowdin-upload": "crowdin --config ../crowdin.yaml upload sources --auto-update -b master", <span class="hljs-string">"crowdin-upload"</span>: <span class="hljs-string">"crowdin --config ../crowdin.yaml upload sources --auto-update -b master"</span>,
"crowdin-download": "crowdin --config ../crowdin.yaml download -b master" <span class="hljs-string">"crowdin-download"</span>: <span class="hljs-string">"crowdin --config ../crowdin.yaml download -b master"</span>
}, },
</code></pre> </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 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> <h3><a class="anchor" aria-hidden="true" id="manual-file-sync"></a><a href="#manual-file-sync" aria-hidden="true" class="hash-link" ><svg 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> <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"><span class="hljs-attribute">CROWDIN_DOCUSAURUS_PROJECT_ID</span>=YOUR_CROWDIN_PROJECT_ID <span class="hljs-attribute">CROWDIN_DOCUSAURUS_API_KEY</span>=YOUR_CROWDIN_API_KEY yarn <span class="hljs-builtin-name">run</span> crowdin-upload <pre><code class="hljs css bash">CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=YOUR_CROWDIN_API_KEY yarn run crowdin-upload
<span class="hljs-attribute">CROWDIN_DOCUSAURUS_PROJECT_ID</span>=YOUR_CROWDIN_PROJECT_ID <span class="hljs-attribute">CROWDIN_DOCUSAURUS_API_KEY</span>=YOUR_CROWDIN_API_KEY yarn <span class="hljs-builtin-name">run</span> crowdin-download CROWDIN_DOCUSAURUS_PROJECT_ID=YOUR_CROWDIN_PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=YOUR_CROWDIN_API_KEY yarn run crowdin-download
</code></pre> </code></pre>
<blockquote> <blockquote>
<p><code>YOUR_CROWDIN_PROJECT_ID</code> is the name of your Crowdin project. e.g., for <a href="https://crowdin.com/project/docusaurus/">https://crowdin.com/project/docusaurus/</a>, that variable would be set to <code>docusaurus</code>. <code>YOUR_CROWDIN_API_KEY</code> is a unique key that is like a password. You can find it in the <code>API</code> tab of your Crowdin project's <code>Settings</code>.</p> <p><code>YOUR_CROWDIN_PROJECT_ID</code> is the name of your Crowdin project. e.g., for <a href="https://crowdin.com/project/docusaurus/">https://crowdin.com/project/docusaurus/</a>, that variable would be set to <code>docusaurus</code>. <code>YOUR_CROWDIN_API_KEY</code> is a unique key that is like a password. You can find it in the <code>API</code> tab of your Crowdin project's <code>Settings</code>.</p>

14
docs/en/next/versioning.html
View file

@ -12,9 +12,9 @@
<p>This creates the <code>pages/en/versions.js</code> file.</p> <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>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> <p>Add the following script to your <code>package.json</code> file if it doesn't already exist:</p>
<pre><code class="hljs css json">... <pre><code class="hljs css js">...
"scripts": { <span class="hljs-string">"scripts"</span>: {
"version": "docusaurus-version" <span class="hljs-string">"version"</span>: <span class="hljs-string">"docusaurus-version"</span>
}, },
... ...
</code></pre> </code></pre>
@ -34,7 +34,7 @@
<tr><td>1.0.0</td><td>1.0.0</td><td>docs/1.0.0/doc1.html</td></tr> <tr><td>1.0.0</td><td>1.0.0</td><td>docs/1.0.0/doc1.html</td></tr>
<tr><td>1.0.1</td><td>1.0.1</td><td>docs/1.0.1/doc1.html</td></tr> <tr><td>1.0.1</td><td>1.0.1</td><td>docs/1.0.1/doc1.html</td></tr>
<tr><td>2.0.0</td><td>current</td><td>docs/doc1.html</td></tr> <tr><td>2.0.0</td><td>current</td><td>docs/doc1.html</td></tr>
<tr><td>master branch</td><td>next</td><td>docs/next/doc1.html</td></tr> <tr><td><code>master</code> branch</td><td>next</td><td>docs/next/doc1.html</td></tr>
</tbody> </tbody>
</table> </table>
<h2><a class="anchor" aria-hidden="true" id="versioning-patterns"></a><a href="#versioning-patterns" aria-hidden="true" class="hash-link" ><svg 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 Patterns</h2> <h2><a class="anchor" aria-hidden="true" id="versioning-patterns"></a><a href="#versioning-patterns" aria-hidden="true" class="hash-link" ><svg 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 Patterns</h2>
@ -50,9 +50,9 @@
<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> folder. 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> <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> folder. 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 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> <h2><a class="anchor" aria-hidden="true" id="renaming-existing-versions"></a><a href="#renaming-existing-versions" aria-hidden="true" class="hash-link" ><svg 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> <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 json">... <pre><code class="hljs css js">...
"scripts": { <span class="hljs-string">"scripts"</span>: {
"rename-version": "docusaurus-rename-version" <span class="hljs-string">"rename-version"</span>: <span class="hljs-string">"docusaurus-rename-version"</span>
}, },
... ...
</code></pre> </code></pre>