如何用盖茨比和理智制作分类页面

本教程将介绍如何使用 Gatsby 和 Sanity.io 的结构化内容创建分类页面。您将学习如何使用 Gatsby 的节点创建 API 向 Gatsby 的 GraphQL API 中的内容类型添加字段。具体来说，我们将为 Sanity 的博客启动器创建类别页面。

需要注意的是，此处介绍的内容与 Sanity 本身无关。无论您使用哪个内容源，都可以执行此操作。我们只是为了演示而使用 Sanity.io。

启动博客

如果您想使用您自己的 Gatsby 项目学习本教程，请跳过在 Gatsby 中创建新页面模板的部分。否则，请访问 sanity.io/create 并启动 Gatsby 博客启动器。它会将 Sanity Studio 和 Gatsby 前端的代码放入您的 GitHub 帐户中，并在 Netlify 上为两者设置部署。所有配置（包括示例内容）都已就绪，以便您可以直接开始学习如何创建分类页面。

项目启动后，请确保将新的 GitHub 存储库克隆到本地，并安装依赖项：

git clone [email protected]:username/your-repository-name.git
cd your-repository-name
npm i

如果您想在本地同时运行 Sanity Studio（CMS）和 Gatsby 前端，则可以从项目根目录的终端运行命令 npm run dev。您也可以进入 web 文件夹，并使用相同的命令运行 Gatsby。

您还应该安装 Sanity CLI 并从终端登录到您的帐户：npm i -g @sanity/cli && sanity login。这将为您提供与 Sanity 项目交互的工具和有用的命令。您可以添加 --help 标志以获取有关其功能和命令的更多信息。

我们将对 gatsby-node.js 文件进行一些自定义。要查看更改的结果，请重新启动 Gatsby 的开发服务器。这在大多数系统中都是通过在终端中按 CTRL C 并再次运行 npm run dev 来完成的。

熟悉内容模型

查看 /studio/schemas/documents 文件夹。这里有我们主要内容类型的架构文件：作者、类别、站点设置和帖子。每个文件都导出一个 JavaScript 对象，该对象定义了这些内容类型的字段和属性。在 post.js 中是类别的字段定义：

{
  name: 'categories',
  type: 'array',
  title: 'Categories',
  of: [
    {
      type: 'reference',
      to: [{
        type: 'category'
      }]
    }
  ]
},

这将创建一个具有对类别文档的引用对象的数组字段。在博客的工作室中，它将如下所示：

向类别类型添加 slug

转到 /studio/schemas/documents/category.js。类别有一个简单的内容模型，它由标题和描述组成。现在我们正在为类别创建专用页面，拥有 slug 字段也很方便。我们可以在架构中这样定义它：

// studio/schemas/documents/category.js
export default {
  name: 'category',
  type: 'document',
  title: 'Category',
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Title'
    },
    {
      name: 'slug',
      type: 'slug',
      title: 'Slug',
      options: {
        // 添加一个按钮以根据标题字段生成 slug
        source: 'title'
      }
    },
    {
      name: 'description',
      type: 'text',
      title: 'Description'
    }
  ]
}

现在我们已经更改了内容模型，我们需要更新 GraphQL 架构定义。通过在 studio 文件夹中执行 npm run graphql-deploy（或者 sanity graphql deploy）来执行此操作。您将收到有关重大更改的警告，但由于我们只是添加了一个字段，因此您可以继续进行而无需担心。如果您希望该字段在 Netlify 上的工作室中可用，请将更改检入 git（使用 git add . && git commit -m"add slug field"）并将其推送到您的 GitHub 存储库（git push origin master）。

现在我们应该浏览类别并为它们生成 slug。请记住点击“发布”按钮才能使 Gatsby 访问这些更改！如果您正在运行 Gatsby 的开发服务器，则也需要重新启动它。

关于 Sanity 源插件如何工作的简短说明

在开发中启动 Gatsby 或构建网站时，源插件将首先从 Sanity 部署的 GraphQL API 获取 GraphQL 架构定义。源插件使用它来告诉 Gatsby 哪些字段应该可用，以防止它在某些字段的内容消失时中断。然后，它将访问项目的导出端点，该端点将所有可访问的文档流式传输到 Gatsby 的内存数据存储中。

换句话说，整个站点都是通过两个请求构建的。运行开发服务器还将设置一个侦听器，该侦听器会实时将来自 Sanity 的任何更改推送到 Gatsby，而无需执行其他 API 查询。如果我们向源插件提供具有读取草稿权限的令牌，我们将立即看到更改。这也可以通过 Gatsby 预览体验到。

在 Gatsby 中添加类别页面模板

现在我们已经准备好 GraphQL 架构定义和一些内容，我们可以开始在 Gatsby 中创建类别页面模板了。我们需要做两件事：

• 告诉 Gatsby 为类别节点（这是 Gatsby 的“文档”术语）创建页面。
• 为 Gatsby 提供一个模板文件来生成包含页面数据的 HTML。

首先打开 /web/gatsby-node.js 文件。这里已经存在可以用来创建博客帖子页面的代码。我们将主要利用这段代码，但用于类别。让我们一步一步来：

在 createBlogPostPages 函数和以 exports.createPages 开头的行之间，我们可以添加以下代码。我已经在这里添加了注释来解释正在发生的事情：

// web/gatsby-node.js

// ...

async function createCategoryPages (graphql, actions) {
  // 获取 Gatsby 创建新页面的方法
  const {createPage} = actions
  // 查询 Gatsby 的 GraphAPI 以获取来自 Sanity 的所有类别
  // 您可以在 http://localhost:8000/___graphql 上查询此 API
  const result = await graphql(`{
    allSanityCategory {
      nodes {
        slug {
          current
        }
        id
      }
    }
  }
  `)
  // 如果查询中存在任何错误，则取消构建并告诉我们
  if (result.errors) throw result.errors

  // 让我们优雅地处理 allSanityCatgogy 为 null 的情况
  const categoryNodes = (result.data.allSanityCategory || {}).nodes || []

  categoryNodes
    // 循环遍历类别节点，但不返回任何内容
    .forEach((node) => {
      // 解构每个类别的 id 和 slug 字段
      const {id, slug = {}} = node
      // 如果没有 slug，我们什么也不做
      if (!slug) return

      // 使用当前 slug 创建 URL
      const path = `/categories/${slug.current}`

      // 使用 URL 路径和模板文件创建页面，并传递我们可以用来在模板文件中查询正确类别的 id
      createPage({
        path,
        component: require.resolve('./src/templates/category.js'),
        context: {id}
      })
    })
}

最后，此函数需要在文件的底部：

// /web/gatsby-node.js

// ...

exports.createPages = async ({graphql, actions}) => {
  await createBlogPostPages(graphql, actions)
  await createCategoryPages(graphql, actions) // 
}

现在我们已经有了创建类别页面节点的机制，我们需要添加一个模板来显示它在浏览器中的实际外观。我们将基于现有的博客帖子模板来获得一些一致的样式，但在过程中保持相当简单。

// /web/src/templates/category.js
import React from 'react'
import {graphql, Link} from 'gatsby'
import Container from '../components/container'
import GraphQLErrorList from '../components/graphql-error-list'
import SEO from '../components/seo'
import Layout from '../containers/layout'
import {getBlogUrl} from '../lib/helpers'


export const query = graphql`
  query CategoryTemplateQuery($id: String!) {
    category: sanityCategory(id: {eq: $id}) {
      title
      description
      posts {
        _id
        title
        publishedAt
        slug {
          current
        }
      }
    }
  }
`

const CategoryPostTemplate = props => {
  const {data = {}, errors} = props
  const {title, description, posts} = data.category || {}

  return (
    <layout>
      <container>
        {errors && <graphqlerrorlist errors="{errors}"></graphqlerrorlist>}
        {!data.category && <p>No category data</p>}
        <seo title="{title}" description="{description}"></seo>
        <h1 id="Category-title">Category: {title}</h1>
        <p>{description}</p>
        {posts && (
          
            <h2 id="Posts">Posts</h2>
            <ul>
              {posts.map(post => (
                <li key="{post._id}">
                  <link to="{getBlogUrl(post.publishedAt," post.slug.current>{post.title}
                </li>
              ))}
            </ul>
          >
        )}
      </container>
    </layout>
  )
}

export default CategoryPostTemplate

这段代码将生成一个简单的类别页面，其中包含链接帖子的列表——就像我们想要的那样！

创建分类页面！

我们刚刚完成了在 Gatsby 中使用自定义页面模板创建新页面类型的过程。我们介绍了 Gatsby 的一个节点 API，名为 createResolver，并用它向类别节点添加了一个新的 posts 字段。

这应该为您提供创建其他类型的分类页面所需的内容！您的博客上有多个作者吗？您可以使用相同的逻辑来创建作者页面。GraphQL 过滤器的有趣之处在于，您可以使用它来超越使用引用建立的显式关系。它还可以用于使用正则表达式或字符串比较来匹配其他字段。它非常灵活！

以上是如何用盖茨比和理智制作分类页面的详细内容。更多信息请关注PHP中文网其他相关文章！