文本元素
标题
下划线
今天天气很好，你拨通了女盆友的电话 1300002225
加粗
她 气喘吁吁 的和你说：我在跑步
倾斜
你问她为什么有 啪啪啪 的声音，她和你说：我是穿拖鞋跑步的
删除线
你明白了，此刻自己头上正顶着个 绿帽子
引用
那女孩对你说：你还不如跳蛋。
超链接
段落缩进
有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ---- 李七毛《我们都不擅长告别》
<p class="indent">有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ---- 李七毛《我们都不擅长告别》</p>
居中标题
<joe-mtitle title="舔狗舔狗"></joe-mtitle>
代码元素
行内代码
这是一行Python代码print("hello world!")
代码块
<html>
<head>
<title>标题</title>
</head>
<body>
<p>远上寒山石径斜，白云生处有人家。</p>
</body>
</html>
print("自定义标题就是在language的后面加上“|”和“自定义的标题”")
列表元素
有序列表
杜蕾斯(durex)的优点如下：
- 耐久（durability）
- 可靠（reliability）
- 优良（excellence）
无序列表
- 一个女朋友
- 二个女朋友
- 三个女朋友
- N 个女朋友
- 卒
任务列表
- 活着
- 努力活着
- 不想活了
<ul>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled" readonly="readonly" /> 活着</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" readonly="readonly" /> 努力活着</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" readonly="readonly" /> 不想活了</li>
</ul>
表格元素
左对齐
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
<table>
<thead>
<tr><th align="left">表头 1</th><th align="left">表头 2</th><th align="left">表头 3</th></tr>
</thead>
<tr><td align="left">内容 1</td><td align="left">内容 2</td><td align="left">内容 3</td></tr>
</tbody>
</table>
居中
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
<table>
<thead>
<tr><th align="center">表头 1</th><th align="center">表头 2</th><th align="center">表头 3</th></tr>
</thead>
<tbody>
<tr><td align="center">内容 1</td><td align="center">内容 2</td><td align="center">内容 3</td></tr>
</tbody>
</table>
右对齐
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
<table>
<thead>
<tr><th align="right">表头 1</th><th align="right">表头 2</th><th align="right">表头 3</th></tr>
</thead>
<tbody>
<tr><td align="right">内容 1</td><td align="right">内容 2</td><td align="right">内容 3</td></tr>
</tbody>
</table>
按钮元素
自定义自己想要的颜色
<joe-abtn color="#409eff" href="http://www.baidu.top/" content="多彩按钮"></joe-abtn>
自定义图标，达 6000+ 图标任你使用
<joe-abtn icon="fa-bell" href="http://www.baidu.top/" content="带图标按钮"></joe-abtn>
自定义圆角度数，最大 18px
<joe-abtn radius="12px" href="http://www.baidu.top/"content="圆角按钮"></joe-abtn>
搭配在一起任意使用
<joe-abtn
color="#409eff"
icon="fa-bell"
href="http://www.baidu.top/"
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-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" title="《丛林奇航》HD高清中字" 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="lz" url="" password=""></joe-cloud>
装饰元素
跑马灯
<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>
评论后可见
<joe-hide>这个内容评论后可见</joe-hide>
头像框
列出了当前主题包含的头像框，方便大家进行选择
emoji 表情
列出一些通用表情元素，更多请参见这里
😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷🙁🙂🙃🙄🤐🤑🤒🤓🤔🤕🤠🤡🤢🤣🤤🤥🤧🤨🤩🤪🤫🤬🤭🤮🤯🧐😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷😸😹😺😻😼😽😾😿🙀🙁🙂🙃🙄
媒体元素
图片预览
<img src="/upload/2022/03/src=http___n.sinaimg.cn_sinakd20220129ac_97_w2048h1249_20220129_686c-64c12781e48611726edacb801c116698.jpg&refer=http___n.sinaimg-e61bb6a03c70496fb3b60bd63198bdbc.jfif" style="padding:10px;max-width:200px!important;" alt="YN">
视频播放器
<joe-dplayer src="http://120.48.18.114/upload/2022/03/2022%E5%B9%B43%E6%9C%8818%E6%97%A522%E6%97%B647%E5%88%8611%E7%A7%92-1dc5451e162d458bbc5d5017d294f390.mp4"></joe-dplyer>
bilibili 视频
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>
PDF 预览
<p><joe-pdfsrc="http://120.48.18.114/upload/2022/03/%E6%8B%86%E7%82%B8%E5%BC%B9-2db2500a81d046f4b2bd7092d275395d.pdf"></joe-pdf></p>
网易云歌单
<joe-mlist id="6800335663"></joe-mlist>
网易云单曲
<joe-music id="1459564008"></joe-music>
提示元素
消息提示
<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>
注意事项！！！
以上大部分为webcomponents组件，且仅在使用halo-theme-joe2.0主题时才能生效，请根据实际情况使用。
评论区