markdown - Gridsome如何使用源文件系统在markdown中呈现链接图标？

Question

在gridsome.config.js中使用 Gridsome 的源文件系统插件：

plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'docs/**/*.md',
        typeName: 'Doc',
        remark: {
          plugins: ['@gridsome/remark-prismjs'],
          autolinkHeadings: true
        }
      }
    },

我能够正确呈现我的降价标题：

## Foo Bar

呈现为：

<h2 id="foo-bar">
  <a href=#foo-bar" aria-hidden="true">
    <span class="icon icon-link"></span>
  </a>
  Foo Bar
</h2>

但插件文档或Gridsome下没有任何内容提及如何实际允许呈现或附加链接图标/如何修改aria-hidden为false.

在 Gridsome 中，如何将降价标题呈现为可点击的链接，并显示跨度图标？

Answer 1

在添加键transformers部分下。此处添加的值将保留为标题附近。gridsome.config.jsautolinkClassNameclass

例子：

module.exports = {
  ...
  transformers: {
    remark: {
      autolinkClassName: "fas fa-link mr-2",
      ...
    }
  }
}