Я давно рассмотрел пробуждение блога. Теперь я наконец-то пошел.
Этот первый пост состоит в том, как я создал эту функцию блога в моем сайте с помощью GATSBY и MDX. Для фонового контекста я построил этот сайт около двух лет назад, используя GATSBY. Учитывая, что это, по сути, это одна приземляция с различными социальными связями, используя GATSBY, не была полностью необходима, но я искал оправдание, чтобы попробовать это. Быстро вперед два года, я решил сделать дальнейшее использование GATSBY и использовать его, чтобы добавить блог на сайт. Вот как я пошел об этом.
Обзор
Основная идея этого проекта заключается в использовании плагинов GATSBY и API для динамически генерирования страниц блога из файлов MDX в нашем проекте. После того, как наш проект настроен, добавление нового поста блога будет так же легко, как создание нового файла MDX. Плагины, которые мы используем, включают в себя GATSBY-Source-filesystem плагин и gatsby-plugin-mdx вместе с Createpages API узла GATSBY. После того, как настроив их, мы затем кратко посмотрите, как шаблон наши посты и стиль наших элементов MDX. Так как вся эта работа? Давайте прыгнем.
Примечание. Этот пост блога предполагает базовые GATSBY и реагировать на знания. Если вы не знакомы с GATSBY, есть Великий учебник серии Доступно на сайте GATSBY, чтобы добраться до скорости. Кроме того, я не буду устанавливать проект вверх по шагу за шагом, но предоставит достаточно информации, которую вы можете легко интегрировать аналогичную функцию блога в любой существующий проект GATSBY.
Настройка
Наше первое требование – GATSBY-Source-filesystem плагин. Что этот плагин позволяет нам сделать, это использовать файловую систему нашего проекта в качестве источника для данных в нашем приложении. Мы создадим Сообщения каталог, который будет хранить наши файлы MDX. Затем мы будем использовать GATSBY-Source-filesystem Чтобы запросить эти файлы и преобразовать контент в блог.
Наше второе требование будет gatsby-plugin-mdx плагин. Это официальная интеграция для использования MDX в рамках GATSBY. Если вы не знакомы с MDX, это по сути, это формат файла, который позволяет объединить стандарт Реклама с Jsx. . Я не буду уходить в значительной деталь, но это довольно аккуратно, особенно если вы являетесь разработчиком реагирования и используются для записи JSX. Вы можете прочитать больше о MDX здесь. Это формат файла, который мы будем использовать для записи наших постов.
После Установка Оба плагина, мы можем настроить их в наших gatsby-config.js файл следующим образом.
module.exports = {
...,
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts/`,
},
},
`gatsby-plugin-mdx`,
],
}
путь Значение вот SRC/посты/ Вот где я буду хранить свои файлы MDX. Эта конфигурация говорит GATSBY, чтобы запросить этот конкретный каталог для данных.
Теперь, когда у нас настроен наш проект, наш проект готов к запросу файлов MDX и превратить их в страницы блога. Но как мы говорим это сделать это?
Ответ – Гэтсби Createpages API. Если вы знакомы с GATSBY, вы знаете, что по умолчанию GATSBY CORE создает страницы для любых реакций файлов, которые он находит в SRC/страницы/ каталог. Точно так же этот API позволяет нам проинструктировать GATSBY создавать дополнительные страницы на основе указанных вами критериев. Когда все сказано и сделано, наше gatsby-node.js Файл (расположенный в корневом каталоге проекта) будет выглядеть следующим образом:
const path = require("path")
exports.createPages = async ({ graphql, actions, reporter }) => {
// destructure the createPage function from the actions object
const { createPage } = actions
const result = await graphql(`
query {
allMdx {
edges {
node {
id
frontmatter {
slug
}
}
}
}
}
`)
if (result.errors) {
reporter.panicOnBuild('🚨 ERROR: Loading "createPages" query')
}
// create blog post pages
const posts = result.data.allMdx.edges
// call `createPage` for each result
posts.forEach(({ node }, index) => {
createPage({
path: node.frontmatter.slug,
component: path.resolve(`./src/components/posts-page-layout.js`),
// you can use the values in this context in
// our page layout component
context: { id: node.id },
})
})
}
В указанном выше коде мы впервые запрашиваем нашу файловую систему для файлов MDX, начиная с строки 7. Они будут находиться в каталоге, который мы указали в нашей более ранней конфигурации. Каждый узел в нашем результатах запроса представляет собой файл MDX, который был найден.
Затем начиная с строки 30, для каждого файла MDX (или «пост») мы называем Createpage проезжая это путь Значение, которое будет служить нашим потенциальным URL, A Компонент Значение, которое будет использоваться в качестве нашей страницы шаблона, а контекст Объект, который может удерживать дополнительные данные, которые должны быть доступны для нас в нашем компоненте шаблона.
Возможно, вы заметили, что в строке 13, в каждом результате файла мы ожидаем чего-то под названием Frontmatter Отказ Frontmatter Набор пар клавишных пар, которые можно использовать для предоставления дополнительных данных о файле. В нашем случае мы собираемся использовать Frontmatter для хранения информации о блоге, включая подробности, такие как наши посты названия, слизняки, дата, автор и многое другое. Frontmatter обозначается в файле разметки тремя тиреми в начале и конце блока.
Создание постов из файлов MDX
Теперь, когда проект настроен на динамически создавать страницы из файлов MDX, нам нужно создать наш файл MDX в каталоге, который мы указали наш GATSBY-Source-filesystem Конфигурация ( SRC/посты/ ). Если вы используете Slug Пара Frontmatter для значений ключа для вашего путь Значение, как мы такое, имя файла не так важно, пока это файл MDX. Для консистенции я дам ему то же самое имя, что и слизняк ( SRC/Posts/Building-a-blog-с gatsby-and-mdx.mdx ). Сделайте специальную ноту Frontmatter в верхней части файла, расположенного между --- строки Slug Значение – это то, что сделает ваш пост доступным в http:// Отказ Мы будем использовать остальные данные Frontmatter в нашей странице шаблон.
--- title: Building a blog with Gatsby and MDX slug: building-a-blog-with-gatsby-and-mdx author: Adam Goth --- Blog content here...
Последний недостающий кусок, который наш Createpages Функция ожидает, что компонент шаблона, который мы указали как Компонент ценность в нашем Createpage вызов. Значение, которое мы прошли, это ./src/components/posts-page-layout.js Так что давайте пойдем вперед и создадим этот файл.
import React from "react"
import { graphql } from "gatsby"
import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../components/layout"
import components from "./mdxComponents"
export default function PageTemplate({ data: { mdx } }) {
return (
{mdx.frontmatter.title}
{`${mdx.frontmatter.date} by ${mdx.frontmatter.author}`}
{mdx.body}
)
}
export const pageQuery = graphql`
query BlogPostQuery($id: String) {
mdx(id: { eq: $id }) {
id
body
frontmatter {
title
date
author
}
}
}
`
Есть несколько вещей, которые нужно отметить здесь. Если вы знакомы с GATSBY и реагируете, ничто не должно выглядеть не слишком обычным здесь. Начиная с линии 27, мы используем запрос GraphQL, называемый BlogpostQuery Чтобы запросить нашу файловую систему для файла MDX с соответствующим ID Отказ я D генерируется в нашем Createpages функция и передается через контекст Параметр на нашей странице шаблон компонента. Из результатов мы получаем наши Тело и Frontmatter Данные для сообщения в блоге из нашего файла MDX. Затем мы можем получить доступ к данным запроса в нашем компоненте через реквизиты нашего компонента (см. Линию 8 выше).
Содержание в стиле MDX
Если бы мы хотели сделать данные о теле и передних вещественных веществах как простые элементы HTML в нашем JSX, мы могли бы продолжать и сделать это в наших Шаблон страницы компонент выше. На самом деле, именно то, как заголовок оказывается на линии 12. Но @ MDX-JS/Rect и gatsby-plugin-mdx предоставить нам
В приведенном выше блоке кода мы импортируем Компоненты от './mdxcomponents' и проезжая в Компоненты опоры на
Например, в Markdown и MDX стандартная линия текста отображается как параграф ( ) элемент. Но для моих постов я хочу, чтобы ваши элементы абзаца содержат определенную высоту линии, отличную от по умолчанию. Я также хочу предоставить свой собственный маржу и свойства ширины. То, как это может быть достигнуто, является создание пользовательских Пункт Компонент MDX и передача его в Компоненты опоры Mdxprovider/> Отказ
В моем SRC/Компоненты/MDXComponents каталог, у меня есть Paps.js Файл, который выглядит следующим образом:
import React from "react"
export default ({ children }) => {children}
В том же SRC/Компоненты/MDXComponents каталог, у меня также есть index.js Файл, который экспортирует компонент из Paps.js Как и все другие элементы, которые я создал индивидуальные компоненты MDX для. Затем я импортирую это как объект с именем Компоненты и передать его на Тело Из наших файлов MDX затем передаются как дети опоры
Упаковка
Это завершает процесс для того, как я построил функцию блога, а также в своем блоге, который вы читаете. Использование плагинов GATSBY GATSBY-Source-filesystem и gatsby-plugin-mdx вместе с GATSBY’S Createpages API, мы можем использовать файлы MDX для динамически генерирования страниц для сообщений блога. Сдвиньте вперед, для моего следующего поста, все, что мне нужно будет сделать, это напишите новый файл MDX и добавьте его в SRC/посты/ . Я в конечном итоге планирую добавлять дополнительные функции, такие как теги, категории, поиск, и кто знает, что еще. Так что, если вы также заинтересованы в этом, остайтесь настроенными!
Если вы заинтересованы в просмотре исходного кода для проекта, Репозиторий Для моего сайта публично доступно на Github.
Если вам понравился этот пост или нашел его полезным, пожалуйста, рассмотрите возможность Разделить его в Twitter Отказ
Если вы хотите остановиться в обновлении на новых сообщениях, Подпишись на меня в Твиттере
Если у вас есть какие-либо вопросы, комментарии или просто хотите сказать привет, Пришлите мне сообщение Отказ
Спасибо за чтение!
Оригинал: “https://dev.to/adamgoth/building-a-blog-with-gatsby-and-mdx-2eh9”