在 Gatsby JS 中以编程方式创建页面时如何区分某些内容

Question

我正在使用 Gatsby 构建一个网站，到目前为止，我发现以编程方式创建页面是一个非常方便的功能。您可以拥有一个类别模板，并让 gatsby-node 非常轻松地为每个内容类别创建页面。 但是，向同一模板添加差异化内容的推荐方法是什么？

现在我正在使用三元运算符来检查它是哪个类别，并根据该精确类别添加特定内容（需要相应区分的一些内容示例：类别介绍标题、SEO 标题和 SEO 描述基于 Helmet 的 SEO 组件）

在 categoryTemplate.js 中

const booksTitle = "Quote on books"
const songsTitle = "Quote on songs"
const travelsTitle = "Quote on travels"
const booksSeoTitle = "Books Title for SEO"
...

               <CategoryIntro
                    title={<>
                        {category === "books"
                        ? booksTitle
                        : category === "songs"
                        ? songsTitle
                        : category === "travels"
                        ? travelsTitle
                        : null
                        }
                    </>}
              />

这种方法确实有效，但我想知道是否有更方便的做法可以使用？我应该在其他地方以 json 格式存储有关类别的信息，而不是在模板文件中声明它们吗？

非常感谢。

Answer 1

我认为您建议的将这些信息存储在其他地方的方法会使代码更简洁且更易于维护。模板组件应仅为预期的通用模板。你不应该把它和内容混在一起。

categories.js 文件怎么样？

export const categories = {
  book: {
    title: "Quote on books",
    seoTitle: "",
  },
  songs: {
    title: "Quote on songs",
    seoTitle: "",
  },
}

在你的模板文件中导入你的categories.js，让它通过一个道具决定选择哪个类别：

import { categories } from "./categories.js"

// This function returns your mediaType object
function getObject(obj, mediaType) {
  return obj[mediaType];
}

function MediaTemplate({ mediaType }) {

  const category = getObject(mediaType);
  // See this answer for how to access the object key dynamically: https://stackoverflow.com/questions/4255472/javascript-object-access-variable-property-by-name-as-string

  console.log("category:");
  console.log(category);

  // It is only one amazing line now!
  return (
    <CategoryIntro title={category.title} />
  );
}