icons - 如何将图标添加到 docusaurus 侧边栏组或项目

Question

我想用 docusaurus 添加图标侧边栏组或项目。我该怎么做？

喜欢：

标签： iconssidebardocusaurus

Answer 1

使用 CSS

1. 添加customCss到您的theme配置（文档），例如：

   {
     // ...
     presets: [
       [
         'classic',
         /** @type {import('@docusaurus/preset-classic').Options} */
         ({
           // ...
           theme: {
             customCss: require.resolve('./src/css/custom.css'),
           }
         })
       ]
     ]
   }
   

2. 将覆盖添加到./src/css/custom.css：
   • 例如：为了让图标不添加大量空白空间，请将布局更改为从左到右（而不是默认的中心重）。

     /* Override non-category links to be horizonally compact */
     li > a.menu__link {
       justify-content: flex-start;
     }
     

3. 将图标添加到项目：
   • 添加sidebar_class_name: item1到项目侧边栏链接的前面事项。
     • 注意：此类名称将添加到item1的侧边栏li元素。
   • 将类添加到 css 文件，例如：

     .item1 a::before {
       padding-right: 0.5rem;
       content: url(../img/myImage.svg);
     }
     

4. 将图标添加到部分：有点烦人
   • 添加"className": "section1"到_category_.json
   • 注意：侧边栏项目的设置方式使得部分图标难以显示在正确的位置，而右侧的插入符号图标也最终会被移动。
   • 想法：目前最好的方法可能非常相似：将其添加到my-section-class::before，但添加transform以将其移到右侧并将其垂直居中，并有点繁琐。

结果

在此示例中，Installation没有图标，而Item1有：