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

【问题标题】：Gridsome how to render link icon in markdown with source-filesystem?Gridsome如何使用源文件系统在markdown中呈现链接图标？
【发布时间】：2021-02-05 14:30:19
【问题描述】：

在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 中，如何将 markdown 标题呈现为可点击的链接，并显示 span 图标？

【问题讨论】：

遇到了同样的问题。有更多关于这方面的信息吗？
@DanielMicallef 不，遗憾的是，我无法从这里、我的查询和他们的仓库中找到解决方案，所以我迁移到了 Gatsby。
我确实做到了，在transformers下添加autolinkClassName如下：transformers { remark: {autolinkClassName: "your new icon"}}将添加这个作为答案

标签： markdown gridsome gridsome-plugin gridsome-source-filesystem

【解决方案1】：

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

例子：

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

【讨论】：