如何为Docusaurus侧边栏项添加‘new’标识徽章？

你遇到的问题是因为Docusaurus将className应用在侧边栏的<li>元素上，而非直接作用于文本容器，导致伪元素样式未正确渲染。以下是可行的解决步骤：

1. 确认侧边栏配置 #

保持sidebar.js中的配置不变，确保className已正确添加到目标文档项：

// sidebar.js
module.exports = {
  docs: [
    {
      type: "doc",
      id: "mydocid",
      label: "mydoc subject",
      className: "newText",
    },
    // 其他侧边栏项
  ],
};

2. 编写自定义CSS样式 #

在项目的src/css/custom.css文件中添加以下样式（根据需求选择文本或图片徽章）：

文本徽章示例 #

.newText::after {
  content: "NEW";
  background-color: #2563eb;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

图片徽章示例 #

.newText::after {
  content: "";
  background-image: url('/static/img/new-badge.png'); /* 替换为你的图片路径 */
  width: 28px; /* 匹配图片实际宽度 */
  height: 12px; /* 匹配图片实际高度 */
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

3. 验证效果 #

重启Docusaurus开发服务器（npm run start），刷新页面后即可看到侧边栏目标项后显示「New」徽章。

排查要点 #

• 打开浏览器开发者工具，检查目标侧边栏<li>元素是否带有newText类，同时确认伪元素的样式是否被正确应用。
• 使用图片徽章时，确保图片放置在项目static文件夹下，路径引用正确。
• 可调整vertical-align、margin等属性，优化徽章与文本的对齐效果。

内容的提问来源于stack exchange，提问作者Glop