Custom Pages · Docusaurus

Вы можете добавить страницы на свой сайт, которые не являются частью стандартной документации или блога в формате markdown. Вы можете это сделать, добавив .js файлы в каталог website/pages. Эти файлы представляют собой компоненты React, создаваемые с помощью метода render(), в котором указываются CSS классы и прочее.

Настройка домашней страницы

Простейший способ начать настройку домашней страницы - использовать образец сайта, который создастся при запуске сценария инициализации Docusaurus.

Вы можете запустить свой локальный сервер и перейти по адресу http://localhost:3000, чтобы посмотреть, как выглядит образец домашней страницы. Затем измените файл website/pages/en/index.js и его компоненты, чтобы в дальнейшем использовать необходимые вам изображения и текст в вашем проекте.

Добавление других пользовательских страниц

Docusaurus предоставляет несколько простых примеров таких страниц в каталоге website/pages/en, включая index.js, users.js, и help.js. Это хорошие примеры того, как создать пользовательскую страницу в Docusaurus.

root-directory
├── docs
└── website
    ├── blog
    ├── core
    │   └── Footer.js
    ├── package.json
    ├── pages
    │   └── en
    │       ├── help.js
    │       ├── index.js
    │       └── users.js
    ├── sidebars.json
    ├── siteConfig.js
    └── static

Конечно, вы также можете создавать собственные страницы. Настоятельно рекомендуется создать хотя бы главную, однако ни одна из представленных видов страниц не обязательна для добавления на сайт. Больше информации о том, как использовать представленные компоненты или включить свой собственный, вы можете найти здесь. Информация о том, как создать ссылки на свои страницы в навигационном меню, может быть найдена здесь.

Для того, чтобы ссылка на вашу страницу отобразилась в навигационном меню, вам необходимо изменить siteConfig.js, добавив в него элемент headerLinks. , например { page: 'about-slash', label: 'About/' },

Добавление статических страниц

Также могут быть использованы статические .html файлы, но они не будут содержать шапку Docusaurus, футер или стили по-умолчанию. Эти файлы могут быть добавлены в каталог static так же, как и другие статистические ресурсы. Кроме того, они могут быть размещены в каталоге pages и будут включены "как есть" вместо обработки и отрисовки через React.

Если вы желаете использовать стили Docusaurus, вы можете получить доступ к ним по адресу ${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.

Вы можете указать параметр конфигурации сайта $wrapPagesHTML, чтобы дополнить сырые фрагменты HTML стилями сайта Docusaurus, шапкой и футером.

Настройка футера вашего сайта

Начиная с примера файла core/Footer.js, созданного при выполнении сценария инициализации Docusaurus, измените футер, чтобы добавить какие-либо ссылки на страницы вашего сайта или других сайтов, на которые вы желаете указать.

В приведенном примере имеются три столбца с иконкой-значком слева, логотипом открытого исходного кода Facebook и ссылкой на авторские права снизу. Если ваш проект не является проектом Facebook с открытым исходным кодом, удалите логотип и ссылку на авторские права. В противном случае, не стесняйтесь эксперементировать с вашим футером и придать ему любой вид, какой только пожелаете!

Вот несколько предложений для ссылок, которые вы можете добавить: документация, API, Twitter, Discord, группы Facebook, Stack Overflow, GitHub и другое.

Ваш футер будет автоматически добавлен ко всем страницам на вашем сайте, включая документацию и сообщения блога. Единственным исключением являются любые статические HTML-страницы, которые вы подключаете.

Если вам на вашем сайте не нужен футер, изменить метод render в файле core/Footer.js, чтобы он возвращал null. Например:

const React = require('react');

class Footer extends React.Component {
  render() {
    return null;
  }
}

module.exports = Footer;