GatsbyJS :访问保存在降价文件(GraphQL)中的博客文章的不同部分

Posted

技术标签:

【中文标题】GatsbyJS :访问保存在降价文件(GraphQL)中的博客文章的不同部分【英文标题】:GatsbyJS : Accessing different sections of a blog post saved in markdown file (GraphQL) 【发布时间】:2018-04-20 04:30:25 【问题描述】:

我正在使用 Gatsby JS,我正在尝试制作一个使用 Markdown 文件生成博客文章的博客。我的博文模板中有不同的部分,我想将它们放入我的博文模板中的不同部分。但我不确定如何在我的 Markdown 文件中单独访问它们。

我知道如何获取整个文本以及如何获取我的frontmatter 的单独部分,但我不知道我将如何获取,例如,仅从我的文本中获取“成分”信息。

现在我正在通过将博客文章的不同部分直接包含在 frontmatter 中来解决这个问题,因此我可以使用 graphQL 访问这些部分,但我知道这不是 frontmatter 应该用于的。

有没有办法将我的 Markdown 文本部分拆分为多个部分,以便我可以在 GraphQL 查询中使用这些单独的部分?

这就是我所拥有的:

---
title: "Cake"
date: "09-12-2017"
post: "2"

Name: "Chocolate Cake"
Author: "DJ"
Source: "Book"

Ingredients: "milk, dark chocolate, coca cola, skittles, tea, liquorice"

Subtitle1: "First Heading |"
Subtitle2: "Second Heading |"
Subtitle3: "Third Heading |"

Text1: "first text"
Text2: "second text"
Text3: "third text"
---

My excerpt goes here

我想做这样的事情:

---
title: "Cake"
date: "09-12-2017"
post: "2"
---

Name: " Chocolate Cake"
Author: "DJ"
Source: "Book"

Ingredients: "milk, dark chocolate, coca cola, skittles, tea, liquorice"

Subtitle1: "First Heading |"
Subtitle2: "Second Heading |"
Subtitle3: "Third Heading |"

Text1: "first text"
Text2: "second text"
Text3: "third text"

Excerpt: my excerpt goes here

然后能够以某种方式获取这些单独的信​​息片段以在博客文章模板中使用。

【问题讨论】:

【参考方案1】:

Gatsby 的数据层具有挂钩,可让您对数据进行自定义转换,例如就像将 Markdown 文件拆分为结构化字段一样。

为此,请在您的 gatsby-node.js 文件中实现 onCreateNode 并解析您的降价文件并使用 createNodeField 将字段添加到 MarkdownRemark 节点

【讨论】:

感谢您的回复!我在我的 gatsby-node.js 中实现了 onCreateNode,并使用 createNodeField 在 MarkdownRemark 节点上添加了一个字段,然后我在我的模板 blog-post.js 文件中访问了该字段。我知道我从 createNodeField 上的 'value' 参数获取节点字段值,现在这只是我写的一些文本。但是,如果我希望节点字段的值成为降价文件的特定部分(如特定的 div),我如何将我的降价文件分成这些部分并将它们连接到每个节点字段值?

以上是关于GatsbyJS :访问保存在降价文件(GraphQL)中的博客文章的不同部分的主要内容,如果未能解决你的问题,请参考以下文章

GatsbyJS 博客中的分页

GatsbyJS - 如何在 GraphQL 中查询长文本内容字段

如何在 markdown frontmatter 中创建字符串列表?

如何在容器类组件中使用 GraphQL 查询

可以从降价链接控制 Jupyter 中的绘图图吗?

基于内部片段的graphql过滤器(gatsbyJS)