如何用蓋茨比和理智製作分類頁面

本教程將介紹如何使用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 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中文網其他相關文章！