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",