Custom Pages
You can add pages to your site that are not part of the standard docs or blog markdown files. You can do this by adding .js
files to the website/pages
directory. These files are React components and the render()
is called to create them, backed by CSS classes, etc.
Personalizând pagina de Acasă
The easiest way to get started customizing your home page is to use the example site that was created when you ran the Docusaurus initialization script.
You can start your local server and go to http://localhost:3000
to see what the example home page looks like. De aici, editează fișierul siteweb/pagini/en/index.js
și componentele sale variate pentru a utiliza imaginile și textul pe care le dorești pentru proiectul tău.
Adăugarea altor Pagini Personalizate
Docusaurus provides some helpful example pages in the website/pages/en
directory, including index.js
, users.js
, and help.js
. These are good examples to showcase how to create a custom page for Docusaurus.
root-directory
├── docs
└── website
├── blog
├── core
│ └── Footer.js
├── package.json
├── pages
│ ├── index.js
│ ├── users.js
│ └── help.js
├── sidebars.json
├── siteConfig.js
└── static
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. Mai multă informație despre cum să utilizezi componentele furnizate sau să le incluzi pe ale tale poate fi găsită aici. Informație despre cum să link-uiești diferite pagini în bara de navigație pot fi găsite aici.
If you want your page to show up in your navigation header, you will need to update
siteConfig.js
to add to theheaderLinks
element. e.g.,{ page: 'about-slash', label: 'About/' }
,
Adaugând pagini statice
Static .html
files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the static
directory in the same way as other static assets. Alternatively, they can be placed in the pages
directory and would be served as-is instead of being rendered from React.
If you wish to use Docusaurus' stylesheet, you can access it at ${baseUrl}css/main.css
. 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 siteConfig.separateCss
field in siteConfig.js
.
You can set the
$wrapPagesHTML
site config option in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.
Personalizând footerul site-ului tău
Starting from the example core/Footer.js
file that was created when you ran the Docusaurus initialization script, edit the footer to include any links to pages on your site or other sites that you wish to have.
Exemplul furnizat are trei coloane cu o imagine footer pe partea stângă și logo-ul open source Facebook și copyright-ul în josul paginii. Dacă proiectul tău nu este un proiect open source Facebook, elimină logo-ul și copyright-ul. Altfel, simte-te liber să devii creativ cu footer-ul tău și să îl faci să arate exact așa cum dorești!
Niște sugestii de link-uri pe care ai vrea să le furnizezi: documentație, API, Twitter, Discord, Facebook, Stack Overflow, GitHub, etc.
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.
If you do not want a footer for your site, change the render
function of core/Footer.js
to return null
. e.g.,
const React = require('react');
class Footer extends React.Component {
render() {
return null;
}
}
module.exports = Footer;