如何为我的 Gatsby 网站创建第二个博客模板

Question

我的 Gatsby 网站需要 2 个博客模板：

1. 故事模板.js
2. products.template.js

我为我的故事运行了故事模板，但我不确定如何调整和更改 gatsby-node + products.template.js 中的现有代码，以便为我的产品制作第二个（不同的）模板。

我已经尝试了所有解决方案和过去的问题，但没有运气。

我在 gatsby-node.js 中的代码：

const path = require('path');

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

const postTemplate = path.resolve('src/components/stories-template.js');

return graphql(`
{
    allMarkdownRemark {
        edges {
          node {
            html  
            id 
            frontmatter {
              path
              title
              author
              date
            }
          }
        }
      }
}
`).then(res => {
    if(res.errors) {
        return Promise.reject(res.errors)
    }

    res.data.allMarkdownRemark.edges.forEach(({ node }) => {
            createPage({
                path: node.frontmatter.path,
                component: postTemplate,
        })
    })
})
}

我在 stories-template.js 中的代码：

import React from 'react'
import Layout from '../components/layout'


export default function Template({data}) {
const post = data.markdownRemark

return(<Layout>
    <div>
        <p>Stories</p>
        <br />
        <p>{post.frontmatter.title}</p>

        <div dangerouslySetInnerHTML={{__html: post.html}} />
    </div>
    </Layout>
)
}


export const postQuery = graphql`
query BlogPostByPath($path: String!) {
    markdownRemark(frontmatter: { path: {eq:$path}}){
        html
        frontmatter{
            path
            title
            date
            author
        }
    }
}
`

这可行，但现在我想在 products-template.js 中为产品创建不同的模板。现在我的产品模板基本上只是从我的故事模板中复制和粘贴的。

我这辈子都想不通。

Answer 1

就像提到的第一条评论一样，这里可能需要更多的上下文，但我会试一试。我认为问题在于无论页面如何，您都在告诉createPage 函数使用postTemplate 模板组件。

Gatsby 不会自动读取模板目录中的模板或类似的东西，你需要自己添加这个逻辑。

首先，您需要使用其他模板，例如：

const postTemplate = path.resolve('src/components/stories-template.js');
const productsTemplate = path.resolve('src/components/products-template.js');

然后，您需要在这里决定何时使用productsTemplate 而不是postTemplate：

createPage({
  path: node.frontmatter.path,
  component: postTemplate,
})

例如，可能在每个 Markdown 文件中，您都有 template YAML frontmatter：

createPage({
  path: node.frontmatter.path,
  component: node.frontmatter.template === 'product' ? productTemplate : postTemplate,
  })

以下是我在自己的网站上尝试以更通用的方式处理它的方法。 URL 结构决定了模板：如果它在/journal，它会得到 Journal 模板组件。如果在/shop，则获取 Shop 模板组件。

这可能不足以进入您现有的网站，但希望它能让您更接近：

const path = require('path')

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

  // I created an object to hold multiple templates.
  // In this case, my blog posts are at /journal and my
  // products are at /shop, so those are the keys I used here.
  // You might have a different system for determining what files
  // should use what template.
  const templates = {
    journal: path.resolve('src/templates/stories-template.js'),
    shop: path.resolve('src/templates/products-template.js'),
  }

  // Query for all Markdown “nodes”
  // Note I’m using a different GraphQL query, so you’ll need to replace this
  // with yours, or see if something with only the minimum requirements like
  // this works for you.
  return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      console.log(result.errors)
      reject(result.errors)
    }

    // Create pages from Markdown files
    result.data.allMarkdownRemark.edges.forEach(edge => {
      let slug = edge.node.fields.slug

      // Get the part of the slug we want, ex. journal
      let slugKey = slug.split('/')[1]

      // If the slug matches a template, use that, otherwise
      // fallback to the default journal template.
      // You could use your own logic here.
      let template = templates[slugKey] || templates['journal']

      createPage({
        path: slug, // required
        component: template,
        context: { slug: slug },
      })
    })
  })
}

我确信可以改进我使用 Promise 的方式，但除此之外这对我来说效果很好，并为您提供了一种添加更多模板的好方法。

Answer 2

@kennethormandy 的回答是正确的，将帮助您添加新的博客模板！

我只是想补充一点：如果您已经将每个模板的 markdown 内容组织到不同的目录中，那么在每个内容的 frontmatter 中添加一个 template 道具会感觉多余。

每个 MarkdownRemark 节点都有一个 fileAbsolutePath 字段，允许您根据内容的来源进行过滤。

例如：

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions
  const results = await graphql(`
    {
       allMarkdownRemark {
         edges {
           node {
             fileAbsolutePath
           }
           // ...other useful fields
         }
       }
    }
  `)

  if (results.errors) throw results.errors
  results.data.allMarkdownRemark.edges.forEach(({ node }) => {
    let template
    if (node.fileAbsolutePath.includes('/blogs/')) template = path.resolve('path/to/blog/template')

    createPage({ ... }) // ...etc
  })
}