close
Rspress
  • 中文

      • Tag new

      Warning

      该组件主要配合 自定义主题 中的 wrap/eject 使用 ，与 MDX 里直接导入使用的组件不同，你可以通过传递组件 props 或直接覆盖该组件达到修改样式和功能的目的。如果通过 eject 覆盖整个组件，需注意组件对应配置项的读取会失效，需要自行控制。

      Tag 组件用于在 侧边栏或导航栏 中进行 UI 信息展示。它支持多种格式，包括常用标签、SVG 图标、图片和纯文本。

      使用方法

      通过 frontmatter 使用，之后在侧边栏或者导航栏会进行对应展示：

      foo.mdx
      ---
tag: new
---

# Foo

some text
      new

      同时支持多个标签，通过 , 进行分割：

      ---
tag: new, experimental
---
      newexperimental

      也可通过 _meta.json 使用，例如：

      _meta.json
      [
  {
    "name": "foo",
    "type": "file",
    "tag": "new, experimental"
  }
]
      Tip

      侧边栏或导航栏 的 UI 展示主要通过 Tag 组件作为入口。除此之外，右侧用于显示各级标题的 目录栏 功能更加丰富，支持任何 React 组件。

      index.mdx
      # Foo

### Bar <MyComponent />

      Tag 种类

      为确保 frontmatter 中传值方便，Tag 组件支持以下多种标签类型：

      常用标签 new

      该组件内置了一些常用标签，会配合 <Badge /> 进行展示，全部常用标签如下：

      tag对应的 Badge UI 显示
      newnew
      experimentalexperimental
      deprecateddeprecated
      updatedupdated
      扩充常用标签

      Tag 组件是 ejectable 的，当你想扩充常用标签时，可使用 wrap/eject 来对 Tag 组件进行修改，tag 的值会作为 props 传递给 Tag 组件。

      以下是一个本站通过 wrap 增加 theme-only 自定义标签的使用示例：

      theme/components/Tag/index.tsx
      import {
  Badge as BasicBadge,
  Tag as BasicTag,
} from '@rspress/core/theme-original';

export const Tag = ({ tag }: { tag: string }) => {
  if (tag === 'theme-only') {
    return <BasicBadge text="theme-only" type="warning" />;
  }
  return <BasicTag tag={tag} />;
};
      index.mdx
      ---
tag: new, theme-only
---

      SVG 字符串

      你可以直接传递 SVG 字符串作为标签：

      ---
tag: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2L2 7l10 5 10-5-10-5z"/></svg>
---

      图片 URL

      你可以使用外部 URL、data URL 或 public 目录路径作为标签：

      ---
tag: https://example.com/icon.png
---
      ---
tag: data:image/svg+xml;base64,...
---
      ---
tag: /icons/status.svg
---

      纯文本

      任何不匹配上述模式的文本都会显示为纯文本 Badge：

      import { Tag } from '@rspress/core/theme';

<Tag tag="v1.0.0" />
<Tag tag="Beta" />
      v1.0.0Beta

      Props

      interface TagProps {
  /**
   * 标签内容。支持：
   * - 常用标签：'new'、'experimental'、'deprecated'、'updated'
   * - 多个常用标签：'new, experimental'
   * - SVG 字符串：'<svg>...</svg>'
   * - 图片 URL：'https://...'、'data:...' 或 '/icons/status.svg'
   * - 纯文本：任意其他字符串
   */
  tag?: string;
}