Создание сайта блога с помощью Gatsby JS — Часть 3 (Gatsby Plugin Mdx)
В частности, прежде чем мы закончим создание домашней страницы с несколькими компонентами, на домашней странице будет отображаться блог. но это все еще статически, здесь мы будем использовать gatsby-plugin-mdx для преобразования уценки в страницы.
Создание сайта блога с помощью Gatsby JS — Часть 1 (Начало работы)
Создание сайта блога с помощью Gatsby JS — Часть 2 (интерфейс Chakra и домашняя страница)
Создание сайта блога с помощью Gatsby JS — Часть 3 (Gatsby Plugin Mdx)
Создание сайта блога с помощью Gatsby JS — Часть 4 (React Helmet и тег SEO)
Создание сайта блога с помощью Gatsby JS — Часть 5 (Развертывание сайт на Netlify)
Вот шаги, которым следует Гэтсби, чтобы это произошло.
- Чтение файлов в Gatsby из файловой системы
- Преобразование Markdown в HTML и передний план в данные
- Добавить файл уценки
- Создайте компонент Collection Route для файлов Markdown.
Установить
npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem
Настроить плагин
Исходная файловая система Gatsby
добавьте следующий код внутри plugins на gatsby-config.js
Плагин Gatsby Mdx
Вы будете использовать плагин gatsby-plugin-mdx для распознавания файлов в формате Markdown и чтения их содержимого. Плагин преобразует часть метаданных переднего плана ваших файлов Markdown frontmatter и часть содержимого в HTML.
Добавить файл уценки
Создайте каталог /src/blogs и создайте имя файла first-post.md .
Метаданные Frontmatter
Когда вы создаете файл Markdown, вы можете включить набор пар ключ/значение, которые можно использовать для предоставления дополнительных данных, относящихся к определенным страницам на уровне данных GraphQL. Эти данные называются «впереди» и обозначаются тройными тире в начале и в конце блока. Этот блок будет проанализирован gatsby-transformer-remark YAML. Затем вы можете запросить данные через GraphQL API из ваших компонентов React.
Создайте маршрут сбора для файлов Markdown
Создайте файл /src/pages/{mdx.slug}.jsx.
Имя файла {mdx.slug} означает, что Гэтсби указывает, является ли поисковый запрос из запроса GraphQL, см. текст, выделенный жирным шрифтом ниже.
query($id: String!) {
mdx(id: { eq: $id }) {
body
slug
timeToRead
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
cover
}
}
}
Gatsby найдет файлы уценки, которые были зарегистрированы ранее, и, если они совпадают с слагом, отобразит страницу.
Если вы не знаете о graphql в Gatsby JS, вы можете посетить страницу http://localhost:8000/___graphiql и написать запрос, чтобы показать все данные уценки.
По сути, Gatsby предоставляет сервер GrapQL и клиентский инструмент, с помощью которого мы можем использовать данные, такие как уценка, изображения и другие, с помощью функции graphql , а результатом являются данные в формате json.
Вернуться к основной теме
Поскольку мы используем пользовательский интерфейс Chakra, все основано на компоненте, поэтому мы используем <MdxProvider /> и устанавливаем пользовательский компонент, такой как h1-h6, изображение, абзац, в свойствах компонентов.
Внутри <MdxProvider> есть <MdxRenderer>, который преобразует метаданные из уценки в страницы JSX.
Откройте в браузере и перейдите по адресу http://localhost:8000/first-post.
Показать список блогов на главной странице
мы создали страницу для подробностей блога, мы добавим список блогов на домашнюю страницу
на /src/pages/index.jsx мы добавим запрос GraphQL для выбора файла уценки, который мы создали ранее.
обновить код
Откройте в браузере и перейдите на домашнюю страницу, там будет показан весь список блогов уценки, которые вы создали 👌.
Ссылка:
