Zoomkoding Gatsby Blog 项目教程

Zoomkoding Gatsby Blog 项目教程

zoomkoding-gatsby-blog✍️ Simple & Neat UI & Full Featured Blog Template项目地址:https://gitcode.com/gh_mirrors/zo/zoomkoding-gatsby-blog

1. 项目的目录结构及介绍

Zoomkoding Gatsby Blog 项目的目录结构如下：

zoomkoding-gatsby-blog/
├── content/
│   ├── blog/
│   └── pages/
├── src/
│   ├── components/
│   ├── pages/
│   ├── templates/
│   ├── styles/
│   └── utils/
├── static/
├── gatsby-config.js
├── gatsby-node.js
├── package.json
└── README.md

目录结构介绍：

• content/: 存放博客内容和页面内容，包括 Markdown 文件和相关资源。
  • blog/: 存放博客文章的 Markdown 文件。
  • pages/: 存放自定义页面的 Markdown 文件。
• src/: 存放源代码文件。
  • components/: 存放 React 组件。
  • pages/: 存放页面组件。
  • templates/: 存放页面模板。
  • styles/: 存放样式文件。
  • utils/: 存放工具函数和常量。
• static/: 存放静态资源，如图片、字体等。
• gatsby-config.js: Gatsby 配置文件。
• gatsby-node.js: Gatsby Node API 文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要包括 gatsby-config.js 和 gatsby-node.js。

gatsby-config.js

gatsby-config.js 是 Gatsby 的主要配置文件，用于配置站点元数据、插件和其他设置。

module.exports = {
  siteMetadata: {
    title: `Zoomkoding Gatsby Blog`,
    description: `A simple and neat blog template.`,
    author: `@zoomkoding`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // other plugins...
  ],
}

gatsby-node.js

gatsby-node.js 文件用于处理 Gatsby 的 Node API，例如创建页面和修改 Webpack 配置。

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/blog-post.js`),
     

zoomkoding-gatsby-blog✍️ Simple & Neat UI & Full Featured Blog Template项目地址:https://gitcode.com/gh_mirrors/zo/zoomkoding-gatsby-blog