Headless CMS 在 Gatsby 站点构建中的实战运用-JavaScript中文网-JavaScript教程资源分享门户

前端领域中，如今有的是各种可供选择的内容管理系统（Content Management System，简称 CMS），其中一个最近日渐流行的变种是 Headless CMS。Headless CMS 和传统 CMS 在使用方式上有着很大的不同之处，它停用了之前传统 CMS 已有的一些特性，只提供了一套纯 API 接口，数据和展示分离了。其中的好处在于，尽管我们的数据需要通过 API 来呈现出来，但同时也能将数据从应用中解耦，从而促进分布式的开发模型，更高效地定义数据模型，在客户端和服务端之间的数据传输更为简单，甚至在一些低带宽，低存储空间环境下也能安全地存储他们的数据。

Gatsby 是一个建立在 React 之上的静态站点生成器，它使用 GraphQL 来获得一个数据查询和重载过程接口，并在内部通过这个接口获取数据并转化为静态的 HTML 文件，所有页面的数据渲染都可以使用 GraphQL 查询，而且 Gatsby 生成的所有页面都是静态的 HTML 文件，对 SEO 很友好。对于使用 Headless CMS 的场景来说，Gatsby 是与 Headless CMS 最天然、最无缝集成的工具了。下面，我们来看看如何将 Headless CMS 和 Gatsby 结合使用。

Headless CMS 的优势

Headless CMS 的最大优势是拥有更为灵活开放的数据接口，而且数据的发布流程也更容易管理。产品提供商不必花太多时间考虑展示层的需求，只需要通过接口将内容提供给展示层。Headless CMS 更加依赖开发人员的能力，尤其是 GraphQL 的出现让开发人员更有选择灵活性，可以更简单地构建出内容 API，甚至同时使用各种 CMS 框架，为前端工作带来更多的选择。

使用 Headless CMS 和 Gatsby 构建静态站点

下面详细介绍如何使用 Gatsby 结合 Headless CMS 构建静态站点。

选择 Headless CMS

在使用 Headless CMS 构建静态站点时，最需要考虑的是 CMS 的数据 API 接口，考虑是否适合 GraphQL，是否具有更好的数据按需加载、静态数据缓存、懒加载等特性。目前使用量颇多的几个 Headless CMS 有：

GraphCMS：全面的、专业的 GraphQL 式无头 CMS，拥有直观友好的开发界面，可以在线编辑、发布内容。该产品可与 Gatsby、Next.js、Nuxt.js 等工具结合使用。
Contentful：功能丰富，优秀的开发人员文档、API 文档，以及很好的工具支持（支持 Webhooks）、支持在线预览、编辑，提供一定量的云存储。Contentful 可与 Gatsby 结合使用。
Sanity：由真正的 JavaScript 构件，提供出色的速度、开发工具和平滑的用户体验。Sanity 和 Gatsby 结合使用时无需手动配置，因为它们之间已经存在插件来实现这种无缝性。

根据实际需要、项目规模和数据类型选择合适的 Headless CMS。

搭建 Gatsby 应用

使用 Gatsby 构建无头渲染应用需要全局安装 Gatsby-cli：

npm install --global gatsby-cli

Gatsby 可以通过“gatsby new”命令在终端中初始化您的站点并设置基本的文件结构，其语法如下：

gatsby new [directory] [starter-package]

directory: 应用新建的目录名。
starter-package: Gatsby Starter Kit，也就是我们将使用的主题(starter)。

我们可以使用如下命令新建 Gatsby 应用：

gatsby new my-gatsby-app https://github.com/gatsbyjs/gatsby-starter-default

在新建应用后，我们需要将其中的数据源调整为使用 Headless CMS。

使用 Headless CMS 与 Gatsby 站点集成

下面以 GraphCMS 为例，演示 Headless CMS 和 Gatsby 站点的集成。

首先，我们需要在 GraphCMS 上创建一个新的数据源，内部添加一些自己定义的字段，这里我们示例如下：

// javascriptcn.com 代码示例
type BlogPost {
  title: String!
  slug: String!
  content: RichText!
  coverImage: Asset!
  excerpt: String
  author: Author!
  publishedAt: DateTime!
}

其中，“Author”的类型为“Person”：

type Author {
  name: String!
  avatar: Asset
  bio: String
  articles: [BlogPost!]!
}

创建好数据源后，我们需要在本地运行一个 GraphQL API 代理，这个代理会将 GraphQL 查询请求发送到 GraphCMS API，并返回数据。为此，我们需要下载一个工具——GraphQL Code Generator，用它可以通过在本地终端中运行如下命令，自动生成用于访问您的 GraphCMS 站点的“包装器”方法和组件：

npx create-graphql-server graphql

接着，您可以通过“gatsby-graphql-source-plugin”插件将 GraphCMS 数据源添加到 Gatsby 配置文件中。该插件会接收到 GraphCMS API URL、Access Token 和将要提取的数据空间，并生成一些现成的 Gatsby 节点类型，例如：

GraphCMS_Asset：用于存储 GraphCMS 上的图像文件；
GraphCMS_Author：代表 GraphCMS 的“作者（Authors）”类型；
GraphCMS_BlogPost：代表 GraphCMS 的“博客文章（Blog Posts）”类型。
...

为此，我们需要在 .env.production 文件中设置 GraphCMS API URL 和 Access Token。

# .env.production
GRAPHQL_URI=https://api.your-website.com/graphql
GRAPHQL_TOKEN=xxxxxxxxxxxx

接着，我们在 Gatsby 站点配置文件中，引入插件：

// javascriptcn.com 代码示例
plugins: [
  {
    resolve: 'gatsby-source-graphql',
    options: {
      typeName: 'GraphCMSAPI',
      fieldName: 'gcmsApi',
      url: process.env.GRAPHQL_URI,
      headers: {
        Authorization: `Bearer ${process.env.GRAPHQL_TOKEN}`
      }
    },
  },
]

运行以上命令后，我们就可以从 GraphCMS 中获取数据了。

将数据填充到 Gatsby 模板中

在上一步成功获取 GraphCMS 数据后，我们需要将该数据通过模板渲染到页面中。这里我们以博客文章页面为例，一个查询 GraphCMS 返回博客文章数据的 GraphQL 查询大概是这个样子的：

// javascriptcn.com 代码示例
// 在模板模块中，使用GraphQL查询语句
export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    gcmsApi {
      blogPost(where: {slug: $slug}) {
        title
        content {
          html
        }
        publishedAt
        coverImage {
          url
        }
        author {
          name
          avatar {
            url
          }
        }
      }
    }
  }
`;

我们定义了一些简单的模板，现在只需要把从 GraphCMS 获取到的数据填充到模板中即可。

// javascriptcn.com 代码示例
const BlogPost = ({ data }) => {
  const post = data.gcmsApi.blogPost

  return (
    <div>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.html }} />
      <p>{`By ${post.author.name} on ${new Date(post.publishedAt).toLocaleDateString()}`}</p>
    </div>
  )
}

export default BlogPost

总结

本文主要介绍了 Headless CMS 在 Gatsby 站点构建中的实战运用，包括选择 Headless CMS 数据源、搭建 Gatsby 应用、使用 Headless CMS 与 Gatsby 站点集成，以此构建可静态渲染的使用 CMS 的 Web 应用程序。Headless CMS 比起传统 CMS 更灵活，更适合一些具有开发能力的团队，能够大幅度提升开发和运营效率。Gatsby 作为一款静态渲染框架，它与 Headless CMS 的无缝集成，可以让开发人员更专注于功能实现建设，避免了频繁的代码修改，提高了开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534978e7d4982a6eb96aa70