"/><metaname="docsearch:version"content="1.5.1"/><metaname="docsearch:language"content="ro"/><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="<p>DocusaurusprovidessupportforwritingpagesasReactcomponentsinsidethe<code>website/pages</code>directorywhichwillsharethesameheader,footer,andstylesastherestofthesite.</p>
"/><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"/><script>
</script></span><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><divclass="tocToggler"id="tocToggler"><iclass="icon-toc"></i></div></div><divclass="navGroups"><divclass="navGroup"><h3class="navGroupCategoryTitle">Getting Started</h3><ul><liclass="navListItem"><aclass="navItem"href="/docs/ro/installation">Installation</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/site-preparation">Site Preparation</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/site-creation">Creating your site</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/publishing">Publishing your site</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/docker">Docker</a></li></ul></div><divclass="navGroup"><h3class="navGroupCategoryTitle">Guides</h3><ul><liclass="navListItem"><aclass="navItem"href="/docs/ro/adding-blog">Adding a Blog</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/custom-pages">Custom Pages</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/search">Enabling Search</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/navigation">Navigation and Sidebars</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/translation">Translations & Localization</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/versioning">Versioning</a></li></ul></div><divclass="navGroup"><h3class="navGroupCategoryTitle">API</h3><ul><liclass="navListItem"><aclass="navItem"href="/docs/ro/commands">CLI Commands</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/doc-markdown">Markdown Features</a></li><liclass="navListItem navListItemActive"><aclass="navItem"href="/docs/ro/api-pages">Pages and Styles</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/site-config">siteConfig.js</a></li></ul></div></div></section></div><script>
</script></nav></div><divclass="container mainContainer"><divclass="wrapper"><divclass="post"><headerclass="postHeader"><aclass="edit-page-link button"href="https://crowdin.com/project/docusaurus/ro"target="_blank"rel="noreferrer noopener">Translate</a><h1class="postHeaderTitle">Pages and Styles</h1></header><article><div><span><p>Docusaurus provides support for writing pages as React components inside the <code>website/pages</code> directory 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 <code>pages</code>. Fișierele din <code>siteweb/pagini/en</code> deasemenea va fi copiată în <code>pagini</code> și va SUPRASCRIE orice fișiere cu același nume din <code>pagini</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/ro/site-config">siteConfig.js file</a>.</p>
<p>By default, the title of your page is <code><title> • <tagline></code> where <code>title</code> and <code>tagline</code> fields are set in <ahref="/docs/ro/site-config"><code>siteConfig.js</code></a>. You can exclude the tagline in the title by setting <code>disableTitleTagline</code> to <code>true</code>. If you want to set a specific title for your custom pages, add a <code>title</code> class property on your exported React component.</p>
<p>By default, the description your page is <code>tagline</code> set in <ahref="/docs/ro/site-config"><code>siteConfig.js</code></a>. If you want to set a specific description for your custom pages, add a <code>description</code> class property on your exported React component.</p>
<p>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> directory 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 directory, use <code>process.cwd()</code> which will refer to the <code>website</code> directory 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>
content<spanclass="token punctuation">:</span><spanclass="token string">'Questions gathered from the community'</span><spanclass="token punctuation">,</span>
content<spanclass="token punctuation">:</span><spanclass="token string">'Lots of documentation is on this site'</span><spanclass="token punctuation">,</span>
<p>More examples of how these components are used can be found in the <ahref="/docs/ro/site-preparation">generated example files</a> as well as in Docusaurus' own repository 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>
<spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>translate</span><spanclass="token attr-name">desc</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>Footer link to page referring to community GitHub and Slack<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<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> directory. 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>
<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/ro/site-config">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> directory. Any <code>.css</code> files you provide in the <code>static</code> directory 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/ro/commands">start your server locally</a> and use your browser's inspect element tool.</p>
