Halo ToolBench 使用

背景 & 目标

前段时间迁移了博客到 Halo 上，刚好发现了 ToolBench 样式插件，在以前的流程中，markdown 并不支持 tab、annotaion 等语法，刚好这些使用场景都被 ToolBench 覆盖了

语法展示

github

<tool-github owner="LiuOcean" repo="Luban_Unity_GUI"></tool-github>

此处需要配置 github 的 token，点击前往 进行配置，打开 public_repo 权限即可

居中标题

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

小标签

小标签 ChatGPT
小标签 已修正内容
小标签 待确认内容

<!-- type支持自定义 可以仿照插件中的相关CSS实现自定义小标签备注功能 -->
<tool-sign type="gpt">小标签 ChatGPT</tool-sign>
<tool-sign type="modified">小标签 已修正内容</tool-sign>
<tool-sign type="not-sure">小标签 待确认内容</tool-sign>

这里的 gpt、modified 等信息均写在 css 文件中，目前还不清楚如何外部自定义

折叠块

这是折叠内容

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

进度条

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

彩色分割线

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

分栏内容

<tool-tabs>
  <div class="_tpl">
    {tabs-pane iOS}这里是 iOS 内容{/tabs-pane}
    {tabs-pane Android}这里是 Android 内容{/tabs-pane}
  </div>
</tool-tabs>

这个功能是我个人经常使用的，平时在用 Docusaurus 写文档时，使用频率非常高

时间轴

<!-- {time-line-item xxxx}表示时间轴前的年份 -->
<tool-timeline>
 <div class="_tpl">
   {timeline-item 2020}10元{/timeline-item}
   {timeline-item 2021}20元{/timeline-item}
   {timeline-item 2022}100元{/timeline-item}
 </div>
</tool-timeline>

目前文字颜色在 dark 主题下，稍微一些问题

提示消息

成功消息
普通消息
警告消息
错误消息

<!-- 标签内支持其他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>

这个功能我个人日常使用频率也非常高，特别适合强调某段内容

BiliBili 视频

<!-- 其中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>

目前这个功能有一个问题，当你插入后，视频会自动播放，不过作者说会在下个版本支持自动开关的功能，具体可见这个 issue

PDF 阅读器

<!-- 其中src为必填，width默认为100%，height默认为500 -->
<tool-pdf src="..." width="750" height="500"></tool-pdf>
<tool-pdf src="..." width="100%" height="${<820?(cwidth*25)/41:500}"></tool-pdf>

目前我并未上传 PDF 文件，这个功能便不做展示了

AntV G2

const chart_5 = new G2.Chart({
  container: 'chart_5',
  width: 500,
  height: 400,
  paddingLeft: 50,
});

chart_5
  .theme({ type: 'classicDark' }) // Apply dark theme.
  .coordinate({ type: 'theta', innerRadius: 0.25, outerRadius: 0.8 });

chart_5
  .interval()
  .data([
    { id: 'c', value: 526 },
    { id: 'sass', value: 220 },
    { id: 'php', value: 325 },
    { id: 'elixir', value: 561 },
    { id: 'rust', value: 54 },
  ])
  .transform({ type: 'stackY' })
  .encode('y', 'value')
  .encode('color', 'id')
  .label({
    text: 'value',
    offset: 14,
    style: {
      fontWeight: 'bold',
    },
  })
  .label({
    text: 'id',
    position: 'spider',
    connectorDistance: 0,
    style: {
      fontWeight: 'bold',
      textBaseline: 'bottom',
      textAlign: (d) => (['c', 'sass'].includes(d.id) ? 'end' : 'start'),
      dy: -4,
    },
  })
  .style('radius', 4)
  .style('inset', 1)
  .animate('enter', { type: 'waveIn', duration: 1000 })
  .legend(false);

chart_5.render();

<div id="chart_5"></div>

<!-- 使用markdown的g2代码块来配置div的antv样式 -->
/```g2
const chart_5 = new G2.Chart({
  container: 'chart_5',
  width: 500,
  height: 400,
  paddingLeft: 50,
});

chart_5
  .theme({ type: 'classicDark' }) // Apply dark theme.
  .coordinate({ type: 'theta', innerRadius: 0.25, outerRadius: 0.8 });

chart_5
  .interval()
  .data([
    { id: 'c', value: 526 },
    { id: 'sass', value: 220 },
    { id: 'php', value: 325 },
    { id: 'elixir', value: 561 },
    { id: 'rust', value: 54 },
  ])
  .transform({ type: 'stackY' })
  .encode('y', 'value')
  .encode('color', 'id')
  .label({
    text: 'value',
    offset: 14,
    style: {
      fontWeight: 'bold',
    },
  })
  .label({
    text: 'id',
    position: 'spider',
    connectorDistance: 0,
    style: {
      fontWeight: 'bold',
      textBaseline: 'bottom',
      textAlign: (d) => (['c', 'sass'].includes(d.id) ? 'end' : 'start'),
      dy: -4,
    },
  })
  .style('radius', 4)
  .style('inset', 1)
  .animate('enter', { type: 'waveIn', duration: 1000 })
  .legend(false);

chart_5.render();
/```

更多内容可以点击 G2 官方示例 查看，这里我着重说明一下在 ToolBench 中使用的注意事项

首先 div id 是必须要写的，而且这个 id 要填写在 g2 相关语法中，如下文中的 container 要填入的内容

<div id="chart_xxx"></div>

const chart = new G2.Chart({
  container: 'chart_xxx', // div id
  width:${<600?full:600},
  height: ${<600?full:600},
  theme: 'classicDark'
});

在查阅 g2 官方示例时，你会看到如下代码

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

要注意的是，在 ToolBench 代码块中，并不支持 import 语法，因此实际在 new Chart 时，需要使用 new G2.Chart，其他的也是同理

Raycast Snippet 配置

上述 html 代码块，如果每次用时，全部手敲还是非常痛苦的，再加上我个人博客的书写习惯，目前仍然在 MWeb 中，所以需要一个系统级的 Snippet 来统一管理，最后选择使用了 Raycast 自带的 Snippet 功能

这里我以比较常用的 tab 为例

当你在电脑任意位置连续写入 :tb-tab，raycast 会自动替换为 Snippet 中的内容，并将光标放在 {cursor} 标记的地方，其他的语法也是同理，按照自己的习惯配置即可~

参考链接

官方文档
官方仓库