hao主题标签语法
AI-摘要
Tianli GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
段落文本
标签语法
<p class="p 样式参数(参数以空格划分)">文本内容</p>配置参数
字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right
案例演示
这是一段示例文本
案例演示源码
<p class="p code center red large">这是一段示例文本</p>行内文本
标签语法
<span class="p 样式参数(参数以空格划分)">文本内容</span>配置参数
字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right
案例演示
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
VolantisA Wonderful Theme for hao
案例演示源码
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：<span class="p red">红色</span>、<span class="p yellow">黄色</span>、<span class="p green">绿色</span>、<span class="p cyan">青色</span>、<span class="p blue">蓝色</span>、<span class="p gray">灰色</span>。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
<span class="p center logo large">Volantis</span><span class="p center small">A Wonderful Theme for hao</span>行内文本样式
标签语法
<u>文本内容</u>
<emp>文本内容</emp>
<wavy>文本内容</wavy>
<del>文本内容</del>
<kbd>文本内容</kbd>
<psw>文本内容</psw>案例演示
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>分栏tabs
标签语法
<hao-tabs id="选项卡块标签的唯一名称" index="选择第几个标签">
<div class="_tpl" >
{tabs-item 标题}内容{/tabs-item}
{tabs-item 标题}内容{/tabs-item}
</div>
</hao-tabs>配置参数
Unique name :
选项卡块标签的唯一名称，不带逗号。
将在#id 中用作每个标签及其索引号的前缀。
如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
仅当前帖子/页面的 URL 必须是唯一的！
[index]:
活动选项卡的索引号。
如果未指定，将选择第一个标签（1）。
如果 index 为-1，则不会选择任何选项卡。
可选参数。
案例演示
{tabs-item 麻辣香锅}麻辣香锅又麻又辣{/tabs-item}
{tabs-item 烤肉}烤肉又香又嫩{/tabs-item}
{tabs-item 火锅}火锅{/tabs-item}
{tabs-item 烧烤}烧烤{/tabs-item}
案例演示源码
<hao-tabs id="hello" index="1">
<div class="_tpl" >
{tabs-item 麻辣香锅}麻辣香锅又麻又辣{/tabs-item}
{tabs-item 烤肉}烤肉又香又嫩{/tabs-item}
{tabs-item 火锅}火锅{/tabs-item}
{tabs-item 烧烤}烧烤{/tabs-item}
</div>
</hao-tabs>按钮btns
标签语法
<hao-btns class="样式" style="布局" grid="列数" >
<div class="_tpl" >
{标题, 链接, 图片或者图标}
{标题, 链接, 图片或者图标}
</div>
</hao-btns>
<hao-btns class="样式" style="布局" grid="列数">
<div class="_tpl" >
{标题, 描述, 链接, 图片, 图标}
{标题, 描述, 链接, 图片, 图标}
</div>
</hao-btns>配置参数
圆角样式：rounded, circle
增加文字样式：可以在容器内增加
<b>标题</b>和<p>描述文字</p>布局方式：
默认为自动宽度，适合视野内只有一两个的情况。
案例演示
{心率管,专业版,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}
案例演示源码
<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>时间轴timeline
标签语法
<hao-timeline title="标题/时间线" color="颜色">
<div class="_tpl">
{timeline-item 时间}内容{/timeline-item}
{timeline-item 时间}内容{/timeline-item}
</div>
</hao-timeline>配置参数
案例演示
{timeline-item 01-02}这是测试页面{/timeline-item}
{timeline-item 01-03}这是测试页面{/timeline-item}
案例演示源码
<hao-timeline title="2022" color="orange">
<div class="_tpl" >
{timeline-item 01-02}这是测试页面{/timeline-item}
{timeline-item 01-03}这是测试页面{/timeline-item}
</div>
</hao-timeline>友链标签flink
标签语法
<hao-flink name='标题' desc='描述' style='beautify'>
<div class="_tpl" >
{网站名称,网站地址,Logo,描述,背景}
{网站名称,网站地址,Logo,描述,背景}
</div>
</hao-flink>配置参数
案例演示
{Youtube,https://www.youtube.com/,https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png,视频网站,https://img.cdn.yyds.pink/i/img/64c381a44896b.png}
{Twitter,https://twitter.com/,https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png,喜欢捣鼓的博主,https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png}
案例演示源码
<hao-flink name='推荐博客' desc='描述' style='default'>
<div class="_tpl" >
{Youtube,https://www.youtube.com/,https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png,视频网站,https://img.cdn.yyds.pink/i/img/64c381a44896b.png}
{Twitter,https://twitter.com/,https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png,喜欢捣鼓的博主,https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png}
</div>
</hao-flink>复选列表checkbox
标签语法
<hao-checkbox class ='样式' colour='颜色' status='选中状态'>内容</hao-checkbox>配置参数
样式: plus, minus, times
颜色: red,yellow,green,cyan,blue,gray
选中状态: checked
案例演示
案例演示源码
<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="标题" color="颜色" type="状态">
<div class="_tpl">
内容
</div>
</hao-folding>配置参数
颜色：blue, cyan, green, yellow, red
状态：状态填写 open 代表默认打开。
案例演示
这是一个默认打开的折叠框。
案例演示源码
<hao-folding title="查看默认打开的折叠框" type="open">
<div class="_tpl">
<p>这是一个默认打开的折叠框。</p>
</div>
</hao-folding>相册图库Gallery
标签语法
<hao-gallery-group>
<div class="_tpl" >
{名字, 描述, 链接, 图库封面}
{名字, 描述, 链接, 图库封面}
</div>
</hao-gallery-group>配置参数
案例演示
{收藏的壁纸, 喜欢的一些壁纸, https://cover.weilanx.com/image, https://cover.weilanx.com/image}
{收藏的壁纸, 喜欢的一些壁纸, https://cover.weilanx.com/image, https://cover.weilanx.com/image}
案例演示源码
<hao-gallery-group>
<div class="_tpl" >
{收藏的壁纸, 喜欢的一些壁纸, https://cover.weilanx.com/image, https://cover.weilanx.com/image}
{收藏的壁纸, 喜欢的一些壁纸, https://cover.weilanx.com/image, https://cover.weilanx.com/image}
</div>
</hao-gallery-group>tag-hide
如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。
请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。
标签语法
<hao-tag-hide display='按钮显示的文字' bg='按钮的背景颜色' color='按钮文字的颜色'>内容</hao-tag-hide>配置参数
dispaly: 按钮显示的文字
bg: 按钮的背景颜色
color: 按钮文字的颜色
案例演示
哪个英文字母最酷？因为西装裤(C装酷)
门里站着一个人?闪
案例演示源码
哪个英文字母最酷？<hao-tag-hide display='查看答案' bg='#ff7242' color='#fff'>因为西装裤(C装酷)</hao-tag-hide>
门里站着一个人?<hao-tag-hide display='Click'>闪</hao-tag-hide>卡片式外链标签引入
标签语法
<hao-introduction-card
link="链接"
img="图片"
tip="标签"
cardTitle= "卡片标题"
logo ="logo"
title="标题"
subTitle="副标题" ></hao-introduction-card>配置参数
具体信息见上述代码
案例演示
案例演示源码
<hao-introduction-card
link="https://www.weilanx.com/"
tip="标签"
cardTitle= "蔚蓝">
</hao-introduction-card>链接卡片
标签语法
<hao-tag-link link="链接" logo="logo" title="标题" described="描述"></hao-tag-link>配置参数
具体信息见上述代码
案例演示
案例演示源码
<hao-tag-link>link="https://www.weilanx.com" logo="" title="蔚蓝空间站"described="蔚蓝">蔚蓝</hao-tag-link>视频播放
标签语法
<hao-dplayer src="视频地址"></hao-dplayer>配置参数
具体信息见上述代码
案例演示
案例演示源码
<hao-dplayer src="视频地址"></hao-dplayer>
评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
