Gatsby是一个惊人的静态站点生成框架。建立在React.js之上,它已经存在了大约几年,而且很稳定。

最近,我的同事James Vidler为Agility CMS写了一个Gatsby Source Plugin。它允许您使用 Gatsby 构建网站,内容直接从 Agility 的 Headless Content API 中提取 - 包括动态页面路由。

让我们来看看!

创建免费敏捷账户

只需一分钟即可创建 Agility CMS 帐户,并且永远免费。在这里注册。

创建您的帐户后,我们需要获取您的 GUID 和 API 密钥。

获取代码

确保你安装了 Gatsby CLI 工具(我们在这里使用 npm ......)

npm install -g gatsby-cli

进入全屏模式 退出全屏模式

继续从 GitHub 上克隆启动器存储库,其中包含您开始所需的所有代码。

git clone https://github.com/agility/agility-gatsby-starter.git

进入全屏模式 退出全屏模式

解决任何依赖关系

npm install

进入全屏模式 退出全屏模式

在开发模式下运行它!

gatsby develop

进入全屏模式 退出全屏模式

该站点只是一个初学者,但它具有许多有趣的功能,您可以使用这些功能进行构建。让我们将此代码连接到您刚刚创建的新 Agility CMS 实例。

将它连接到您的 Agility CMS 实例

编辑 gatsby-config.js 文件并将 guid 和 apiKey 替换为您的。

您可以通过导航到设置,然后单击 API 密钥找到您的 API 密钥。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--TRSv6Yhu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://help.agilitycms。 com/hc/article_attachments/360035503851/mceclip0.png)

如果您使用“预览”键,则无需发布即可看到您所做的更改。如果您使用“获取”键,请确保您已发布任何您希望看到更改的内容。

工作原理

Gatsby 源插件下载 Agility CMS 站点地图上的所有页面,以及在 gatsby-config.js 文件的 sharedContent 属性上引用的任何共享内容。

然后,所有这些页面和内容都可以在 GraphQL 中提供给您将编写以呈现这些页面的 React 组件。

查看用于渲染 Jumbotron 模块的 Jumbotron 组件。它位于敏捷内容管理器中:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--OQKoH_Nv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev. s3.amazonaws.com/i/mjv2brybc17iyqdoy25u.png)

这是用于渲染它的代码。请注意,title 和 subTitle 字段可用作 item.fields 对象的属性。

import React, { Component } from 'react';
import { graphql, StaticQuery } from "gatsby"

import './Jumbotron.css'

export default class Jumbotron extends Component {
    render() {    
        return (
            <section className="jumbotron">
                <h1>{this.props.item.fields.title}</h1>
                <h2>{this.props.item.fields.subTitle}</h2>
            </section>
        );
    }
}

进入全屏模式 退出全屏模式

当我们向 Agility 添加新模块和内容定义时,我们用来渲染这些模块的组件将自动获取作为道具传递给这些模块的强类型数据。

甜的!

...

这只是与 Gatsby 和 Agility CMS 合作的冰山一角。

在下面的评论中让我知道您的想法!