Hao 主题功能标签

Hao 主题作为 Halo 博客的实用主题之一，提供了丰富的功能标签，能满足网页美化、内容排版等多种需求。

以下为大家整理主题核心功能及使用方法，方便直接套用优化博客页面。

一、视频嵌入类

支持两种常见视频类型插入，适配不同内容场景：

• 链接视频：通过<hao-dplayer>标签引入外部视频链接，直接展示视频内容。

• B 站视频：使用<hao-bilibili>标签，填入视频 BV 号即可快速嵌入 B 站视频。

二、文本样式类

多种行内文本样式标签，让文字呈现更具层次感：

• 下划线、着重号、波浪线、删除线：分别通过<u>``<emp>``<wavy>``<del>标签实现。

• 特殊样式：键盘按键样式用<kbd>标签，密码隐藏样式用<psw>标签。

三、布局与交互组件

1. 分栏标签

通过<hao-tabs>标签创建多标签分栏，可自定义标签 ID 和内容，实现内容分类展示。

<hao-tabs id="自定义ID">
    <div class="_tpl" >
        {tabs-item 标签名 序号}<p>标签1内容</p>{/tabs-item}
        {tabs-item 标签名 序号}<p>标签2内容</p>{/tabs-item}
    </div>
</hao-tabs>

2. 按钮组件

支持多种按钮样式配置，满足不同场景需求：

• 头像链接按钮：适合展示团队成员、友情链接等，支持圆形样式和网格布局。

<hao-btns class="circle" grid="grid列数">
    <div class="_tpl" >
        {按钮文本, 链接地址, 头像图片URL}
    </div>
</hao-btns>

• 图标按钮：搭配 haofont 图标库，可自定义按钮文字、链接和图标。

<hao-btns class="rounded" grid="grid列数">
    <div class="_tpl" >
        {按钮文本, 链接地址, haofont图标类名}
    </div>
</hao-btns>

• 多功能按钮：整合标题、描述、图片等元素，支持多列网格和居中对齐。

<hao-btns class="circle" style="center" grid="grid列数">
    <div class="_tpl" >
        {标题, 描述, 链接, 图片URL, 图标类名}
    </div>
</hao-btns>

3. 时间链

用<hao-timeline>标签创建带颜色标识的时间轴，可设置年份标题和日期节点，清晰呈现事件序列。

<hao-timeline title="年份" color="颜色值">
    <div class="_tpl" >
        {timeline-item 月-日}事件内容{/timeline-item}
    </div>
</hao-timeline>

4. 复选列表

通过<hao-checkbox>标签创建交互式复选框，支持自定义颜色、默认选中状态，还可搭配加减叉等图标。

<!-- 基础样式 -->
<hao-checkbox>纯文本选项</hao-checkbox>
<!-- 默认选中+自定义颜色 -->
<hao-checkbox colour="颜色值" status="checked">选中选项</hao-checkbox>
<!-- 带图标样式 -->
<hao-checkbox class="plus/minus/times" colour="颜色值">带图标选项</hao-checkbox>

5. 折叠框

<hao-folding>标签可创建可折叠内容块，支持默认打开 / 关闭、自定义颜色，适配图片、代码、列表等多种内容形式。

<!-- 基础折叠框 -->
<hao-folding title="折叠标题" color="颜色值">
    <div class="_tpl">折叠内容（支持图片、代码、列表）</div>
</hao-folding>
<!-- 默认打开的折叠框 -->
<hao-folding title="折叠标题" color="颜色值" type="open">
    <div class="_tpl">默认展示的内容</div>
</hao-folding>

参考文章