使用 Headless CMS 和 Gatsby 实现网站的灵活性-JavaScript中文网-JavaScript教程资源分享门户

背景

现今互联网技术发展日新月异，移动互联网的出现更是加快了互联网内容的更新速度。站在用户的角度，他们需要更多有用的内容去满足自己的需求。而站在网站的角度，要实现内容的灵活性和可维护性就成为了一种挑战。

Headless CMS 简介

Headless CMS 基本概念是将 CMS 的前端与后端进行分离，使得前端可以独立于后端而自行运作。这种模式被广泛应用于构建 Web 应用、移动应用和 IoT 等领域中需要提供动态内容的场景。

Headless CMS 不同于传统的 CMS，传统 CMS 一般包括一个内置的内容管理系统和一个配套的前端页面。而 Headless CMS 仅关注数据的生成和输出，而不包括数据的展示和处理，这些交由各个前端开发的团队来实现。

Headless CMS 就像一种提供数据服务的中转服务器。在 Headless CMS 中管理器编辑的内容可以进行 API 输出。API 是指一组规范，用于提供描述互联网产品和服务的接口。就是说 Headless CMS 的编辑和发布的内容通过 API 接口可以很方便的供给前端开发使用。

Gatsby 简介

Gatsby 是一款构建基于 React 框架的静态网站生成器。它能够将数据源和网站内容快速的处理为静态网页，这样加快了网页的加载速度，还能够提升搜索引擎的排名。

Gatsby 具有以下四个优点：

快速加载：通过预渲染和内部实现模拟客户端行为，Gatsby 能够提高页面加载速度。
React：Gatsby 采用了 React 框架，使得开发人员能够使用 React 的相关技术栈，从而获得更好的组件化和响应式优势。
构建单一的静态站点：Gatsby 最大的优点是将数据源和网站内容转换为静态网站，这意味着它不需要运行时和是部署在任何静态网站托管服务上。
插件系统：它拥有丰富的插件系统，可以极大地扩展它的功能和能力。

如何使用 Headless CMS 和 Gatsby

下面我们将实现一个简单的 Headless CMS + Gatsby 的例子。

在我们的例子中，我们使用 Strapi 作为 Headless CMS，Gatsby 作为前端框架。

首先我们需要安装 Strapi 来提供数据管理服务，并配置 Strapi API。使用如下的命令安装 Strapi：

npx create-strapi-app my-project --quickstart

创建一个新的 Strapi 集合（Collection），在集合中创建一个新的博客文章（Blog post）数据对象，并且添加一些示例数据。
创建一个新的 Gatsby 项目：

gatsby new my-blog-site
cd my-blog-site

安装必要的插件：

npm install gatsby-source-strapi gatsby-plugin-react-helmet gatsby-source-filesystem gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp

修改 gatsby-config.js 文件，添加 Strapi API 的配置信息：

// javascriptcn.com code example
module.exports = {
  siteMetadata: {
    title: "Gatsby Blog Site",
  },
  plugins: [
    {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL: `http://localhost:1337`,
        queryLimit: 1000, // 默认值为100
        contentTypes: [`blog-post`],
        // singleTypes: [],
        // loginData: {
        //   identifier: '',
        //   password: ''
        // }
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `uploads`,
        path: `${__dirname}/static/assets/images`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-react-helmet`,
  ],
}

修改 gatsby-node.js 文件以创建博客文章页面：

// javascriptcn.com code example
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    query MyQuery {
      allStrapiBlogPost(sort: { fields: [createdAt], order: DESC }) {
        edges {
          node {
            createdAt(formatString: "MM/DD/YYYY")
            title
            content
            cover {
              localFile {
                childImageSharp {
                  gatsbyImageData(layout: FULL_WIDTH)
                }
              }
            }
            seo {
              metaDescription
              metaTitle
              shareImage {
                localFile {
                  childImageSharp {
                    gatsbyImageData(layout: FULL_WIDTH)
                  }
                }
              }
            }
            slug
            id
            strapiId
          }
        }
      }
    }
  `)

  const posts = result.data.allStrapiBlogPost.edges

  posts.forEach(({ node }) => {
    const slug = node.slug
    const id = node.id || node.strapiId

    createPage({
      path: `/blog/${slug}`,
      component: require.resolve(`./src/templates/blog-post.js`),
      context: { id },
    })
  })
}

创建博客文章页面模板：

// javascriptcn.com code example
import React from "react"
import { graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
import { Helmet } from "react-helmet"

export const query = graphql`
  query($id: String!) {
    strapiBlogPost(id: { eq: $id }) {
      content
      title
      seo {
        metaDescription
        metaTitle
        shareImage {
          localFile {
            childImageSharp {
              gatsbyImageData(layout: FULL_WIDTH)
            }
          }
        }
      }
      cover {
        localFile {
          childImageSharp {
            gatsbyImageData(layout: FULL_WIDTH)
          }
        }
      }
    }
  }
`

const BlogPostTemplate = ({ data }) => {
  const post = data.strapiBlogPost
  const siteMetaData = data.site.siteMetadata

  return (
    <>
      <Helmet>
        <title>{post.seo.metaTitle || post.title}</title>
        <meta
          name="description"
          content={post.seo.metaDescription || siteMetaData.description}
        />
        <meta
          name="og:title"
          content={post.seo.metaTitle || post.title}
        />
        <meta
          name="og:description"
          content={post.seo.metaDescription || siteMetaData.description}
        />
        <meta property="og:type" content="article" />
        {post.seo.shareImage ? (
          <meta
            property="og:image"
            content={`http://localhost:8000${
              post.seo.shareImage.localFile.childImageSharp.gatsbyImageData.images.fallback.src
            }`}
          />
        ) : (
          ""
        )}
      </Helmet>

      <header>
        <h1>{post.title}</h1>
      </header>
      <section>
        <GatsbyImage
          image={
            post.cover.localFile.childImageSharp.gatsbyImageData
          }
          alt="Cover Image"
        />
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </section>
    </>
  )
}

export default BlogPostTemplate

访问博客文章页面：

在本地开发环境中运行 Gatsby：

gatsby develop

现在你可以在你的本地服务器上查看静态网站，访问以下地址获取博客文章列表：

http://localhost:8000/blog

访问博客文章：

http://localhost:8000/blog/my-article-slug

结论

使用了 Headless CMS 和 Gatsby 可以很好的解决快速开发平台，并且能让前端团队更专注于 UI/UX 的体验和交互，同时更容易维护。总之，从技术上来说，Headless CMS 和 Gatsby 主要解决了 Web 应用中内容的灵活性和展示的效率问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6734aa250bc820c5824a6aea