Docusaurus — это генератор статических сайтов, помогающий быстро создать сайт документации, позволяющий пользователям сосредоточиться на его содержимом, а не на технических деталях, с помощью текстовых редакторов, таких как VSCode, или систем управления контентом (CMS), таких как WordPress. Strapi и Netlify CMS.

Авторы контента могут использовать эти инструменты и сохранять содержимое в файлах уценки, и он имеет множество готовых функций, соответствующих вашим потребностям.

Настройка Докузавра

По этой причине настройка функций в Docusaurus поначалу может стать головной болью: здесь много готовых функций!

Но как только вы поймете, как все работает с Docusaurus, мне это действительно понравится. Многие люди даже не думали, что React настолько хорош, когда он впервые появился, а теперь это самый популярный JS-фреймворк в мире, верно? (Я тогда еще не была разработчиком, но этот документальный фильм о React был настолько интересным, что я попросила мужа посмотреть его вместе со мной. 🍿 Оказывается, в документальном фильме снимался наш друг, но это история для другого разговора…)

Что такое Свиззлинг...?

Swizzling — это специальный термин в Docusaurus: функция, которая позволяет вам настраивать встроенные компоненты и функции так, чтобы они лучше соответствовали вашим конкретным потребностям.

Увещевания

Увещевания в уценке выглядят, как показано ниже ⬇️

Код вышеприведенного выглядит так ⬇️

:::info title goes here
content goes here
:::

Пользовательские предупреждения

В Docusaurus имеется 5 встроенных предупреждений: «примечание», «совет», «информация». , «осторожно» и «опасно».

Чтобы добавить собственные предупреждения, выполните следующие действия 🏁

Шаг 1.Добавьте слова в массив ключевых слов в docusaurus.config.js.

Эти ключевые слова будут использоваться для вызова предупреждений.
Здесь: вопрос, подкаст, информационный бюллетень, компания. >, внести и книга.

Шаг 2. Добавьте собственный CSS в src/theme/Admonition/styles.module.css.

Если файла еще нет, нужно прошить компонент. (Подробнее о свизлинге см. здесь).

Чтобы добавить собственный CSS к новому предупреждению, вы просто используете ключевое слово в качестве селектора. Например, для «подкаста» это будет .podcast.

.podcast {
  border-left: 5px solid yellow;
  background-color: rgb(250, 250, 234);
}

Шаг3. Добавьте функцию ключевого словаIcon в src/theme/Admonition/index.js.

import { MdPodcasts } from 'react-icons/md'

function PodcastIcon() {
  return (
    <MdPodcasts
      title="Podcast Icon"
      style=""
    />
  )
}

Я использую react-icons, поэтому в данном случае я импортирую значок из библиотеки, а затем использую его для создания функции PodcastIcon()function, которая просто возвращает значок с заголовком.

Шаг 4. Добавьте ключевое слово к объекту AdmonitionConfigs в index.js.

Для других ключевых слов просто измените место, где написано podcast, на другое.

Шаг 5. Добавьте новые в Admonition() в index.js.

Для podcast я добавил const isPodcastAdmonition = type === ‘podcast’; и [styles.podcast]: isPodcastAdmonition в переменную admonitionClassName и сделал то же самое для других ключевых слов.

Шаг 5️⃣ Тест 🚀

После того, как все вышеперечисленное будет сделано, добавьте код предупреждения (:::keyword title content :::) в любой файл уценки, который вы хотите протестировать, и вы сможете увидеть свои собственные предупреждения с ключевыми словами и значками, как показано ниже 🎉

Предостережение: не забудьте перезапустить сервер, когда мы внесли изменения в файл конфигурации!

Примеры были из моего опыта работы с Справочником по климатическим технологиям.

Пожалуйста, подпишитесь на них в LinkedIn!

Стеккадемический

Спасибо, что дочитали до конца. Прежде чем уйти:

  • Пожалуйста, рассмотрите возможность аплодировать и следовать автору! 👏
  • Подпишитесь на нас в Twitter(X), LinkedIn и YouTube.
  • Посетите Stackademic.com, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.