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

Question

与 Gridsome 的 source-filesystem gridsome.config.js 中的插件:

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

我能够正确呈现我的 Markdown 标题:

## 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 中，如何将 Markdown 标题呈现为可点击的链接，并且跨度图标可见？

Answer 1

下transformers gridsome.config.js 中的部分添加 autolinkClassName key 。此处添加的值将保留为 class靠近标题。
例子:

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