如何解决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",...
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。