配置gatsby-transformer-remark以添加默认类

Question

我正在使用带有插件的gatsby gatsby-source-filesystem并将gatsby-transformer-remarkmarkdown文件显示为页面，如官方文档中所述。

效果很好，但是我正在寻找一种方法，将默认类添加到从markdown转换的所有元素中。

假设我希望每个<h1>元素都具有的类title，并且默认情况下<h2>元素要具有的类subtitle。

我设法通过进行了类似的操作gatsby-remark-attr，但是我只能以编程方式在markdown文件中添加类。看起来像这样：

# My markdown heading
{.title}

## Subtitle
{.subtitle}

转换为

# My markdown heading
{.title}

## Subtitle
{.subtitle}

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

Answer 1

TL，DR：使用gatsby-remark-default-html-attrs

盖茨比的gatsby-transformer-remark使用mdast-util-to-hast转换降价节点到节点的HTML，然后字符串化到原始的HTML。如果markdown节点有一个data.hProperties对象，它将被转换为html属性。

假设您要向foo所有h1节点添加类名称。您需要：

• 找到最终将被转换为h1html元素的markdown节点
• 将className添加到其 data.hProperties

0.设置

首先，您需要一个自定义插件来修改的降价节点transformer-remark。幸运的是，使用gatsby创建本地插件很简单：

# Create a `plugins` folder at your root
mkdir plugins
mkdir plugins/remark-default-class-name
cd plugins/remark-default-class-name
npm init -y
touch index.js

现在，您将获得以下结构：

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

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

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

1.找到降价节点

插件将被赋予一个markdownAST对象，使您可以查找和修改节点。

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

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

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
  +       `remark-default-class-name`
        ],
      },
    },

2.将className添加到其data.hProperties

我们可以直接修改节点。

const { selectAll } = require('unist-util-select');

module.exports = ({ markdownAST }) => {
  // `heading` is equivalent to `h1...h6` in markdown.
  // specify [depth] allow us to target the right heading tag.
  const h1Nodes = selectAll('heading[depth=1]', markdownAST);

  console.log(h1Nodes) 
  // this yields  
  // [{ type: "heading", children: [{ type: "text", value: "..." }] }, ...]
}

就是这样，所有人现在都h1应该上一foo堂课。

这对我来说是一个特别有趣的问题，因为我正在学习Unist及其生态系统，remark；非常感谢。

我制作了一个简单的插件，在这里有点通用，随时尝试一下，让我知道是否失败。