Настройте gatsby-transformer-remark, чтобы добавить классы по умолчанию

ТЛ, ДР: Использовать gatsby-remark-default-html-attrs

Gatsby gatsby-transformer-remark использует mdast-util-to-hast для преобразования узлов уценки в узлы html, которые затем преобразуются в необработанный HTML. Если узел уценки имеет объект data.hProperties, он будет преобразован в атрибуты html.

Допустим, вы хотите добавить имя класса foo ко всем узлам h1. Вам нужно:

• найдите узел уценки, который в конечном итоге будет преобразован в html-элемент h1
• добавить 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.info(h1Nodes) 
  // this yields  
  // [{ type: "heading", children: [{ type: "text", value: "..." }] }, ...]
}

2. Добавьте className в его data.hProperties

Мы можем изменить узел напрямую.

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

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

Вот и все, теперь все h1 должны иметь класс foo.

Это особенно интересный вопрос для меня, так как я изучаю Юнист и его экосистему, которая поддерживает remark; так что спасибо за это.

Я делаю простой плагин, который здесь немного более общий, не стесняйтесь попробовать и дайте мне знать, если что-то пошло не так.

Также есть gatsby-remark-classes (Гитхаб, НПМ), который позволяет указать classMap в вашем gatsby-config.js.

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-classes`,
        options: {
          classMap: {
            "heading[depth=1]": "title",
            "heading[depth=2]": "subtitle",
            paragraph: "para",
          }
        }
      }
    ]
  }
}

Его функциональность кажется идентичной gatsby-remark-default-html-attrs. Как ни странно, эти два плагина были созданы с разницей в один день (1 февраля 2019 г. и 2 февраля 2019 г. соответственно).