Блог

Главная - Вопросы по программированию - Gridsome как отобразить значок ссылки в markdown с исходной файловой системой?

Gridsome как отобразить значок ссылки в markdown с исходной файловой системой?

#markdown #gridsome #gridsome-plugin #gridsome-source-filesystem

#markdown #gridsome #gridsome-плагин #gridsome-source-filesystem

Вопрос:

С плагином source-filesystem от Gridsome в 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 в виде интерактивных ссылок с видимым значком диапазона?

Комментарии:

1. Та же проблема. есть дополнительная информация по этому поводу?

2. @DanielMicallef Нет, к сожалению, я не смог найти решение здесь, в моих запросах и в их репозитории, поэтому я перешел на Gatsby.

3. На самом деле я это сделал, добавив autolinkClassName в раздел transformers следующим образом: transformers { remark: {autolinkClassName: "your new icon"}} Добавит это в качестве ответа

Ответ №1:

В transformers разделе gridsome.config.js добавить autolinkClassName ключ. Добавленное здесь значение будет сохранено как class рядом с заголовком.

Пример:

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