Question

我正在将gatsby与插件gatsby-source-filesystem和gatsby-transformer-remark配合使用，以将降价文件显示为页面，如official docs中所述。

它的伟大工程，但我正在寻找一种方式来默认类添加到所有从降价转变的元素。

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

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

# My markdown heading
{.title}

## Subtitle
{.subtitle}

转换为

<h1 class="title">My markdown heading</h1>
<h2 class="subtitle">Subtitle</h2>

我寻找一种方式一次为每个元件，并让它们自动应用，而不必在降价文件来指定他们定义默认类。

Answer 1

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

盖茨比gatsby-transformer-remark使用mdast-util-to-hast转换降价节点HTML节点，然后字符串化成原始HTML。如果降价节点具有data.hProperties对象，它会被转换成HTML属性。

让我们说你要添加的类名foo所有h1节点。您需要：

发现，最终会被转化成一个降价节点h1 html元素
将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：

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

1。找到降价节点

将为插件提供一个markdownAST对象，使您可以查找和修改节点。

我将使用unist-util-select帮助找到正确的节点。它配备了gatsby-transformer-remark，但如果由于某种原因，它不工作，只是重新安装。

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

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: "..." }] }, ...]
}

2。将className添加到其data.hProperties

我们可以直接修改节点。

  const h1Nodes = selectAll('heading[depth=1]', markdownAST);

- console.log(h1Nodes)
  // node doesn't always have data
+ if (!node.data) node.data = {};
+ node.data.hProperties = {
+   className: 'foo'
+ }

就是这样，所有h1应该有一个foo现在类

这对我来说是一个特别有趣的问题，因为我正在了解Unist及其为remark提供动力的生态系统；所以谢谢你。

我制作了simple plugin that's a bit more generic here，请随时尝试并告诉我是否失败。

Answer 2

还有gatsby-remark-classes（GitHub，NPM），可让您在@app.route("/update", methods=["POST"]) def update(): updatedname = request.form.get("updatedname") beforename = request.form.get("beforename") student = Student.query.filter_by(name=updatedname).first() student.name = updatedname db.session.commit() return redirect("/")中指定classMap。

gatsby-config.js

其功能似乎与gatsby-remark-default-html-attrs相同。有趣的是，这两个插件是在一天之内（分别是2019年2月1日和2019年2月2日）创建的。

配置盖茨比，变压器备注中添加缺省类

2 个答案:

0。设置

1。找到降价节点

2。将className添加到其data.hProperties