<!DOCTYPE html><htmllang="ro"><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 furnizează suport pentru scrierea paginilor ca Componente de Reacție înăuntrul dosarului `siteweb/pagini` ce va avea același header, footer și stiluri ca și restul site-ului."/><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 navGroupActive"><h3>Pentru a începe</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></ul></div><divclass="navGroup navGroupActive"><h3>Ghiduri</h3><ul><liclass="navListItem"><aclass="navItem"href="/docs/ro/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">Traduceri & Localizări</a></li><liclass="navListItem"><aclass="navItem"href="/docs/ro/versioning">Versioning</a></li></ul></div><divclass="navGroup navGroupActive"><h3>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 navItemActive"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><h1>Pages and Styles</h1></header><article><div><span><p>Docusaurus furnizează suport pentru scrierea paginilor ca Componente de Reacție înăuntrul dosarului <code>siteweb/pagini</code> ce va avea același header, footer și stiluri ca și restul site-ului.</p>
<p>Orice fișiere <code>.js</code> din <code>siteweb/pagini</code> va fi redată către html static folosind calea către fișier după "pagini". 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>. Spre exemplu, pagina pentru fișierul <code>siteweb/pagini/en/ajutor.js</code> va fi găsită la url-ul <code>${baseUrl}en/ajutor.js</code> la fel ca și url-ul <code>${baseUrl}ajutor.js</code>, unde <code>${baseUrl}</code> este câmpul<code>baseUrl</code> setat în <ahref="/docs/ro/site-config">fișierul siteConfig.js</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>
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 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>
<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> 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>
<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> 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/ro/commands">start your server locally</a> and use your browser's inspect element tool.</p>
