Gridsome 如何使用 source-filesystem 在降价中呈现 link 图标？

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
        }
      }
    },

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

## Foo Bar

呈现为：

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

但是插件文档中或 Gridsome 下没有任何内容提到如何实际允许呈现 link 图标或 appended/how 将 aria-hidden 修改为 false.

在 Gridsome 中，我如何将 Markdown 标题呈现为可点击的 links 且跨度图标可见？

Answer 1

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

示例：

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