Hao主题相关标签

页面添加视频

#### 添加链接视频
<hao-dplayer src="https://img.cdn.yzczi.com/yzcz/2023/04/202304211828533962db1997022853986.mp4"></hao-dplayer>

#### 添加B站视频
<hao-bilibili bvid="BV1k94y1C7B2"></hao-bilibili>

压缩字体

fonttools ttLib.woff2 compress "三极榜楷简体.ttf" -o "三极榜楷简体.woff2"

行内文本样式

1. 带 下划线 的文本
2. 带 着重号的文本
3. 带 波浪线的文本
4. 带 删除线 的文本
5. 键盘样式的文本 command + D
6. 密码样式的文本：这里没有验证码

1. 带 <u>下划线</u> 的文本
2. 带 <emp>着重号</emp>的文本
3. 带 <wavy>波浪线</wavy>的文本
4. 带 <del>删除线</del> 的文本
5. 键盘样式的文本 <kbd>command</kbd> + <kbd>D</kbd>
6. 密码样式的文本：<psw>这里没有验证码</psw>

分栏 tab

<hao-tabs id="Demo1">
    <div class="_tpl" >
        {tabs-item test1 1}<p><strong>This is Tab 1.</strong></p>{/tabs-item}
        {tabs-item test1 2}<p><strong>This is Tab 2.</strong></p>{/tabs-item}
        {tabs-item test1 3}<p><strong>This is Tab 3.</strong></p>{/tabs-item}
    </div>
</hao-tabs>

按钮 btns

* 如果需要显示类似「团队成员」之类的一组含有头像的链接：

<hao-btns class="circle" grid="grid5">
     <div class="_tpl" >
       {xaoxuu, https://xaoxuu.com/, https://bu.dusays.com/2023/06/01/64787e6a5816d.png}
       {xaoxuu, https://xaoxuu.com/, https://bu.dusays.com/2023/06/01/64787e6a5816d.png}
     </div>
</hao-btns>

* 或者含有图标的按钮：

<hao-btns class="rounded" grid="grid2">
     <div class="_tpl" >
       {查看文档, /, haofont hao-icon-book}
       {查看文档, /, haofont hao-icon-book}
     </div>
</hao-btns>

* 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中

<hao-btns class="circle" style="center" grid="grid5">
     <div class="_tpl" >
       {心率管,专业版,https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1,https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png,haofont hao-icon-heartbeat1}
       {心率管,专业版,https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1,https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png,haofont hao-icon-heartbeat1}
     </div>
</hao-btns>

time链

* 蓝色时间链
<hao-timeline title="2022" color="blue">
     <div class="_tpl" >
       {timeline-item 01-02}这是测试页面{/timeline-item}
       {timeline-item 01-03}这是测试页面{/timeline-item}
     </div>
</hao-timeline>

复选列表 checkbox

纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色 + 默认选中
黄色 + 默认选中
青色 + 默认选中
蓝色 + 默认选中
增加
减少
叉

<hao-checkbox>纯文本测试</hao-checkbox>
<hao-checkbox status='checked'>支持简单的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</hao-checkbox>
<hao-checkbox colour='red'>支持自定义颜色</hao-checkbox>
<hao-checkbox colour='green' status='checked'>绿色 + 默认选中</hao-checkbox>
<hao-checkbox colour='yellow' status='checked'>黄色 + 默认选中</hao-checkbox>
<hao-checkbox colour='cyan' status='checked'>青色 + 默认选中</hao-checkbox>
<hao-checkbox colour='blue' status='checked'>蓝色 + 默认选中</hao-checkbox>
<hao-checkbox class='plus' colour='green' status='checked'>增加</hao-checkbox>
<hao-checkbox class='minus' colour='yellow' status='checked'>减少</hao-checkbox>
<hao-checkbox class='times' colour='red' status='checked'>叉</hao-checkbox>

折叠框 folding

* 查看图片测试

<hao-folding title="查看图片测试">
    <div class="_tpl">

![Halo-Theme-TimePlus](https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png)
 
</div>
</hao-folding>

* 查看默认打开的折叠框

<hao-folding title="查看默认打开的折叠框" color="blue" type="open">
    <div class="_tpl">
        <p>这是一个默认打开的折叠框。</p>
    </div>
</hao-folding>

* 查看代码测试

<hao-folding title="查看代码测试" color="green" >
    <div class="_tpl">

    ```html
![Halo-Theme-TimePlus](https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png)
    ```
    </div>
</hao-folding>

* 查看列表测试

<hao-folding title="查看列表测试" color="yellow">
    <div class="_tpl">
        内容
    </div>
</hao-folding>