使用 Gatsby.js 搭建静态博客 1 关键文件

gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

// 页面创建函数
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;

  return new Promise((resolve, reject) => {
    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
    // 查询 md 文件构建页面
    // 此处查询使用的是 graphql，这也是 Gatsby 入门门槛较高的原因之一
    // 不过其实这是一个比 sql 更容易理解的查询语言
    resolve(
      graphql(`
        {
          allMarkdownRemark(limit: 1000) {
            edges {
              node {
                frontmatter {
                  path
                }
              }
            }
          }
        }
      `).then((result) => {
        if (result.errors) {
          reject(result.errors);
        }

        // 遍历查询结果生成页面
        result.data.allMarkdownRemark.edges.forEach(({ node }) => {
          const path = node.frontmatter.path;
          // 生成单个页面的函数
          createPage({
            path, // 页面路径
            component: blogPostTemplate, // 页面使用的模板
            // 这是注入上下文变量，注入后可以在模板页面中使用变量
            // 变量可以使用于 graphql 查询和 jsx 编写
            context: {
              path,
            },
          });
        });
      }),
    );
  });
};

// 注意其中 $slug，这也是被页面创建函数注入的上下文变量，没有前缀，直接使用即可
export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt
      html
      frontmatter {
        title
        tags
        date(formatString: "YYYY-MM-DD")
      }
    }
  }
`;