Gatsby：从内容字段创建页面

Question

我在 Contentful 上的每篇文章都有一些与之相关的“类别”。例如，一篇帖子可能包含：

major: "HCD"
year: "1st Year"
tools: ["R", "Python", "Wordpress"]

这些只是名为major、year 等的字段，具有这些值，但它们被视为单独的类别。 在网站上，它们显示为：

我正在尝试为每个类别创建一个页面。例如，如果用户点击Photoshop，他们应该被带到一个页面tags/photoshop，并且所有包含该标签的帖子都应该被列出。

幸运的是，我找到了this guide 来帮我做这件事。但是，该指南不适用于内容数据，因此我在如何执行此操作时遇到了一些麻烦。我已经创建了tagsTemplate.jsx，但我一直在创建实际页面。

例如，这就是我尝试为tools 创建页面时所做的：

我的gatsby-node.js 文件如下所示：

const path = require(`path`)
const _ = require('lodash');

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type contentfulPortfolioDescriptionTextNode implements Node {
      description: String
      major: String
      author: String
      tools: [String]
      files: [ContentfulAsset]
      contact: String
    }
    type ContentfulPortfolio implements Node {
      description: contentfulPortfolioDescriptionTextNode
      gallery: [ContentfulAsset]
      id: ID!
      name: String!
      related: [ContentfulPortfolio]
      slug: String!
      major: String!
      files: [ContentfulAsset]
      author: String!
      tools: [String]!
      year: String!
      thumbnail: ContentfulAsset
      url: String
      contact: String
    }
  `
  createTypes(typeDefs)
}

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
    graphql(`
      {
        portfolio: allContentfulPortfolio {
          nodes {
            slug
            tools
          }
        }
      }
    `).then(({ errors, data }) => {
      if (errors) {
        reject(errors)
      }

      if (data && data.portfolio) {
        const component = path.resolve("./src/templates/portfolio-item.jsx")
        data.portfolio.nodes.map(({ slug }) => {
          createPage({
            path: `/${slug}`,
            component,
            context: { slug },
          })
        })
      }
       
      const tools = data.portfolio.nodes.tools;
      const tagTemplate = path.resolve(`src/templates/tagsTemplate.js`);
      let tags = [];
      // Iterate through each post, putting all found tags into `tags`
      tags = tags.concat(tools);
       // Eliminate duplicate tags
      tags = _.uniq(tags);
      
       // Make tag pages
       tags.forEach(tag => {
        createPage({
          path: `/tags/${_.kebabCase(tag)}/`,
          component: tagTemplate,
          context: {
            tag
          },
        });
      });
      
      console.log("Created Pages For" + tags)

      resolve()
    })
  })
}

我的tagsTemplate 现在很小，因为我不知道如何查询数据：

import React from 'react';
import Layout from "../layouts/Layout"

const Tags = ({ data }) => {
  return (
    <Layout>
      <div>Tags</div>
    </Layout>
  );
};

export default Tags;

问题：当我访问我知道存在的标签之一（如photoshop）的页面时，我得到一个 404。为什么没有创建这些页面？

我做错了什么，我该如何解决？这如何概括为我的三个“类别”？

Answer 1

根据你在cmets上说的：

我试过console.log(tags)，但显示为undefined

我做到了，它只是一个空白区域。这是否意味着tags 中什么都没有？

您的联系函数看起来不错，该方法很好，因为您将tools（tags 列表）添加到新数组中以清理它并留下唯一值（uniq）。完成后，您将遍历唯一标签并基于该数组创建页面。

也就是说，您的纸牌屋有一些弱点可能会分崩离析。您的问题从这一行开始：

const tools = data.portfolio.nodes.tools;

并通过代码传播。

nodes 是一个数组，因此，要获得您应该做的任何值：

const tools = data.portfolio.nodes[0].tools;

要获得第一个位置等等......

由于从未填充过tools，因此其余代码不起作用。

您可以通过nodes 循环并使用类似于以下内容的内容填充tags 数组来轻松修复它：

  const toolNodes = data.portfolio.nodes;

  const tagTemplate = path.resolve(`src/templates/tagsTemplate.js`);
  let tags = [];

  // Iterate through each post, putting all found tags into `tags`
  toolNodes.map(toolNode => tags.push(toolNode.tools);
  // if the fetched data is still an array you can do toolNodes.map(toolNode => tags.push(...toolNode.tools);     

   // Eliminate duplicate tags
  tags = _.uniq(tags);
  
   // Make tag pages
   tags.forEach(tag => {
    createPage({
      path: `/tags/${_.kebabCase(tag)}/`,
      component: tagTemplate,
      context: {
        tag
      },
    });
  });
  
  console.log("Created Pages For" + tags)