> ## Content Index
> Fetch the complete content index at: https://lucent.blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# ToolBench样式指南
- URL: https://lucent.blog/1700019907188/
- Published: 2023-11-15T04:22:25.000Z
- Updated: 2026-08-21T00:49:55.000Z
- Author: Lucent

# 内容修饰

### 标题

<tool-mtitle title="居中标题"></tool-mtitle>

```html
<tool-mtitle title="居中标题"></tool-mtitle>
```

### 小标签

type支持自定义 可以仿照插件中的相关CSS实现自定义小标签备注功能

<tool-sign type="gpt">小标签 ChatGPT</tool-sign>

```html
<tool-sign type="gpt">小标签 ChatGPT</tool-sign>
```

<tool-sign type="modified">小标签 已修正内容</tool-sign>

```html
<tool-sign type="modified">小标签 已修正内容</tool-sign>
```

<tool-sign type="not-sure">小标签 待确认内容</tool-sign>

```html
<tool-sign type="not-sure">小标签 待确认内容</tool-sign>
```

### 折叠块

<tool-expand title="折叠块" expand=true>这是折叠内容</tool-expand>

```html
<!-- title默认为"折叠内容"，expand默认为true -->
<tool-expand title="折叠块" expand=true>这是折叠内容</tool-expand>
```

### GitHub仓库

<tool-github owner="xhmily" repo="WeHalo"></tool-github>

```html
<!-- 仓库所有者的名称应当填写你的GitHub Account Username而不是Name -->
<tool-github owner="仓库所有者" repo="仓库名"></tool-github>
```

### 进度条

<tool-progress percentage="50%" color="#6ce766"></tool-progress>

```html
<tool-progress percentage="50%" color="#6ce766"></tool-progress>
```

### 彩色分割线

<tool-dotted></tool-dotted>

<tool-dotted begin="#1772e8" end="#4cd327"></tool-dotted>

```html
<!-- 不填写begin与end的话将使用默认值 -->
<tool-dotted></tool-dotted>
<tool-dotted begin="#1772e8" end="#4cd327"></tool-dotted>
```

### 提示消息

<tool-msg type="success">成功消息</tool-msg>

<tool-msg type="info">普通消息</tool-msg>

<tool-msg type="warning">警告消息</tool-msg>

<tool-msg type="error">错误消息</tool-msg>

```html
<!-- 标签内支持其他dom元素 -->
<tool-msg type="success">成功消息</tool-msg>
<tool-msg type="info">普通消息</tool-msg>
<tool-msg type="warning">警告消息</tool-msg>
<tool-msg type="error">错误消息</tool-msg>
```

### ToolBench自适应表达式

考虑不同设备中多模态内容的长宽是需要按比例显示的，因此Tool Bench插件为这些多模态标签提供了一套高度自适应表达式（以下简称TB表达式）使用TB表达式可以使你的多模态标签在不同尺寸的设备中也能保持一定的比例。

TB表达式形如三目运算符，不同的是它被`${}`符号包裹，并且支持两种运算方式：

1. `${full}`：当使用这种表达式时将返回当前标签的上一层容器的宽度，也就是使元素在宽度上能撑满父容器
2. `${expression?trueValue:falseValue}`：当使用这种表达式时会根据`expression`的真假来选择使用`trueValue`还是`falseValue`。`expression`只需要半个表达式即可，ToolBench会自动将其与父容器宽度进行比较。 该表达式支持两个变量：我们来看几个案例来更清晰地认识它：
  - `full`：代表**父容器**的宽度
  - `cwdith`：代表**当前容器**的宽度，该变量只在部分元素中适用
  - `height="${<820?cwidth*(2/3):500}"`：若父容器的宽度小于820px，则当前容器的高度以**当前容器的宽度**的$2/3$倍显示，否则高度为500px。即保证当前容器的长宽始终为$3:2$。
  - `width: ${<800?full:800}`：当父容器宽度小于800px时，当前容器的宽度为撑满父容器，否则宽度显示为800px。

TB表达式并不是在所有的`tool`元素中都适用，支持TB表达式的元素会专门进行标注，在写作时请留意。

### Bilibili视频

<tool-bilibili bvid="BV1Yk4y1K7Az" width="750" height="500"></tool-bilibili>

<tool-bilibili bvid="BV1Yk4y1K7Az" page="1" width="100%" height="${<820?(cwidth\*25)/41:500}"></tool-bilibili>

```html
<!-- 其中bvid为必填，width默认为100%，height默认为500 -->
<tool-bilibili bvid="BV1Yk4y1K7Az" width="750" height="500"></tool-bilibili>
<tool-bilibili bvid="BV1Yk4y1K7Az" page="1" width="100%" height="${<820?(cwidth*25)/41:500}"></tool-bilibili>
```

###