本教程將介紹如何使用Gatsby 和Sanity.io 的結(jié)構(gòu)化內(nèi)容創(chuàng)建分類頁面。您將學(xué)習(xí)如何使用Gatsby 的節(jié)點創(chuàng)建API 向Gatsby 的GraphQL API 中的內(nèi)容類型添加字段。具體來說，我們將為Sanity 的博客啟動器創(chuàng)建類別頁面。

需要注意的是，此處介紹的內(nèi)容與Sanity 本身無關(guān)。無論您使用哪個內(nèi)容源，都可以執(zhí)行此操作。我們只是為了演示而使用Sanity.io。

啟動博客

如果您想使用您自己的Gatsby 項目學(xué)習(xí)本教程，請?zhí)^在Gatsby 中創(chuàng)建新頁面模板的部分。否則，請訪問sanity.io/create 並啟動Gatsby 博客啟動器。它會將Sanity Studio 和Gatsby 前端的代碼放入您的GitHub 帳戶中，並在Netlify 上為兩者設(shè)置部署。所有配置（包括示例內(nèi)容）都已就緒，以便您可以直接開始學(xué)習(xí)如何創(chuàng)建分類頁面。

項目啟動後，請確保將新的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。

您還應(yīng)該安裝Sanity CLI 並從終端npm i -g @sanity/cli && sanity login login 。這將為您提供與Sanity 項目交互的工具和有用的命令。您可以添加--help標誌以獲取有關(guān)其功能和命令的更多信息。

我們將對gatsby-node.js文件進行一些自定義。要查看更改的結(jié)果，請重新啟動Gatsby 的開發(fā)服務(wù)器。這在大多數(shù)係統(tǒng)中都是通過在終端中按CTRL C 並再次運行npm run dev來完成的。

熟悉內(nèi)容模型

查看/studio/schemas/documents文件夾。這裡有我們主要內(nèi)容類型的架構(gòu)文件：作者、類別、站點設(shè)置和帖子。每個文件都導(dǎo)出一個JavaScript 對象，該對象定義了這些內(nèi)容類型的字段和屬性。在post.js中是類別的字段定義：

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

這將創(chuàng)建一個具有對類別文檔的引用對象的數(shù)組字段。在博客的工作室中，它將如下所示：

向類別類型添加slug

轉(zhuǎn)到/studio/schemas/documents/category.js 。類別有一個簡單的內(nèi)容模型，它由標題和描述組成?，F(xiàn)在我們正在為類別創(chuàng)建專用頁面，擁有slug 字段也很方便。我們可以在架構(gòu)中這樣定義它：

 // 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: {
        // 添加一個按鈕以根據(jù)標題字段生成slug
        source: 'title'
      }
    },
    {
      name: 'description',
      type: 'text',
      title: 'Description'
    }
  ]
}

現(xiàn)在我們已經(jīng)更改了內(nèi)容模型，我們需要更新GraphQL 架構(gòu)定義。通過在studio 文件夾中執(zhí)行npm run graphql-deploy （或者sanity graphql deploy ）來執(zhí)行此操作。您將收到有關(guān)重大更改的警告，但由於我們只是添加了一個字段，因此您可以繼續(xù)進行而無需擔心。如果您希望該字段在Netlify 上的工作室中可用，請將更改檢入git（使用git add . && git commit -m"add slug field" ）並將其推送到您的GitHub 存儲庫（ git push origin master ）。

現(xiàn)在我們應(yīng)該瀏覽類別並為它們生成slug。請記住點擊“發(fā)布”按鈕才能使Gatsby 訪問這些更改！如果您正在運行Gatsby 的開發(fā)服務(wù)器，則也需要重新啟動它。

關(guān)於Sanity 源插件如何工作的簡短說明

在開發(fā)中啟動Gatsby 或構(gòu)建網(wǎng)站時，源插件將首先從Sanity 部署的GraphQL API 獲取GraphQL 架構(gòu)定義。源插件使用它來告訴Gatsby 哪些字段應(yīng)該可用，以防止它在某些字段的內(nèi)容消失時中斷。然後，它將訪問項目的導(dǎo)出端點，該端點將所有可訪問的文檔流式傳輸?shù)紾atsby 的內(nèi)存數(shù)據(jù)存儲中。

換句話說，整個站點都是通過兩個請求構(gòu)建的。運行開發(fā)服務(wù)器還將設(shè)置一個偵聽器，該偵聽器會實時將來自Sanity 的任何更改推送到Gatsby，而無需執(zhí)行其他API 查詢。如果我們向源插件提供具有讀取草稿權(quán)限的令牌，我們將立即看到更改。這也可以通過Gatsby 預(yù)覽體驗到。

在Gatsby 中添加類別頁面模板

現(xiàn)在我們已經(jīng)準備好GraphQL 架構(gòu)定義和一些內(nèi)容，我們可以開始在Gatsby 中創(chuàng)建類別頁面模板了。我們需要做兩件事：

• 告訴Gatsby 為類別節(jié)點（這是Gatsby 的“文檔”術(shù)語）創(chuàng)建頁面。
• 為Gatsby 提供一個模板文件來生成包含頁面數(shù)據(jù)的HTML。

首先打開/web/gatsby-node.js文件。這裡已經(jīng)存在可以用來創(chuàng)建博客帖子頁面的代碼。我們將主要利用這段代碼，但用於類別。讓我們一步一步來：

在createBlogPostPages函數(shù)和以exports.createPages開頭的行之間，我們可以添加以下代碼。我已經(jīng)在這裡添加了註釋來解釋正在發(fā)生的事情：

 // web/gatsby-node.js

// ...

async function createCategoryPages (graphql, actions) {
  // 獲取Gatsby 創(chuàng)建新頁面的方法const {createPage} = actions
  // 查詢Gatsby 的GraphAPI 以獲取來自Sanity 的所有類別// 您可以在http://localhost:8000/___graphql 上查詢此API
  const result = await graphql(`{
    allSanityCategory {
      nodes {
        slug {
          current
        }
        id
      }
    }
  }
  `)
  // 如果查詢中存在任何錯誤，則取消構(gòu)建並告訴我們if (result.errors) throw result.errors

  // 讓我們優(yōu)雅地處理allSanityCatgogy 為null 的情況const categoryNodes = (result.data.allSanityCategory || {}).nodes || []

  categoryNodes
    // 循環(huán)遍歷類別節(jié)點，但不返回任何內(nèi)容.forEach((node) => {
      // 解構(gòu)每個類別的id 和slug 字段const {id, slug = {}} = node
      // 如果沒有slug，我們什麼也不做if (!slug) return

      // 使用當前slug 創(chuàng)建URL
      const path = `/categories/${slug.current}`

      // 使用URL 路徑和模板文件創(chuàng)建頁面，並傳遞我們可以用來在模板文件中查詢正確類別的id
      createPage({
        path,
        component: require.resolve('./src/templates/category.js'),
        context: {id}
      })
    })
}

最後，此函數(shù)需要在文件的底部：

 // /web/gatsby-node.js

// ...

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

現(xiàn)在我們已經(jīng)有了創(chuàng)建類別頁面節(jié)點的機制，我們需要添加一個模板來顯示它在瀏覽器中的實際外觀。我們將基於現(xiàn)有的博客帖子模板來獲得一些一致的樣式，但在過程中保持相當簡單。

 // /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>Category: {title}</h1>
        <p>{description}</p>
        {posts && (
          
            <h2>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

這段代碼將生成一個簡單的類別頁面，其中包含鏈接帖子的列表——就像我們想要的那樣！

創(chuàng)建分類頁面！

我們剛剛完成了在Gatsby 中使用自定義頁面模板創(chuàng)建新頁麵類型的過程。我們介紹了Gatsby 的一個節(jié)點API，名為createResolver ，並用它向類別節(jié)點添加了一個新的posts字段。

這應(yīng)該為您提供創(chuàng)建其他類型的分類頁面所需的內(nèi)容！您的博客上有多個作者嗎？您可以使用相同的邏輯來創(chuàng)建作者頁面。 GraphQL 過濾器的有趣之處在於，您可以使用它來超越使用引用建立的顯式關(guān)係。它還可以用於使用正則表達式或字符串比較來匹配其他字段。它非常靈活！

以上是如何用蓋茨比和理智製作分類頁面的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！