我希望我的文章标题为标题情况。
<Helmet>
的地方。我想,以避免重复和遗漏参考的可能性。有没有办法覆盖frontmatter?我试图改变它gatsby-node.js
,但我不知道在哪里添加/更改。
我发现了一个解决方案,我认为这是一个黑客。该frontmatter可以通过之前它被推到节点阵列更新所述节点创建一个节点onCreateNode
的期间被覆盖。我充分利用postNodes
阵列(一个全局数组的盖茨比节点范围)来创建我的博客页面。
createNodeField({ node, name: "slug", value: slug })
node.frontmatter.title = _.startCase(_.toLower(node.frontmatter.title))
postNodes.push(node)
然后创建exports.createPages
后的页面时,该postNodes
使用具有更新的值。
let idx = 0;
postNodes.map(node => {
let previous = idx - 1 < 0 ? postNodes[postNodes.length - 1] : postNodes[idx - 1]
let next = idx + 1 >= postNodes.length ? postNodes[0] : postNodes[idx + 1]
createPage({
path: node.fields.slug,
component: postPage,
context: {
slug: node.fields.slug,
prev: previous.fields.slug,
next: next.fields.slug
}
})
idx += 1;
})
注意一个和下一个不是在写代码的时间工作,所以需要对其进行修改。
我碰巧需要修改的方式gatsby-transformer-remark
修改frontmatter,这让我想起了这个问题。你做了它的方式是完全正常海事组织,我只是想提供另一种选择。这里是你如何能覆盖frontmatter:
在内部,gatsby-transformer-remark
使用graymatter
解析降价的frontmatter(MD治疗如YAML)。我们可以修改graymatter的默认解析器行为直接覆盖frontmatter。
// should come with `gatsby-transformer-remark` by default
// if it's missing, install it `yarn add js-yaml`
const yaml = require('js-yaml');
const customParser = (str) => {
const result = yaml.safeLoad(str);
// modify `title`. In Gatsby, `title` is guaranteed to exist,
// but you might want to add a check for other properties.
if (result.title) {
result.title = result.title.toUpperCase();
}
return result;
}
然后将它传递到像gatsby-transformer-remark
{
resolve: `gatsby-transformer-remark`,
options: {
+ engines: {
+ yaml: customParser,
+ },
plugins: [
...
],
},
},
盖茨比查询结果:
{
"data": {
"markdownRemark": {
"frontmatter": {
"title": "I AM CAPITALIZED"
}
}
}
}