<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title>Pages and Styles · Docusaurus</title><metaname="viewport"content="width=device-width"/><metaname="generator"content="Docusaurus"/><metaproperty="og:title"content="Pages and Styles · Docusaurus"/><metaproperty="og:type"content="website"/><metaproperty="og:url"content="https://docusaurus.io/index.html"/><metaproperty="og:description"content="Docusaurus provides support for writing pages as React components inside the `website/pages` folder which will share the same header, footer, and styles as the rest of the site."/><metaproperty="og:image"content="https://docusaurus.io/img/docusaurus.png"/><metaname="twitter:card"content="summary"/><metaname="twitter:image"content="https://docusaurus.io/img/docusaurus.png"/><linkrel="shortcut icon"href="/img/docusaurus.ico"/><linkrel="stylesheet"href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><linkrel="stylesheet"href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><linkrel="alternate"type="application/atom+xml"href="https://docusaurus.io/blog/atom.xml"title="Docusaurus Blog ATOM Feed"/><linkrel="alternate"type="application/rss+xml"href="https://docusaurus.io/blog/feed.xml"title="Docusaurus Blog RSS Feed"/><scripttype="text/javascript"src="https://buttons.github.io/buttons.js"></script><linkrel="stylesheet"href="/css/main.css"/></head><bodyclass="sideNavVisible doc separateOnPageNav"><divclass="fixedHeaderContainer"><divclass="headerWrapper wrapper"><header><ahref="/en"><imgclass="logo"src="/img/docusaurus.svg"alt="Docusaurus"/><h2class="headerTitle">Docusaurus</h2></a><ahref="/en/versions.html"><h3>next</h3></a><divclass="navigationWrapper navigationSlider"><navclass="slidingNav"><ulclass="nav-site nav-site-internal"><liclass="siteNavGroupActive"><ahref="/docs/en/next/installation.html"target="_self">Docs</a></li><liclass=""><ahref="/en/help.html"target="_self">Help</a></li><liclass=""><ahref="/en/users.html"target="_self">Users</a></li><liclass=""><ahref="/en/about-slash.html"target="_self">About /</a></li><liclass=""><ahref="/blog"target="_self">Blog</a></li><liclass=""><ahref="https://github.com/facebook/docusaurus"target="_self">GitHub</a></li><liclass="navSearchWrapper reactNavSearchWrapper"><inputtype="text"id="search_input_react"placeholder="Search"title="Search"/></li></ul></nav></div></header></div></div><divclass="navPusher"><divclass="docMainWrapper wrapper"><divclass="container docsNavContainer"id="docsNav"><navclass="toc"><divclass="toggleNav"><sectionclass="navWrapper wrapper"><divclass="navBreadcrumb wrapper"><divclass="navToggle"id="navToggler"><i></i></div><h2><i>›</i><span>API</span></h2></div><divclass="navGroups"><divclass="navGroup navGroupActive"><h3>Getting Started</h3><ul><liclass="navListItem"><aclass="navItem"href="/docs/en/next/installation.html">Installation</a></li><liclass="navListItem"><aclass="navItem"href="/docs/en/next/site-preparation.html">Site Preparation</a></li><liclass="navListItem"><aclass="navItem"href="/docs/en/next/site-creation.html">Creating your site</a></li><liclass="navListItem"><aclass="navItem"href="/docs/en/next/publishing.html">Publishing your site</a></li></ul></div><divclass="navGroup navGroupActive"><h3>Guides</h3><ul><liclass="navListItem"><aclass="navItem"href="/docs/en/next/blog.html">Adding a Blog</a></li><liclass="navListItem"><aclass="navItem"href="/docs/en/next/custom-pages.html">Custom Pages</a></li><liclass="navListItem"><aclass="navItem"href="/docs/en/next/search.html">Enabling Search</a></li><liclass="navListItem"><aclass="navItem"href="/docs/en/next/navigation.html">Navigation and Sidebars</a></li><liclass="navListItem"><aclass="navItem"href="/docs/en/next/translation.html">Translations & Localization</a></li><liclass="navListItem"><aclass="navItem"href="/docs/en/next/versioning.html">Versioning</a></li></ul></div><divclass=
var toggler = document.getElementById('navToggler');
var nav = document.getElementById('docsNav');
toggler.onclick = function() {
nav.classList.toggle('docsSliderActive');
};
</script></nav></div><divclass="container mainContainer"><divclass="wrapper"><divclass="post"><headerclass="postHeader"><aclass="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>
<p>Any <code>.js</code> files in <code>website/pages</code> will be rendered to static html using the path of the file after "pages". Files in <code>website/pages/en</code> will also get copied out into <code>pages</code> and will OVERRIDE any files of the same name in <code>pages</code>. For example, the page for the <code>website/pages/en/help.js</code> file will be found at the url <code>${baseUrl}en/help.js</code> as well as the url <code>${baseUrl}help.js</code>, where <code>${baseUrl}</code> is the <code>baseUrl</code> field set in your <ahref="/docs/en/next/site-config.html">siteConfig.js file</a>.</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>"../core/CompLibrary.js"</code>.</p>
<p>If you wish to use your own components inside the website folder, use <code>process.cwd()</code> which will refer to the <code>website</code> folder to construct require paths. For example, if you add a component to <code>website/core/mycomponent.js</code>, you can use the require path, <code>"process.cwd() + /core/mycomponent.js"</code>.</p>
<tr><td><code>padding</code></td><td>Array of <code>'all'</code>, <code>'bottom'</code>, <code>'left'</code>, <code>'right'</code>, <code>'top'</code></td><td><code>[]</code></td><td>Positions of the padding.</td></tr>
<tr><td><code>background</code></td><td>One of <code>'dark'</code>, <code>'highlight'</code>, <code>'light'</code></td><td><code>null</code></td><td>Background styling of the element.</td></tr>
<tr><td><code>className</code></td><td>String</td><td>-</td><td>Custom class to add to the element.</td></tr>
<tr><td><code>align</code></td><td>One of <code>'left'</code>, <code>'center'</code>, <code>'right'</code></td><td><code>'left'</code></td><td>Text alignment of content.</td></tr>
<tr><td><code>layout</code></td><td>One of <code>'twoColumn'</code>, <code>'threeColumn'</code>, <code>'fourColumn'</code></td><td><code>'twoColumn'</code></td><td>Number of column sections in the <code>GridBlock</code>.</td></tr>
<tr><td><code>className</code></td><td>String</td><td>-</td><td>Custom class to add to the element.</td></tr>
<tr><td><code>contents</code></td><td>Array of content objects</td><td><code>[]</code></td><td>Contents of each section of the GridBlock. Refer to the next table for the fields available on a content object.</td></tr>
<tr><td><code>title</code></td><td>String</td><td>-</td><td>The display title of this section, which is parsed using Markdown</td></tr>
<tr><td><code>content</code></td><td>String</td><td>-</td><td>The text of this section, which is parsed using Markdown</td></tr>
<tr><td><code>image</code></td><td>String</td><td>-</td><td>The path of the display image</td></tr>
<tr><td><code>imageAlt</code></td><td>String</td><td>-</td><td>The text that will be shown in case the image is not available</td></tr>
<tr><td><code>imageAlign</code></td><td>One of <code>'top'</code>, <code>'left'</code>, <code>'bottom'</code>, <code>'right'</code></td><td><code>'left'</code></td><td>Image alignment relative to the text</td></tr>
<tr><td><code>imageLink</code></td><td>String</td><td>-</td><td>Link destination from clicking the image</td></tr>
<p>More examples of how these components are used can be found in the <ahref="/docs/en/next/site-preparation.html">generated example files</a> as well as in Docusaurus' own repo for its website set-up.</p>
<p>When translations are enabled, any pages inside <code>website/pages/en</code> will be translated for all enabled languages. Urls for non-English pages will use their language tags as specified in the <code>languages.js</code> file. E.g. The url for a French page of <code>website/pages/en/help.js</code> would be found at <code>${baseUrl}fr/help.html</code>.</p>
<p>When writing pages that you wish to translate, wrap any strings to be translated inside a <code><translate></code> tag. e.g.,</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 <ahref="#page-require-paths">above</a>.</p>
<p>Static assets should be placed into the <code>website/static</code> folder. They can be accessed by their paths, excluding "static". For example, if the site's <code>baseUrl</code> is "/docusaurus/", an image in <code>website/static/img/logo.png</code> is available at <code>/docusaurus/img/logo.png</code>.</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 <ahref="/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>An easy way to figure out what classes you wish to override or add to is to <ahref="/docs/en/next/commands.html">start your server locally</a> and use your browser's inspect element tool.</p>
