Gatsby从内容创建页面 - JavaScript

Gatsby是一个基于React的静态网站生成器，它可以通过一些插件来帮助我们快速构建静态网站。其中包括从远程数据源获取数据以及从Markdown文件中创建页面。在本篇文章中，我们将主要探讨如何使用Gatsby从Markdown文件中创建页面。

首先，我们需要安装gatsby-source-filesystem插件，它可以帮助我们从本地文件系统中读取数据。

{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'posts',
    path: `${__dirname}/src/posts/`
  }
}

在上面的配置中，我们将src/posts/目录下的所有Markdown文件称为名为“posts”的节点。现在我们可以使用GraphQL查询来获取这些节点的内容。

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
          date
        }
        html
        excerpt
        fields {
          slug
        }
      }
    }
  }
}

在上面的查询中，我们使用了allMarkdownRemark来获取所有Markdown节点，然后我们可以使用frontmatter，html和excerpt等字段来获取Markdown的元数据和内容。此外，fields.slug用于生成页面的URL。

现在让我们创建一个页面来显示我们刚刚获取的Markdown内容。

const path = require('path');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const blogPostTemplate = path.resolve('src/templates/blog-post.js');
  const result = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              title
              date
            }
            html
            excerpt
            fields {
              slug
            }
          }
        }
      }
    }
  `);

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: blogPostTemplate,
      context: {
        slug: node.fields.slug,
      },
    });
  });
};

在上面的代码中，我们使用了createPagesAPI来为每个Markdown节点创建一个页面。我们首先获取了Markdown节点的信息，然后将其传递给blog-post.js模板组件来展示。

import React from 'react';
import { graphql } from 'gatsby';

export default function Template({ data }) {
  const post = data.markdownRemark;

  return (
    <div>
      <h1>{post.frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </div>
  );
}

export const postQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`;

最后在blog-post.js组件中，我们使用了另外一个GraphQL查询来获取当前页面的Markdown内容和元数据，并将其渲染到页面上。

总结一下，使用Gatsby从Markdown文件创建页面非常容易，只需要几个简单的步骤就可以实现。首先，我们需要将Markdown文件作为gatsby-source-filesystem节点添加到Gatsby配置中，然后使用GraphQL查询来获取节点的内容，最后使用createPagesAPI将每个节点组件化并创建页面。