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`),