使用 Strapi 和 Gatsby 创建 Headless CMS 网站-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的发展，越来越多的网站需要提供高质量的内容，因此 Content Management System (CMS) 已经成为了现代网站的重要组成部分。然而，传统的 CMS 服务通常会让网站性能受到影响。因此，为了满足对网站性能和灵活性的需求，开发人员开始采用 Headless CMS 架构。

在本文中，我们将介绍如何使用 Strapi 和 Gatsby 创建一个使用 Headless CMS 架构的网站。我们将一步步地讲解如何搭建这个网站，并讨论 Headless CMS 架构在现代网站中的作用。

Headless CMS 架构

Headless CMS 架构是一个新兴的 CMS 实现方式，它将内容与呈现方式分开。这种架构的概念非常简单：它包含两个常见的组件，一个是 CMS 服务，另一个是内容消费者。

CMS 服务负责存储和管理内容，并提供 API 让内容消费者可以获取到这些内容。而内容消费者可以是各种各样的应用和网站，例如桌面应用、移动应用、Web 应用和站点。

相对于传统的 CMS 服务，Headless CMS 架构可以带来以下好处：

提供更好的灵活性和展示自由度。
增加了网站负载能力。
减轻了开发人员的负担，极大提升了开发效率。

搭建 Headless CMS 网站

在本文中，我们将用 Strapi 和 Gatsby 框架来创建一个 Headless CMS 网站。Strapi 是一个用于构建 API 的开源 Node.js 框架。而 Gatsby 是一个强大的静态站点生成器，用于创建快速、高性能的 React 应用程序。

安装 Strapi

首先，我们需要安装 Strapi。可以通过 npm 包管理器来安装 Strapi。

# 使用 npm 来安装 Strapi
npm install strapi -g

安装完成后，我们需要创建一个新的 Strapi 项目。在终端中，我们需要使用 Strapi 命令行工具来创建项目。

# 创建一个新的 Strapi 项目
strapi new my-strapi-app

以上命令将创建一个新的 Strapi 项目，并自动安装必要的依赖项。安装完成后，我们可以通过以下命令来启动 Strapi 服务。

# 在本地运行 Strapi 服务
cd my-strapi-app
strapi develop

现在，我们已经成功地安装和启动了 Strapi 服务。

创建 Strapi 数据模型

下一步，我们需要创建 Strapi 数据模型。我们将创建一个包含文章的简单数据模型。在终端中执行以下命令来创建一个 Strapi 数据模型。

# 创建文章数据模型
strapi generate:model article title:string content:text

以上命令将在 Strapi 应用程序的 api 目录下创建一个名为 articles 的新模型，并在其中包含名为 title 和 content 的两个字段。

使用 Strapi API

现在，我们已经创建了一个简单的 Strapi 数据模型。我们需要使用 Strapi API 来从数据模型中获取数据。

Strapi API 默认已经在 localhost:1337 启动。我们可以在浏览器中访问 http://localhost:1337/articles 来获得数据库中文章列表的 JSON 格式。

安装 Gatsby

接下来，我们需要安装 Gatsby。我们可以使用 npm 包管理器进行安装。

# 使用 npm 来安装 Gatsby
npm install -g gatsby-cli

安装完成后，我们需要创建一个新的 Gatsby 项目。在终端中通过以下命令来创建 Gatsby 项目。

# 创建一个新的 Gatsby 项目
gatsby new my-gatsby-app

以上命令将创建一个新的 Gatsby 项目，并自动安装必要的依赖项。安装完成后，我们可以通过以下命令在本地启动 Gatsby 服务。

# 在本地运行 Gatsby 服务
cd my-gatsby-app
gatsby develop

现在，我们已经成功地安装和启动了 Gatsby 服务。

创建 Gatsby 网站

我们已经成功地安装 Strapi 和 Gatsby，并创建了一个文章模型。现在，我们需要连接 Strapi API，并从文章模型中获取数据，从而创建一个网站。

下面是一个基本的 Gatsby 网站结构：

my-gatsby-app
├── src
│   ├── components
│   ├── pages
│   └── templates
├── gatsby-config.js
└── package.json

我们可以将创建好的文章模型和Strapi API连接到 Gatsby 中，从而创建我们的网站。使用以下命令行来安装 Gatsby 的 Strapi 数据连接器。

# 安装 Gatsby 的 Strapi 数据连接器
npm install gatsby-source-strapi

然后，我们需要打开 gatsby-config.js 文件并进行如下配置。

// javascriptcn.com 代码示例
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-strapi',
      options: {
        apiURL: 'http://localhost:1337',
        contentTypes: ['articles'],
        singleTypes: [],
        queryLimit: 1000,
      },
    },
  ],
}

以上配置提供了以下信息:

apiURL - Strapi API 服务的地址。
contentTypes - 数据模型的名称（例如我们的文章数据模型的名字为 articles）。
singleTypes - 如果 Strapi 服务还包含了单个内容，则需要在此处声明。
queryLimit - 设置从 Strapi API 中获取数据的限制数量。

在配置完成后，我们可以通过以下命令来启动 Gatsby 服务。

# 在本地运行 Gatsby 服务
cd my-gatsby-app
gatsby develop

现在，我们已经成功地安装和启动了 Strapi 和 Gatsby 并连接 Strapi API。我们将在下一节中创建文章列表组件。

创建 Gatsby 文章列表组件

现在我们已经成功地安装 Strapi 和 Gatsby 并连接 Strapi API，因此可以从 Strapi 中获取文章列表数据。在 Gatsby 中，我们可以通过组件来展示这些数据。

在 src/components 目录中，创建一个新文件 ArticleList.js，并编写以下代码：

// javascriptcn.com 代码示例
import React from 'react'
import { Link, StaticQuery, graphql } from 'gatsby'

const ArticleList = () => (
  <StaticQuery
    query={graphql`
      query {
        allStrapiArticles {
          edges {
            node {
              id
              title
              content
            }
          }
        }
      }
    `}
    render={data => (
      <div>
        <h2>Article List</h2>
        <ul>
          {data.allStrapiArticles.edges.map(document => (
            <li key={document.node.id}>
              <h3>
                <Link to={`/article/${document.node.id}`}>{document.node.title}</Link>
              </h3>
              <p>{document.node.content}</p>
            </li>
          ))}
        </ul>
      </div>
    )}
  />
)

export default ArticleList

以上代码将从 Strapi 获取文章列表并将其展示在一个有序列表内。此时我们已经创建好了 ArticleList 组件，接下来，我们需要修改 src/pages/index.js 文件并使用 ArticleList 组件，将其展示在我们的首页上。

// javascriptcn.com 代码示例
import React from 'react'
import Layout from '../components/Layout'
import ArticleList from '../components/ArticleList'

const IndexPage = () => (
  <Layout>
    <ArticleList />
  </Layout>
)

export default IndexPage

创建 Gatsby 文章详情组件

我们已经创建了 Gatsby 文章列表组件，并在首页上展示。接下来，我们将创建一个包含 Strapi 文章详细信息的组件。

在 src/templates 目录中，创建一个新文件 article.js，并编写以下代码：

// javascriptcn.com 代码示例
import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/Layout'

export default ({ data }) => {
  const post = data.strapiArticles

  return (
    <Layout>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </Layout>
  )
}

export const query = graphql`
  query PostQuery($id: String!) {
    strapiArticles(id: { eq: $id }) {
      id
      title
      content
    }
  }
`

以上代码中的 query 块可以通过可选参数 id 进行筛选，从而获取与该文章相匹配的 Strapi 数据条目，并将其传递到渲染的 React 组件中。

我们现在已经创建好了 article.js 组件，接下来，我们需要在 Gatsby 的配置文件中声明该组件，然后我们可以通过任何文章链接来使用该组件。

在 gatsby-node.js 中，我们需要创建一个新的 createPages 函数，并通过 createPage 方法使用 article.js 组件来创建新的页面。

// javascriptcn.com 代码示例
const { createFilePath } = require('gatsby-source-filesystem')

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode })

    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query Articles {
      allStrapiArticles {
        edges {
          node {
            id
          }
        }
      }
    }
  `)

  result.data.allStrapiArticles.edges.forEach(edge => {
    createPage({
      path: `/article/${edge.node.id}`,
      component: require.resolve('./src/templates/article.js'),
      context: {
        id: edge.node.id,
      },
    })
  })
}

现在，我们可以通过 $https://localhost:8000/article/ + UUID形式的路径来访问每篇文章的详情页面。

至此，我们已经成功地使用 Strapi 和 Gatsby 创建了 Headless CMS 网站。这使得我们能够适应未来的发展，让前端开发更加灵活和高效。

总结

在本文中，我们介绍了 Headless CMS 架构以及如何使用 Strapi 和 Gatsby 创建一个使用 Headless CMS 架构的网站。我们提供了详细的步骤和示例代码，希望这能对你构建你的 Headless CMS 带来帮助。Headless CMS 的优点很明显，特别是在构建性能，灵活性和开发效率等方面。我们推荐使用 Strapi 和 Gatsby，因为它们易于使用、快速建站、高度可定制。

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