Gatsby Source Strapi 项目教程

幸愉旎Jasper

于 2024-09-09 08:23:01 发布

阅读量897

点赞数 11

本文链接：https://blog.csdn.net/gitblog_00388/article/details/142040181

版权

Gatsby Source Strapi 项目教程

gatsby-source-strapiGatsby source plugin for building websites using Strapi as a data source项目地址:https://gitcode.com/gh_mirrors/ga/gatsby-source-strapi

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

gatsby-source-strapi/
├── src/
│   ├── nodes/
│   │   ├── index.js
│   │   ├── strapi-entry.js
│   │   ├── strapi-single-type.js
│   │   └── strapi-collection-type.js
│   ├── utils/
│   │   ├── api.js
│   │   ├── fetch.js
│   │   └── normalize.js
│   ├── gatsby-node.js
│   └── index.js
├── gatsby-config.js
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

src/: 项目的主要源代码目录。
- nodes/: 包含用于创建 Gatsby 节点的文件。
  - index.js: 主入口文件，负责初始化节点创建。
  - strapi-entry.js: 处理 Strapi 条目的节点创建。
  - strapi-single-type.js: 处理 Strapi 单类型内容的节点创建。
  - strapi-collection-type.js: 处理 Strapi 集合类型内容的节点创建。
- utils/: 包含工具函数文件。
  - api.js: 处理与 Strapi API 的交互。
  - fetch.js: 负责从 Strapi API 获取数据。
  - normalize.js: 负责规范化从 Strapi 获取的数据。
- gatsby-node.js: Gatsby 构建过程中的节点创建逻辑。
- index.js: 项目的入口文件。
gatsby-config.js: Gatsby 配置文件，包含插件配置和其他全局设置。
package.json: 项目的依赖管理文件。
README.md: 项目的说明文档。
yarn.lock: 锁定依赖版本的文件。

2. 项目的启动文件介绍

`gatsby-node.js`

gatsby-node.js 是 Gatsby 构建过程中的关键文件，负责在构建过程中创建和处理节点。以下是该文件的主要功能：

创建节点: 通过调用 createNode 方法，将从 Strapi API 获取的数据转换为 Gatsby 节点。
数据获取: 使用 fetch.js 中的工具函数从 Strapi API 获取数据。
数据规范化: 使用 normalize.js 中的工具函数对获取的数据进行规范化处理。

`index.js`

index.js 是项目的入口文件，负责初始化插件并注册节点创建逻辑。以下是该文件的主要功能：

插件初始化: 初始化 Gatsby 插件，并注册节点创建逻辑。
配置加载: 加载 gatsby-config.js 中的配置，并将其应用于插件。

3. 项目的配置文件介绍

`gatsby-config.js`

gatsby-config.js 是 Gatsby 项目的配置文件，包含插件配置和其他全局设置。以下是该文件的主要内容：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL: `http://localhost:1337`,
        queryLimit: 1000,
        contentTypes: [`article`, `user`],
        singleTypes: [`siteConfig`],
        loginData: {
          identifier: "",
          password: "",
        },
      },
    },
  ],
};