Gridsome如何使用源文件系统在Markdown中渲染链接图标？

问题描述

在 gridsome.config.js 中使用Gridsome的source-filesystem插件：

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中，如何显示降价标题为可点击的链接，并且显示范围图标？

解决方法

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

示例：

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