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, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.