如何在 Gatsby 中将多个 yaml 文件映射到 frontmatter [英] How to map multiple yaml files to frontmatter in Gatsby

问题描述

问题:

我在将第二个 .yaml 文件映射到 Gatsby 中的第二个 markdown frontmatter 字段时遇到问题.该项目用于杂志，第一个 yaml 文件存储每个作者的详细信息，第二个文件存储每个问题的详细信息.

author.yaml 文件像预期的那样工作，我可以在每个模板和页面上查询它，但 issue.yaml 文件只在两个地方工作:模板，我专门将其数据作为 gatsby 中的页面上下文传递-node，并且(莫名其妙地)用于带有frontmatter特色"字段=== true的降价文件.对于不存在特色"的映射数组，或者当它为假时，每个应该从 issue.yaml 中提取数据的查询都会给出TypeError:无法读取 null 的属性‘id’".

我怀疑这是因为我的 markdown 文件中的 issue 字段不是第一个字段(即作者，并且已经映射到 author.yaml 文件).据我所知，我已经实现了完全相同的两个 yaml 文件.

我尝试过的事情:

我尝试查询我认为应该自动生成的 allAuthorYaml 和 allIssueYaml 节点，但我无法让它们中的任何一个正常工作.我还尝试在 gatsby-node 中创建模式自定义，但我无法弄清楚如何调整教程以定义我需要全局(超出我的头脑)的节点.我在某处读到我可以使用 import YAMLData from "../data/issue.yaml" 直接导入 yaml 数据，然后直接创建一个数组，但它也给了我空/未定义的错误.

我是业余爱好者，根本没有编程背景，这可能是问题的很大一部分.不过，我会很感激任何人可能有的任何帮助.如果有人碰巧发现我的代码需要改进的任何其他地方，一定要告诉我！

我使用的启动器是 https://www.gatsbyjs.org/starters/JugglerX/gatsby-serif-theme/.
我的存储库位于 https://github.com/ljpernic/HQ3.1/tree/总部帮助.

再次感谢！

<小时>

我的 gatsby 配置:

<预><代码>模块.出口 = {站点元数据:{title: '避风港季刊',描述:一本科幻奇幻杂志"，提交: {电话:'XXX XXX XXX',电子邮件:'[e-mail]'，},菜单链接:[{name: '小说',链接:'/小说'，},{name: '非小说',链接:'/非小说'，},{name: '来自未来的信',链接:'/未来'，},{name: '完整问题',链接:'/fullissues'，},{name: '贡献者',链接:'/贡献者'，},{name: '关于',链接:'/关于'，},{name: '支持',链接:'/支持'，},{name: '提交',链接:'/提交'，},],},插件: ['盖茨比插件-sass','盖茨比-变压器-json','盖茨比-变压器-备注','盖茨比插件反应头盔'，`gatsby-transformer-sharp`，`gatsby-plugin-sharp`，`gatsby-plugin-catch-links`，{解析:'gatsby-source-filesystem',选项: {路径:`${__dirname}/src/pages`，name: '页面',},},/* {解析:'gatsby-source-filesystem',选项: {路径:`${__dirname}/src/posts`，name: '帖子',},},*/{解析:'gatsby-source-filesystem',选项: {路径:`${__dirname}/src/data`，name: '数据',},},{解析:'gatsby-source-filesystem',选项: {路径:`${__dirname}/src/images`，name: '图像',},},{解决:盖茨比变压器备注"，选项: {插件: [{解析:`gatsby-remark-images`，选项: {最大宽度:1200，质量:95，},},],},},{解决:'gatsby-plugin-google-analytics'，选项: {跟踪ID:指导?指南 : 'UA-XXX-1',//将跟踪脚本放在头部而不是身体头:假的，},},`gatsby-transformer-yaml`，],映射:{//3. 将作者映射到 author.yaml"MarkdownRemark.frontmatter.author": `AuthorYaml`,"MarkdownRemark.frontmatter.issue": `IssueYaml`,},};

我的 gatsby 节点:

const _ = require('lodash');const fs = require("fs")const yaml = require("js-yaml")//从 Markdown 文件创建页面export.createPages = ({ graphql, actions }) =>{const { createPage } = 动作；const ymlDoc = yaml.safeLoad(fs.readFileSync("./src/data/author.yaml", "utf-8"))const ymlIssueDoc = yaml.safeLoad(fs.readFileSync("./src/data/issue.yaml", "utf-8"))返回新的承诺((解决，拒绝)=> {解决(图ql(`询问 {小说档案:allMarkdownRemark(过滤器:{fileAbsolutePath:{正则表达式:/fiction/"}}排序:{字段:[frontmatter___date]，顺序:DESC}){边{节点{ID前题{类别精选小路标题日期(格式字符串:DD MMMM YYYY")}摘抄}}}nonfictionarchive: allMarkdownRemark(过滤器:{fileAbsolutePath:{正则表达式:/非小说/"}}排序:{字段:[frontmatter___date]，顺序:DESC}){边{节点{ID前题{类别精选小路标题日期(格式字符串:DD MMMM YYYY")}摘抄}}}未来档案:allMarkdownRemark(过滤器:{fileAbsolutePath:{正则表达式:/letters/"}}排序:{字段:[frontmatter___date]，顺序:DESC}){边{节点{ID前题{类别精选小路标题日期(格式字符串:DD MMMM YYYY")}摘抄}}}问题存档:allMarkdownRemark(过滤器:{fileAbsolutePath:{正则表达式:/"}}排序:{字段:[frontmatter___date]，顺序:DESC}){边{节点{ID前题{类别精选小路标题日期(格式字符串:DD MMMM YYYY")}摘抄}}}作者存档:allMarkdownRemark(过滤器:{fileAbsolutePath:{正则表达式:/"}}排序:{字段:[frontmatter___date]，顺序:DESC}){边{节点{ID前题{类别精选小路标题日期(格式字符串:DD MMMM YYYY")}摘抄}}}}`，).then((结果) => {ymlDoc.forEach(元素 => {创建页面({路径:element.idpath，组件:require.resolve("./src/templates/eachauthor.js"),/*创建个人作者页面*/语境: {idname: element.id,生物:element.bio，推特:element.twitter，图片:元素.图片，故事:element.stories，},});});ymlIssueDoc.forEach(element => {创建页面({路径:element.idpath，组件:require.resolve("./src/templates/eachissue.js"),/*creates INDIVIDUAL ISSUE PAGES*/语境: {issueidname: element.id,文字:element.text，currentcover: element.currentcover,艺术家:element.artist，艺术家生物:element.artistbio，艺术家形象:element.artistimage，},});});result.data.fictionarchive.edges.forEach(({ node }) => {const component = path.resolve('src/templates/eachpost.js');/*创建个人小说页面*/创建页面({路径:node.frontmatter.path，成分，语境: {id: node.id,},});});result.data.nonfictionarchive.edges.forEach(({ node }) => {const component = path.resolve('src/templates/eachpost.js');/*创建单独的非小说页面*/创建页面({路径:node.frontmatter.path，成分，语境: {id: node.id,},});});result.data.futurearchive.edges.forEach(({ node }) => {const component = path.resolve('src/templates/eachpost.js');/*创建单个字母页*/创建页面({路径:node.frontmatter.path，成分，语境: {id: node.id,},});});result.data.issuesarchive.edges.forEach(({ node }) => {const component = path.resolve('src/templates/eachpost.js');/*创建个人问题页面；更改模板以更改每个问题页面*/创建页面({路径:node.frontmatter.path，成分，语境: {id: node.id,},});});const FICposts = result.data.fictionarchive.edges/*创建小说列表页面*/const FICpostsPerPage = 10const FICnumPages = Math.ceil(FICposts.length/FICpostsPerPage)Array.from({ length: FICnumPages }).forEach((_, i) => {创建页面({路径:我 === 0 ?`/fiction`:`/fiction/${i + 1}`，组件:path.resolve('src/templates/fictionarchive.js'),语境: {限制:FICpostsPerPage，跳过:我 * FICpostsPerPage，FICnumPages，FICcurrentPage: i + 1,},});});const NONFICposts = result.data.nonfictionarchive.edges/*创建非小说列表页面*/const NONFICpostsPerPage = 10const NONFICnumPages = Math.ceil(NONFICposts.length/NONFICpostsPerPage)Array.from({ length: NONFICnumPages }).forEach((_, i) => {创建页面({路径:我 === 0 ?`/non-fiction` : `/non-fiction/${i + 1}`,组件:path.resolve('src/templates/nonfictionarchive.js'),语境: {限制:非NFICpostsPerPage，跳过:我 * NONFICpostsPerPage，非信息页数，NONFICcurrentPage: i + 1,},});});const FUTposts = result.data.futurearchive.edges/*从未来列表页面创建字母*/const FUTpostsPerPage = 10const FUTnumPages = Math.ceil(FUTposts.length/FUTpostsPerPage)Array.from({ length: FUTnumPages }).forEach((_, i) => {创建页面({路径:我 === 0 ?`/future`:`/future/${i + 1}`，组件:path.resolve('src/templates/futurearchive.js'),语境: {限制:FUTpostsPerPage，跳过:我 * FUTpostsPerPage，FUTnumPages，FUTcurrentPage: i + 1,},});});const FULLposts = result.data.issuesarchive.edges/*创建问题列表页面*/const FULLpostsPerPage = 10const FULLnumPages = Math.ceil(FULLposts.length/FULLpostsPerPage)Array.from({ length: FULLnumPages }).forEach((_, i) => {创建页面({路径:我 === 0 ?`/fullissues`:`/fullissues/${i + 1}`，组件:path.resolve('src/templates/issuesarchive.js'),语境: {限制:FULLpostsPerPage，跳过:我 * FULLpostsPerPage，FULLnumPages,FULLcurrentPage: i + 1,},});});const AUTposts = result.data.authorarchive.edgesconst AUTpostsPerPage = 10const AUTnumPages = Math.ceil(AUTposts.length/AUTpostsPerPage)Array.from({ length: AUTnumPages }).forEach((_, i) => {创建页面({路径:i === 0 ?`/contributors`:`/contributors/${i + 1}`，组件:path.resolve('src/templates/authorarchive.js'),语境: {限制:AUTpostsPerPage，跳过:i * AUTpostsPerPage，AUTnumPages,AUTcurrentPage: i + 1,},});});解决();}),);});};

我的首页(缩短):

import { graphql, withPrefix, Link } from 'gatsby';从gatsby-image"导入图像；从反应头盔"导入头盔；从 '../components/SEO' 导入 SEO；从'../layouts/index'导入布局；const Home = (props) =>{//这是头版，包括精选故事、最新故事和最新问题const json = props.data.allFeaturesJson.edges;const posts = props.data.allMarkdownRemark.edges;返回 (<Layout bodyClass="page-home"><SEO title="首页"/><头盔><元名称=避风港季刊"content="一本科幻奇幻杂志"/></头盔>{/*特色*/}<div className="intro pb-1"><div className="容器"><div className="row2 justify-content-start"><div className="grid-container pt-2"><div className="宽"><div className="col-12"><链接到="/精选"><h4>专题故事</h4></链接><小时/>

{帖子.filter(post => post.node.frontmatter.featured === true)/*这里只查看带有featured:true的md文件*/.map(({ node: post }) => {返回 (<div className="container" key={post.id}><h1pb><Link to={post.frontmatter.path}>{post.frontmatter.title}</Link><h2>通过<链接到={post.frontmatter.author.idpath}>{post.frontmatter.author.id}</Link>在 <Link to={post.frontmatter.issue.idpath}>{post.frontmatter.issue.id}</Link></h2>/*这是这个页面上唯一一个问题 YAML 数组似乎可以工作的地方.它仅在精选时有效 === 真，这太疯狂了*/<p>{post.excerpt}</p>

)})}

<div className="thin">{帖子.filter(post => post.node.frontmatter.featured === true)/*这里只查看带有featured:true的md文件*/.map(({ node: post }) => {返回 (<链接到="/最新"><图像类名="topimage"fixed={post.frontmatter.currentcover.childImageSharp.fixed}/*这从md文件中提取图像，特征为:true(当前封面)*//></链接>)})}