GatsbyJS与Contentful：非首页页面的跨页面链接关联问题

你遇到的是Gatsby动态路由配置的典型问题——要让带/AllRecipes/前缀的Slug（比如/AllRecipes/schwarzwälder-kirschtorte）关联到template文件夹里的博客模板，不用在src/pages下新建组件。下面是具体的解决步骤：

1. 修改gatsby-node.js中的createPages API #

Gatsby的动态页面生成逻辑都集中在这个文件里，你需要在这里配置带前缀的路由，并关联你的博客模板：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  // 导入你的博客模板文件
  const blogPostTemplate = require.resolve("./src/templates/blog-template.js");

  // 查询Contentful中的所有博客数据
  const result = await graphql(`
    query {
      allContentfulBlogPost {
        nodes {
          slug
          # 这里添加你需要的其他字段，比如标题、内容等
        }
      }
    }
  `);

  // 循环生成带前缀的动态页面
  result.data.allContentfulBlogPost.nodes.forEach((node) => {
    createPage({
      // 设置带前缀的访问路径
      path: `/AllRecipes/${node.slug}`,
      // 关联指定的博客模板
      component: blogPostTemplate,
      // 传递给模板的上下文数据，模板可通过pageContext获取
      context: {
        slug: node.slug,
      },
    });

    // 如果需要保留原有的不带前缀路径，可以保留这段代码
    createPage({
      path: `/${node.slug}`,
      component: blogPostTemplate,
      context: {
        slug: node.slug,
      },
    });
  });
};

2. 确保模板能接收并使用pageContext数据 #

在你的博客模板文件（比如src/templates/blog-template.js）中，要通过pageContext拿到slug，再查询对应博客的详细数据：

import { graphql } from "gatsby";
import React from "react";

export default function BlogPost({ data }) {
  const post = data.contentfulBlogPost;
  return (
    <div className="blog-post">
      <h1>{post.title}</h1>
      {/* 这里渲染博客的其他内容，比如正文、图片等 */}
    </div>
  );
}

// 模板专属查询，用pageContext中的slug过滤目标博客
export const query = graphql`
  query($slug: String!) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      body {
        raw
      }
      # 添加你需要的其他字段
    }
  }
`;

3. 调整AllRecipes页面的链接生成逻辑 #

在你的非首页AllRecipes页面中，生成链接时要使用带前缀的路径：

import { Link } from "gatsby";

// 假设你已经从查询中拿到了博客列表数据posts
{posts.map(post => (
  <Link 
    key={post.slug} 
    to={`/AllRecipes/${post.slug}`}
    className="recipe-link"
  >
    {post.title}
  </Link>
))}

4. 清除缓存并重启开发服务器 #

Gatsby会缓存旧的页面配置，修改完gatsby-node.js后，执行以下命令确保新配置生效：

gatsby clean && gatsby develop

这样配置后，/AllRecipes/schwarzwälder-kirschtorte就能正确关联到你的博客模板，和原来的/schwarzwälder-kirschtorte一样正常渲染内容了。

内容的提问来源于stack exchange，提问作者user74843