Gatsbyjsのダイナミックなページ生成

7749 ワード
personalsite pagegeneration gatsby graphql テキストリンク
の写真ですisaac sloman on Unsplash "
🔔 この記事はもともと私のサイトに掲載されました.MihaiBojin.com . 🔔
最近、私は自分のサイトのコンテンツを生成することに熱心に取り組んでいます.当然のことながら、それは複数のカテゴリに分類されます.
私は、ページを貼り付けて、タイトル、説明とGraphSQL質問を変えて、私の好みに対して少しあまりに多くをコピーしているとわかりました.
私はインスピレーションを感じなかった!
そして、より良い何かをすることに決めました.
ここでは、一般的なテンプレートを使用して動的にカテゴリページを生成しました.

Gatsby設定でカテゴリメタデータを作成します。js

First, I defined my categories in gatsby-config.js 's siteMetadata array.

  "categories": [
    {
      "title": "Blog",
      "href": "/blog",
      "description": "My blog. I write about my journey as a software engineering lead and content creator.",
      "pageHeading": "From the blog",
      "pageSubtitle": "Explore some of my blog posts as I embark on a journey to build my site from scratch using GatsbyJS and TailwindUI."
    },
    ...
  ]

Gatsbyノードのページを動的に作成します。js

Then, I extended Gatsby's page creation API:

exports.createPages = async ({ graphql, actions, reporter }) => {
  await createCategoryPages({ graphql, actions, reporter }); // a new async function I created
};

I split various functionality by context. I defined one function responsible for creating categories.

async function createCategoryPages({ graphql, actions, reporter }) {
  const { createPage } = actions;

  // logic here, see below
}

I loaded the site's metadata in the function's body; I needed information about my categories and the author.

  const result = await graphql(
    `
      {
        site {
          siteMetadata {
            categories {
              title
              href
              description
              pageHeading
              pageSubtitle
            }
            author {
              name
              href
            }
          }
        }
      }
    `,
  );

Next, a validation step. I have skipped the validation code, but basically, it's a null check on these objects, followed by a call to reporter.warn or reporter.panicOnBuild .

  const siteMetadata = result.data.site?.siteMetadata;
  const categories = siteMetadata?.categories;
  const author = siteMetadata?.author;

Since the component doesn't change, I cached it before iterating.

  const component = path.resolve(`./src/components/category.js`);

Finally, I iterated through all my categories to create each page.

  categories.forEach((page) => {
    createPage({
      path: page.href,
      component,
      context: {
        ...page,
        author,
      },
    });
  });
Note: the component will need to load a list of articles for each category. Since the site has articles in multiple categories, we need to pass something to construct the correct query. In Gatsby, this is achieved by passing data via the page's context. GraphQL page queries can make use of any variables passed by context .

カテゴリ別フィルター記事への変数の使用

For my site, I chose to filter by each category's title. I could have easily filtered by the category's href, but I don't plan on changing either much. Time will tell if this was the right choice...

I updated the old query:

query {
    allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
        filter: {
          frontmatter: {
            category: {
              title: { eq: "A category title" }
            }
          }
        }
    ) {
        nodes {
        ...
        }
    }
}

by giving it a name and passing the $title variable.

This variable gets automatically populated from the page's context - 🪄 magic 🪄!

query CategoryQuery($title: String!) {
    allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
        filter: {
          frontmatter: {
            category: {
              title: { eq: $title }
            }
          }
        }
    ) {
        nodes {
        ...
        }
    }
}

All I had left to do was to load the page's data and populate my template:

export default function Page({ data, pageContext }) {
  const {
    title,
    description,
    pageHeading,
    pageSubtitle,
    author,
  } = pageContext;
  const posts = data.allMarkdownRemark.nodes;
  return (
    <>
        ...
    </>
  );
}

Et voila! Dynamically generated pages:
  • Blog
  • Coding Puzzles
  • Individual Contributors
    • 閉じるこの動画はお気に入りから削除されています.please subscribe to my newsletter ; 私は数週間ごとに1つを送信!
    競馬
    SQL Server 2016におけるIn-Memory OLTPのCTP 3に続く新たな改良