配置gatsby transformer备注以添加默认类

我使用gatsby和插件gatsby source filesystem和gatsby transformer remark将标记文件显示为页面，如中所述

它工作得很好，但我正在寻找一种方法，将默认类添加到从markdown转换而来的所有元素中

假设我希望每个元素都有一类标题，默认情况下元素都有一类副标题

我设法用gatsby remark attr做了类似的事情，但有了它，我只能以编程方式在markdown文件中添加类。看起来是这样的：

# My markdown heading
{.title}

## Subtitle
{.subtitle}

皈依

我的降价标题 字幕 我正在寻找一种方法，为每个元素定义一次默认类，并自动应用它们，而不必在标记文件中指定它们。

TL，DR:Use

Gatsby的Gatsby transformer备注用于将标记节点转换为html节点，然后将其字符串化为原始html。如果标记节点具有data.hProperties对象，则该对象将转换为html属性

假设您想将类名foo添加到所有h1节点。您需要：

找到最终将转换为h1html元素的markdown节点 将类名添加到其data.hproperty 0安装程序 首先，您需要一个自定义插件来修改transformer备注的标记节点。谢天谢地，使用gatsby创建本地插件非常简单：

在根目录下创建一个“plugins”文件夹 mkdir插件 mkdir插件/备注默认类名 cd插件/备注默认类名 npm init-y touch index.js 现在，您将获得以下结构：

root
  |--src
  |--gatsby-config.js
  `--plugins
      `--remark-default-class-name
           |--package.json
           `--index.js

然后将新的本地插件添加到gatsby-config.js：

//gatsby-config.js module.exports={ 插件：[ { 决议：`盖茨比变压器备注'， 选项：{ 插件：[ +`备注默认类名` ], }, }, 1.查找标记节点 插件将被赋予一个markdownAST对象，它允许您查找和修改节点

我会使用unist-util-select来帮助找到正确的节点。它附带了gatsby-transformer-remark，但是如果由于某些原因它不起作用，只需重新安装它

从这里开始，找到节点就很简单了：

const{selectAll}=require'unist-util-select'； module.exports={markdownAST}=>{ //“heading”在降价中等同于“h1…h6”。 //指定[depth]使我们能够以正确的标题标记为目标。 const h1 nodes=selectAll'heading[depth=1]”，markdownAST； console.logh1节点 //这就产生了 //[{type:heading，children:[{type:text，value:…}]}，…] } 2.将类名添加到其data.hproperty 我们可以直接修改节点

const h1 nodes=selectAll'heading[depth=1]”，markdownAST； -console.logh1节点 //节点并不总是有数据 +如果！node.data node.data={}； +node.data.hProperties={ +类名：“foo” + } 就这样，所有h1现在都应该有一个foo类

这对我来说是一个特别有趣的问题，因为我正在学习和它的生态系统，这是评论的动力；所以谢谢

我做了一个简单的测试，可以尝试一下，如果失败了，请告诉我。

还有一个，它允许您在gatsby-config.js中指定一个类映射

{ 决议：`盖茨比变压器备注'， 选项：{ 插件：[ { 决议：`盖茨比评论类'， 选项：{ 类映射：{ 标题[深度=1]：标题， 标题[深度=2]：副标题， 第段：第， } } } ] } }

---

它的功能似乎与相同。有趣的是，这两个插件分别在2019年2月1日和2019年2月2日的一天内创建。

感谢这一精心解释的答案。我也尝试创建了一个插件，但在浏览了你的插件后，我的插件的灵活性大大降低，更容易出错。Will de请尝试一下你的插件，再次感谢。谢谢@chrisg86，你实际上已经找到了它，所以我没有那么大的帮助！我想我偶然发现了令人敬畏的unist util select是使我的实现更灵活的主要原因。如果我坚持使用unist util访问，我想我会做与你的非常类似的事情。这是一个好问题，再次感谢。有趣的事实在另一个解决方案的评论中解释：