ギャツビーとMDXでブログを構築すること

私は長いブログを試して検討した.今、私は最終的にそれを行っています.
この最初のポストは、私がどのようにこのブログ機能を私のサイトにギャツビーとMDXを使って構築したかについてです.バックグラウンドコンテクストのために、私は2年前にGatsbyを使ってこのサイトを作りました.それが本質的に様々なソーシャルリンクを持つ単一のランディングページであると仮定すると、ギャツビーを使用することは完全に必要ではありませんでした、しかし、私はそれを試す言い訳を探していました.早送り2年、私はGatsbyをさらに利用して、サイトにブログを加えるためにそれを活用することに決めました.ここでどのように私はそれについて行った.

概要
このプロジェクトの背後にある基本的な考え方は、GatsbyプラグインとAPIを使用して、動的にプロジェクト内のMDXファイルからブログページを生成することです.我々のプロジェクトが構成された後に、新しいブログポストを加えることは新しいMDXファイルを作成するのと同じくらい簡単です.使用するプラグインにはgatsby-source-filesystem プラグインとgatsby-plugin-mdx とともにcreatePages ギャツビーノードAPI.それらを設定した後、私たちは私たちの投稿とスタイルをMDX要素をテンプレートする方法を簡単に見ていきます.それでは、どのようにすべてこの作品ですか?ジャンプしましょう.
注:このブログのポストは、基本的なギャツビーと反応の知識を前提としています.あなたがギャツビーに慣れていないならばgreat tutorial series ギャツビーのサイトで利用可能な速度にあなたを取得します.また、私は、プロジェクトを段階的に設定することはできませんが、既存のGatsbyプロジェクトに簡単に類似したブログ機能を統合することができる十分な情報を提供します.

設定
我々の最初の要件はgatsby-source-filesystem プラグイン.このプラグインの許可は、プロジェクトのファイルシステムをアプリケーションのデータソースとして使用することです.私たちはposts MDXファイルを保存するディレクトリ.その後、我々は使用されますgatsby-source-filesystem これらのファイルを検索し、コンテンツをブログ記事に変換します.
我々の第2の要件はgatsby-plugin-mdx プラグイン.これは、gatsby内のmdxを使用するための公式の統合です.あなたがMDXに慣れていないならば、それは基本的に標準を結合することができるファイル形式ですMarkdown with JSX . 私は多くの詳細に行きません、しかし、特にあなたが反応開発者で、JSXを書くのに用いられるならば、それは非常にきちんとしています.あなたはもっと読むことができますMDX はい.これは、我々が我々のポストを書くために使うファイル形式です.
アフターinstalling 両方のプラグインは、我々はgatsby-config.js ファイルを以下のようにします.

module.exports = {
  ...,
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts/`,
      },
    },
    `gatsby-plugin-mdx`,
  ],
}

The path ここの値はsrc/posts/ ここでMDXファイルを保存します.この設定では、gatsbyにデータ用の特定のディレクトリを問い合わせます.
我々のプラグインが設定されたので、我々のプロジェクトはMDXファイルのために質問する準備ができていて、彼らをブログページに変えます.しかし、どのように我々はそれを行うに言うのですか?
答えはギャツビーのcreatePages API.Gatsbyをよく知っているなら、デフォルトでは、gatsby coreは、src/pages/ ディレクトリ.同様に、この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 },
    })
  })
}

上のコードでは、最初に7行目からMDXファイルのファイルシステムを問い合わせます.これらは以前の設定で指定したディレクトリにあります.クエリ結果の各ノードはMDXファイルです.
それから、各々のmdxファイル(または「POST」)のために、私たちは電話をしますcreatePage , Aを渡すpath 我々のポストのURLとして役立つ価値component ページテンプレートとして使用される値context 追加のデータを保持できるオブジェクトは、テンプレートコンポーネント内で利用可能になります.
あなたは13行目に、各ファイルの結果の中で、何かを期待していることに気づいたかもしれないfrontmatter . Frontmatter は、ファイルに関する追加のデータを提供するために使用できるキー値ペアの集合です.私たちのケースでは、我々は、ブログの詳細については、当社の投稿のタイトル、スラッグ、日付、著者などの詳細情報を格納するFrontMatterを使用するつもりです.FrontMatterは、ブロックの開始と終了時の3つのダッシュによって、Markdownファイルに示されます.

MDXファイルからの投稿の作成
プロジェクトがダイナミックにMDXファイルからページを作成するように設定されているので、我々はMDXファイルをgatsby-source-filesystem 設定src/posts/ ). を使用している場合slug あなたのためのFrontMatterキー値ペアpath 値はそのままですが、ファイルの名前はあまり重要ではありません.一貫性のために、私はそれをスラッグと同じ名前に与えますsrc/posts/building-a-blog-with-gatsby-and-mdx.mdx ). ファイルの上部にあるフロントエンドの特別な注意事項--- 行.The slug 値は、あなたのポストを利用できるようにするものですhttp://<yourdomain>/<slug> . 我々は、ページテンプレートのフロントエンドデータの残りの部分を使用します.

---
title: Building a blog with Gatsby and MDX
slug: building-a-blog-with-gatsby-and-mdx
author: Adam Goth
---

Blog content here...

我々の最後の欠けた部分createPages 関数は、component 我々の価値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 (
    <Layout>
      <div style={{ padding: "0 1rem", marginBottom: "10rem" }}>
        <h1>{mdx.frontmatter.title}</h1>
        <h4
          style={{
            color: "gray",
            fontWeight: "normal",
          }}
        >{`${mdx.frontmatter.date} by ${mdx.frontmatter.author}`}</h4>
        <MDXProvider components={components}>
          <MDXRenderer>{mdx.body}</MDXRenderer>
        </MDXProvider>
      </div>
    </Layout>
  )
}

export const pageQuery = graphql`
  query BlogPostQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      body
      frontmatter {
        title
        date
        author
      }
    }
  }
`

ここで注意することはいくつかあります.あなたがギャツビーに精通していて、反応するならば、何もここで普通に見えなければなりません.行27から始めて、GraphSQLクエリを使用しますBlogPostQuery MXXファイルのファイルシステムのマッチングを問い合わせるid . The id が生成されますcreatePages 関数は、context ページテンプレートコンポーネントへのパラメーター.結果から、我々は我々を得ますbody and frontmatter 我々のMDXファイルからのブログ柱のためのデータ.コンポーネントの小道具(上記の8行目)を通して、コンポーネントのクエリデータにアクセスできます.

スタイリングMDXコンテンツ
我々が我々のJSXの範囲内でプレーンとHTMLデータをプレーンHTML要素として描きたかったならば、我々は進んで、我々の中でそれをすることができましたPageTemplate 上記コンポーネント.実際には、タイトルは12行目に表示されます.でも@mdx-js/react and gatsby-plugin-mdx 提供する<MDXProvider /> and <MDXRenderer /> コンポーネント.これらのコンポーネントは、MDXコンテンツのスタイルをカスタマイズできます.見てみましょう.
上記のコードブロックではcomponents から'./mdxComponents' そして<MDXProvider /> . このcomponents プロップオン<MDXProvider /> マークダウン要素の種類ごとにカスタマイズされたコンポーネントを渡すことができます.
たとえば、MarkdownとMDXでは、テキストの標準行が段落としてレンダリングされます<p> ) 要素.しかし、私のポストのために、私の段落要素はデフォルトとは異なった線高さを含むことを望みます.私も自分のマージンと幅のプロパティを提供したい.この方法は、カスタムを作成することですparagraph MDXコンポーネントとcomponents プロップMDXProvider /> .
インマイsrc/components/mdxComponents ディレクトリにはparagraph.js 以下のようなファイルです.

import React from "react"

export default ({ children }) => <p style={{ lineHeight: "1.7", maxWidth: "750px", margin: "30px auto" }}>{children}</p>

同じsrc/components/mdxComponents ディレクトリもありますindex.js コンポーネントをエクスポートするファイルparagraph.js 他のすべての要素と同様に私はカスタマイズMDXコンポーネントを作成している.それから、私はそれという名前のオブジェクトをインポートしますcomponents そして、<MDXProvider /> . The body MDXファイルデータはchildren プロップ<MDXRenderer /> 行20では、これらのコンポーネントを使用するとMDXのコンテンツをレンダリングします.段落要素に加えて、MDXでカスタマイズできる他の要素の完全なリストを見つけることができますhere .

ラッピング
それは私がどのようにブログ機能を構築したのプロセスを終了するだけでなく、非常にブログの記事を読んでいる.プラグインの使用gatsby-source-filesystem and gatsby-plugin-mdx , ギャツビーのcreatePages APIは、我々は動的にブログの記事のページを生成するためにMDXファイルを使用することができます.私の次のポストのために、私がする必要があるすべては、新しいmdxファイルを書いて、それを加えますsrc/posts/ . 私は最終的にタグ、カテゴリ、検索などの追加機能を追加する計画、誰が何を知っている.それで、あなたが同様にそれに興味があるならば、調整してください!
プロジェクトのソースコードを表示する場合は、repository 私のサイトはGithubで公開されています.
あなたがこのポストを楽しんでいるか、役に立つとわかるならば、考えてください.
あなたが新しいポストで更新されるままでいるならば、.
何か質問、コメント、または単に挨拶をしたい場合.
読書ありがとう!