Javascript 如何在gatsby中创建yaml和markdown之间的多重映射
我学《盖茨比》已经半个月了,不幸的是我很难理解内容之间的关系和结构 在本例中,我尝试创建author和taxonomy标记。对于作者来说,我成功地做到了这一点,但由于某种原因,当我添加额外的映射时,结果变成了一个错误 我的动机是为分类法获取动态数据,这样我就不必在模板中硬编码。我在github中搜索了类似的问题,但似乎没有找到答案 这是我的yaml和降价的例子Javascript 如何在gatsby中创建yaml和markdown之间的多重映射,javascript,reactjs,gatsby,Javascript,Reactjs,Gatsby,我学《盖茨比》已经半个月了,不幸的是我很难理解内容之间的关系和结构 在本例中,我尝试创建author和taxonomy标记。对于作者来说,我成功地做到了这一点,但由于某种原因,当我添加额外的映射时,结果变成了一个错误 我的动机是为分类法获取动态数据,这样我就不必在模板中硬编码。我在github中搜索了类似的问题,但似乎没有找到答案 这是我的yaml和降价的例子 # authors.yaml - id: JohnDoe twitter: "@JohnDoe" email: "me@emai
# authors.yaml
- id: JohnDoe
twitter: "@JohnDoe"
email: "me@email.com"
bio: Lorem
desc: Ipsum
错误结果
"gatsby-node.js" threw an error while running the createPages lifecycle:
runner.query(...).then is not a function
43 | return new Promise((resolve, reject) => {
44 | resolve(
> 45 | graphql(
| ^
46 | `
47 | query {
48 | pages: allMarkdownRemark(
File: gatsby-node.js:45:13
环境
文件内容
gatsby config.js
//gatsby-config.js
module.exports={
/*映射*/
映射:{
'MarkdownRemark.frontmatter.tags':'TagsYaml`,
“MarkdownRemark.frontmatter.author”:“AuthorsYaml”,
},
插件:[
...
“盖茨比变压器yaml”,
{
解析:`gatsby源文件系统`,
选项:{
名称:`data`,
路径:`${uuuu dirname}/content/data`,//data dir
},
},
...
]
}
gatsby node.js
//gatsby-node.js
const path=require('path');
const=require('lodash');
const{paginate}=require('gatsby-awesome-pagination');
const{createFilePath}=require(`gatsby source filesystem`);
const{fmImagesToRelative}=require('gatsby-remark-relative-images');
exports.onCreateNode=({node,getNode,actions})=>{
fmImagesToRelative(节点);
const{createNodeField}=操作;
//在每次降价时创建字段slug
if(node.internal.type==`MarkdownRemark`){
const slug=createFilePath({node,getNode,basePath:`content`})
createNodeField({
节点,
名称:`slug`,
值:slug,
})
}
//在每个作者yaml上创建slug字段
if(node.internal.type==`TagsYaml`){
const slug=createFilePath({node,getNode,basePath:`content`})
createNodeField({
节点,
名称:`slug`,
值:slug,
})
}
//在每个作者yaml上创建slug字段
if(node.internal.type==`AuthorsYaml`){
const slug=createFilePath({node,getNode,basePath:`content`})
createNodeField({
节点,
名称:`slug`,
值:slug,
})
}
}
//从标记文件创建页面
exports.createPages=({graphql,actions})=>{
const{createPage}=操作;
返回新承诺((解决、拒绝)=>{
决心(
图形ql(
`
质疑{
页码:AllMarkdown备注(
筛选器:{fileAbsolutePath:{regex://pages/“}字段:{draft:{eq:false}}}
排序:{fields:[frontmatter\uuuuuuu title],顺序:DESC}
)
{
边缘{
节点{
身份证件
前沿物质{
类型
模板
标题
鼻涕虫
}
}
}
}
帖子:AllMarkdown备注(
筛选器:{fileAbsolutePath:{regex:/posts/“}字段:{draft:{eq:false}}}
排序:{fields:[frontmatter\uuuuuuu title],顺序:DESC}
)
{
边缘{
节点{
身份证件
前沿物质{
类型
模板
标题
鼻涕虫
标签
}
}
}
}
标记组:allMarkdownRemark(
筛选器:{fileAbsolutePath:{regex:“/posts/”},
字段:{draft:{eq:false}}},
排序:{fields:[frontmatter\uuuuuuuuuuuuuuuuuuuuuuuuuu日期],
订单:DESC},限额:2000)
{
组(字段:frontmatter\uuuuu标记){
字段值
}
边缘{
节点{
身份证件
前沿物质{
类型
标题
鼻涕虫
标签
}
}
}
}
作者:allAuthorsYaml
{
边缘{
节点{
身份证件
啁啾
生物
田地{
鼻涕虫
}
}
}
}
}
`,
)。然后((结果)=>{
//页面
result.data.pages.edges.forEach(({node})=>{
//const component=path.resolve({'src/templates/custom/about.js'});
创建页面({
路径:node.frontmatter.slug,
组件:path.resolve(`./src/templates/pages/${node.frontmatter.template}.js`),
背景:{
id:node.id,
},
});
});
//博客
result.data.posts.edges.forEach(({node})=>{
const component=path.resolve(`./src/templates/posts/${node.frontmatter.template}.js`);
创建页面({
路径:`/blog/${node.frontmatter.slug}`,
组成部分,
骗局
---
title: Bar
author: ["JohnDoe"]
tags: ["Foo"]
---
"gatsby-node.js" threw an error while running the createPages lifecycle:
runner.query(...).then is not a function
43 | return new Promise((resolve, reject) => {
44 | resolve(
> 45 | graphql(
| ^
46 | `
47 | query {
48 | pages: allMarkdownRemark(
File: gatsby-node.js:45:13
System:
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz
Binaries:
Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.7 - C:\Users\Yudy\AppData\Roaming\npm\npm.CMD
Languages:
Python: 2.7.16 - /cygdrive/c/Python27/python
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.19.5 => 2.19.5
gatsby-awesome-pagination: ^0.3.5 => 0.3.5
gatsby-image: ^2.2.39 => 2.2.39
gatsby-plugin-canonical-urls: ^2.1.20 => 2.1.20
gatsby-plugin-catch-links: ^2.1.25 => 2.1.25
gatsby-plugin-draft: 0.0.5 => 0.0.5
gatsby-plugin-react-helmet: ^3.1.22 => 3.1.22
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sass: ^2.1.27 => 2.1.27
gatsby-plugin-sharp: ^2.4.0 => 2.4.0
gatsby-remark-autolink-headers: ^2.1.24 => 2.1.24
gatsby-remark-images: ^3.1.42 => 3.1.42
gatsby-remark-normalize-paths: ^1.0.0 => 1.0.0
gatsby-remark-prismjs: ^3.3.31 => 3.3.31
gatsby-remark-relative-images: ^0.2.3 => 0.2.3
gatsby-source-filesystem: ^2.1.46 => 2.1.46
gatsby-transformer-remark: ^2.6.50 => 2.6.50
gatsby-transformer-sharp: ^2.3.13 => 2.3.13
gatsby-transformer-yaml: ^2.2.24 => 2.2.24
├───content
│ ├───data
│ │ ├───authors.js
│ │ └───tags.js
│ ├───images
│ │ └───foo.jpg
│ ├───pages
│ │ └───lorem.md
│ └───posts
│ └───ipsum.md
├───src
│ ├───pages
│ └───templates
│─── static
│─── gatsby-browser.js
│─── gatsby-config.js
│─── gatsby-node.js
└─── package.json