Загрузка...
Преобразуем Markdown в HTML и синхронизируем с i18n
Сначала прочитайте статью про интернационализацию
Markdown - это упрощенный язык разметки, используемый для форматирования текста. Он позволяет вам писать, используя синтаксис обычного текста, и преобразовывать его в структурно корректный HTML. Он обычно используется для создания контента на веб-сайтах и в блогах.
Вы пишете...
Вывод:
MDX - это надмножество markdown, которое позволяет вам записывать JSX непосредственно в ваши файлы markdown. Это мощный способ добавить динамическую интерактивность и встроить компоненты React в ваш контент.
Функционал статей, навигация по главам и категории на этом сайте - это то, что получится в итоге (:
Просто создаёте папки с категориями и проектами внутри , перемещаете как угодно - всё сделается за вас, но сначала нужно объяснить кодом компу, что вам нужно 🧑💻
Так будет выглядеть структура ваших проектов, блогов или чего захотите:
Допустим, вы захотели создать новый проект в новой категории:
Почему не реализовать MDX как в документации Next.js? Почему не использовать готовые плагины по типу , и ?
Вы можете так и сделать, это будет намного проще, но вы потеряете часть контроля над процессом разработки. Конечно, намного больше контроля вы можете получить написав свой фреймворк вместо Next.js 😁 Но не будем уходить в крайности.
Так выглядит директория с основным функционалом MDX:
Создадим функцию для получение всех данных из .mdx файлов :
Можно было просто в каждом компоненте вызывать и получать контент с метаданными, но для расширяемости и поддерживаемости кода выносим получение всех данных в функцию .
Теперь мы можем спокойно изменить логику получения данных из MDX. Например, вместо спокойно поставить и т.п.
Внутри MDX файлов у нас отсутствует какая-либо типизация. Но для удобства всё равно типизируем:
Теперь самое интересное... Создаём свои компоненты на свой вкус и цвет в . Вот моя реализация компонентов, можете брать идеи!
Необязательно делать обёртку для , но нам же нужна гибкость? Вдруг мы резко захотим использовать не только в layout для MDX файлов, но и на другой странице?
Тут всё легко. Просто копируем и пользуемся. Сейчас расскажу для чего нужны эти плагины и почему мы не используем готовые решения.
Код плагина :
Не знаю почему, но готовый плагин у меня не работал, поэтому написал свой.
Структура файлов получения проектов:
Теперь мы пускаем в ход раннее созданную функцию и наслаждаемся лёгкостью получения данных с .mdx файлов. :
В комментариях к коду всё написано. :
Тут всё аналогично. Получаем данные с помощью и возвращаем данные :
Структура динамических роутов в :
Создадим layout для mdx :
Создадим страницу с проектами из определённой категории :
Спасибо, что прочитал до конца. Надеюсь ты нашёл ответы на свои вопросы и смог реализовать то, что планировал!
Если что-то не получается, то просто загляни в репозиторий моего проекта и проанализируй код. Почему у тебя не работает, а у меня работает? Может версии пакетов не те, или невнимательность зарешала 🤨
Ты же кодер (так ведь?) ищи решения!
projects
ru.mdx
en.mdx
ru.mdx
en.mdx
rehype-slug
rehype-autolink-headings
rehype-mdx-code-props
shared/config/mdx/get-mdx.ts
matter(fileContents)
getMdx()
gray-matter
front-matter
MDXComponentsData
MDXRemote
MDXRemote
rehypeAutoHeading
id
h1 - h6
rehype-slug
rehype-autolink-headings
rehypeAutoHeading
rehypeExtractCodeProps
ключ-значение
boolean
rehype-mdx-code-props
getMdx()
get-project.ts
get-projects-by-category.ts
getMdx(dir)
get-projects.ts
/app
app/[lang]/projects/[category]/[name]/page.tsx
app/[lang]/projects/[category]/page.tsx