Gatsby Digital Garden 项目教程

Gatsby Digital Garden 项目教程

gatsby-digital-garden🌷 🌻 🌺 Create a digital garden with Gatsby项目地址:https://gitcode.com/gh_mirrors/ga/gatsby-digital-garden

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

Gatsby Digital Garden 项目的目录结构如下：

my-digital-garden/
├── src/
│   ├── pages/
│   ├── templates/
│   ├── components/
│   ├── images/
├── gatsby-config.js
├── gatsby-node.js
├── package.json
├── README.md

目录结构介绍

• src/：包含项目的源代码，包括页面、模板、组件和图片等。
  • pages/：存放页面组件，每个文件对应一个路由。
  • templates/：存放页面模板，用于生成动态页面。
  • components/：存放可重用的 React 组件。
  • images/：存放项目所需的图片资源。
• gatsby-config.js：Gatsby 的配置文件，用于配置站点元数据、插件等。
• gatsby-node.js：用于定义 Gatsby 构建过程中的节点操作。
• package.json：项目的依赖管理文件，包含项目的依赖和脚本命令。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

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

gatsby-config.js

gatsby-config.js 是 Gatsby 的主要配置文件，用于配置站点元数据、插件等。以下是一个示例配置：

module.exports = {
  siteMetadata: {
    title: `My Digital Garden`,
    author: `John Doe`,
    description: `A digital garden built with Gatsby.`,
    siteUrl: `https://www.mydigitalgarden.com`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: `pages`,
      },
    },
  ],
};

gatsby-node.js

gatsby-node.js 用于定义 Gatsby 构建过程中的节点操作。以下是一个示例：

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions;
  const blogPostTemplate = require.resolve(`./src/templates/blog-post.js`);

  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `);

  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`);
    return;
  }

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.path,
      component: blogPostTemplate,
      context: {}, // additional data can be passed via context
    });
  });
};

3. 项目的配置文件介绍

项目的配置文件主要包括 gatsby-config.js 和 package.json。

gatsby-config.js

如前所述，gatsby-config.js 是 Gatsby 的主要配置文件，用于配置站点元数据、插件等。

package.json

package.json 是项目的依赖管理文件，包含项目的依赖和脚本命令。以下是一个示例：

{
  "name": "my-digital-garden",
  "version": "1.0.0",
  "private": true,
  "description": "A digital garden built with Gatsby.",
  "author": "John Doe",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",

gatsby-digital-garden🌷 🌻 🌺 Create a digital garden with Gatsby项目地址:https://gitcode.com/gh_mirrors/ga/gatsby-digital-garden