文本元素
标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
段落缩进
有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ---- 李七毛《我们都不擅长告别》
有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。
---- 李七毛《我们都不擅长告别》
居中标题
<joe-mtitle title="牛鞭牛鞭"></joe-mtitle>
提示元素
<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>
超链接卡片
块级链接卡片
<hyperlink-card href="https://www.halo.run" target="_blank" theme="small"></hyperlink-card>
<hyperlink-card href="https://www.halo.run" target="_blank" theme="regular"></hyperlink-card>
<hyperlink-card href="https://www.halo.run" target="_blank" theme="grid"></hyperlink-card>
参数：
href：链接地址。
target：链接打开方式，可选值为 _blank、_self，默认为 _self。
theme：卡片风格，可选值为 regular、small、grid，默认为 regular。
行内链接卡片
<hyperlink-inline-card href="https://www.halo.run" target="_blank"></hyperlink-inline-card>
参数：
href：链接地址。
target：链接打开方式，可选值为 _blank、_self，默认为 _self。
按钮元素
多彩按钮
自定义自己想要的颜色
<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>
自定义图标，达 6000+ 图标任你使用
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>
自定义圆角度数，最大 18px
<joe-abtn radius="12px" content="圆角按钮"></joe-abtn>
搭配在一起任意使用
color="#409eff" icon="fa-bell" href="#" radius="3px" content="搭配在一起"
<joe-abtn
color="#409eff"
icon="fa-bell"
href="#"
radius="3px"
content="搭配在一起"
></joe-abtn>
便条按钮
便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样
<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>
复制按钮
<joe-copy
title="点击复制"
content="这是一段美好的鸡汤文"
color="green"
bold
></joe-copy>
标签按钮
<joe-anote
icon="fa-download"
href="#"
type="success"
content="标签按钮"
></joe-anote>
网盘按钮
<joe-cloud type="default" url="" password=""></joe-cloud>
<joe-cloud type="360" url="" password=""></joe-cloud>
<joe-cloud type="bd" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" url="" password=""></joe-cloud>
<joe-cloud type="ct" url="" password=""></joe-cloud>
<joe-cloud type="wy" url="" password=""></joe-cloud>
<joe-cloud type="github" url="" password=""></joe-cloud>
<joe-cloud type="gitee" url="" password=""></joe-cloud>
<joe-cloud type="lz" url="" password=""></joe-cloud>
代码元素
行内代码
halo-theme-joe2.0
`halo-theme-joe2.0`
代码块
\```html
<html>
<head>
<title>标题</title>
</head>
<body>
<p>远上寒山石径斜，白云生处有人家。</p>
</body>
</html>
\```
html
<html>
<head>
<title>标题</title>
</head>
<body>
<p>远上寒山石径斜，白云生处有人家。</p>
</body>
</html>
\```css|自定义标题
#Joe {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
}
\```
#Joe {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
}
列表元素
有序列表
- 列表项一
- 列表项二
- 列表项三
1. 列表项一
2. 列表项二
3. 列表项三
无序列表
- 列表项一
- 列表项二
- 列表项三
- 列表项一
- 列表项二
- 列表项三
任务列表
- 待办事项
- 已完成
- 待办事项三
- [ ] 待办事项
- [x] 已完成
- [ ] 待办事项三
表格元素
左对齐
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
| 表头 1 | 表头 2 | 表头 3 |
| :----- | :----- | :----- |
| 内容 1 | 内容 2 | 内容 3 |
居中
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
| 表头 1 | 表头 2 | 表头 3 |
| :----: | :----: | :----: |
| 内容 1 | 内容 2 | 内容 3 |
右对齐
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
| 表头 1 | 表头 2 | 表头 3 |
| -----: | -----: | -----: |
| 内容 1 | 内容 2 | 内容 3 |
装饰元素
跑马灯
<span class="joe_lamp"></span>
进度条
<joe-progress percentage="50%" color="#6ce766"></joe-progress>
彩色虚线
可自定义虚线颜色
<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>
Tabs
{tabs-pane 第一个}单身狗的故事{/tabs-pane}
{tabs-pane 第二个}小说家的故事{/tabs-pane}
<joe-tabs>
<div class="_tpl">
{tabs-pane 第一个}单身狗的故事{/tabs-pane}
{tabs-pane 第二个}小说家的故事{/tabs-pane}
</div>
</joe-tabs>
时间线
{timeline-item 2020}10元{/timeline-item}
{timeline-item 2021}20元{/timeline-item}
{timeline-item 2022}100元{/timeline-item}
<joe-timeline>
<div class="_tpl">
{timeline-item 2020}10元{/timeline-item}
{timeline-item 2021}20元{/timeline-item}
{timeline-item 2022}100元{/timeline-item}
</div>
</joe-timeline>
媒体元素
图片并列
这是第一张图片的描述
这是第二张图片的描述
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; justify-content: center;">
<div>
<img src="https://img.swlider.com.cn/Halo/conf/img/1081-350x200.jpg" alt="Image 1" style="display: block; width: 100%;">
<p style="text-align: center;">这是第一张图片的描述</p>
</div>
<div>
<img src="https://img.swlider.com.cn/Halo/conf/img/1081-350x200.jpg" alt="Image 2" style="display: block; width: 100%;">
<p style="text-align: center;">这是第二张图片的描述</p>
</div>
</div>
PDF 预览
<joe-pdf src="xxxx.pdf"
<joe-pdf src="xxx.pdf"</joe-pdf>
视频播放器
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>
Bilibili 视频
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>
网易云歌单
<joe-mlist id="6800335663"></joe-mlist>
网易云单曲
<joe-music id="1983150080"></joe-music>
音频播放器
<joe-mp3>
name="Solo-Blanka"
url="https://img.swlider.com.cn/Halo/mp3/Solo-Blanka.mp3"
theme="red"
cover="https://img.swlider.com.cn/Halo/post_img/202511/1103609567.jpg"
autoplay</joe-mp3>
评论区