Gatsby: 帮助使 yaml 文件更强大

创建于 2017-11-06 · 3评论 · 资料来源: gatsbyjs/gatsby

大家好，我能帮我在 yaml 页面中写下 markdown 吗？我正在尝试从 jekyll 切换到 gatsby，但 jekyll 的一个不错的功能是流动模板语言，它允许您通过markdownify管道传递任何字符串（例如来自 yaml 文件）。当我想要在页面上构建多条信息但在 yaml 文件中组织在一起时，这很有用。例子：

- title: My Title
  image: ./assets/image.png
  description: >
    Here is a long winded description that includes a [link](https://code-somewhere.com).
- title: Second Item
  image: ./assets/image2.png
  description >
    more text ...

类似地，以这种方式加载图像似乎是不可能的，我对此有一些hacky 解决方案，例如将所有图像导入文件中的其他位置，但是有没有办法让 webpack 知道复制pages/任何图像

资料来源

andykais

👍3

最有用的评论

在图像上，如果你使用 gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp，你可以查询这些图像。

参见 gatsbyjs.org 如何查询作者头像的例子

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/博客/作者.yaml

在通过 markdown 运行 yaml 字段时 - 您可以创建子节点，将其媒体类型指定为 markdown，然后 gatsby-transformer-remark 会将它们转换为 html 例如https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84fse /gatsby-source-contentful/src/normalize.js#L143

对不起，如果那是超级高级并且不太可行。 Gatsby 专注于简化自定义数据转换管道的设置。对于常见的任务，人们可以创建更高级别的插件，这些插件会自动为您设置这样的东西，但我不知道还有没有人使用 yaml => markdown => html。

要实现这一点，您需要深入研究 Gatsby 的文档并查看插件以了解如何做您想做的事情。

KyleAMathews 于 2017-11-07

👍3

所有3条评论

在图像上，如果你使用 gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp，你可以查询这些图像。

参见 gatsbyjs.org 如何查询作者头像的例子

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/博客/作者.yaml

要实现这一点，您需要深入研究 Gatsby 的文档并查看插件以了解如何做您想做的事情。

KyleAMathews 于 2017-11-07

👍3

感谢您的建议，我认为我现在还没有准备好投入那么多时间来制作 gatsby 插件。我有这样的天真解决方案：

import data from './_data.yaml'
import markdownIt from 'markdown-it'
const md = markdownIt({
  html: true,
  linkify: true
})
const loadedData = data.map(item => ({
  ...item,
  image: item.image && require(item.image),
  description: md.render(item.description)
}))

这在构建阶段仍然可能发生，因此它适用于我的目的。我认为问题在于 graphql 旨在首先构建数据并为多个页面使用类似的模板。我正在遵循这样的“模块”结构：
```
页数/
一页/
索引.js
_data.yml
资产/
img1.png
另一页/
...

andykais 于 2017-11-08

👍2

一个简单的方法是使用 onCreateNode 编译 markdown 字段。 https://www.gatsbyjs.org/tutorial/part-four/#programmatically -creating-pages-from-data 并将编译的字段添加为createNodeField的新字段。

您只需在 gatsby-node.js 中执行此操作

KyleAMathews 于 2017-11-09

👍2

此页面是否有帮助？

0 / 5 - 0 等级

Gatsby: 帮助使 yaml 文件更强大

最有用的评论

所有3条评论

相关问题