『笔记』『教程』Joe主题帮助文档（含所有短代码，长期更新）
本文为Joe主题帮助及演示使用，转自Joe主题，您可以在下方找到您的问题及解决方案
主题下载地址1：QQ群：198963776
主题下载地址2：https://github.com/HaoOuBa/Joe
主题收费：永久开源免费，不会收费的，如果你想，你可以直接赞助制作者
{mtitle title="华丽的分割线"/}
引用演示
一级引用
二级引用
> 一级引用
> > 二级引用文本加粗演示
欢迎使用Joe主题
**欢迎使用Joe主题**文本倾斜演示
欢迎使用Joe主题
*欢迎使用Joe主题*超链接演示
[百度一下](http://www.baidu.com) 图片预览演示
 有序列表演示
- 有序列表项目
- 有序列表项目
- 有序列表项目
1. 有序列表项目
2. 有序列表项目无序列表演示
- 无序列表项目
- 无序列表项目
- 无序列表项目
- 无序列表项目
- 无序列表项目H1 ~ H6标题演示
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题分割线演示
----------回复可见演示
{hide}回复可见{/hide}
自行删除代码内的 * 符号
{*hide}回复可见{*/hide}网易云歌单演示
{music-list id="5370364292" width="100%" /}
自行删除代码内的 * 符号
{*music-list id="5370364292" width="100%" autoplay="autoplay"/}文章插入BiliBili视频演示
{bilibili bvid="BV1eK411u7NZ"/}
自行删除代码内的 * 符号
{*bilibili bvid="BV1eK411u7NZ"/}文章插入M3U8或MP4视频演示
{dplayer src="https://yun.abcio.cn/abcio/video/guzhuang.mp4" /}自行删除代码内的 * 符号
{*dplayer src="https://yun.abcio.cn/abcio/video/guzhuang.mp4" /}HTML代码直接输出HTMl代码演示
!!!
<span class="test">HTML代码</span>
<style>
.test { color: #ff6800 }
</style>
!!!文章插入表格演示
| 左对齐 | 居中对齐 | 右对齐 |
|---|---|---|
| 单元格 | 单元格 | 单元格 |
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
删除线演示
这是一段错误的内容
~~这是一段错误的内容~~文章插入代码段演示（本版本支持上百种代码）
echo 'Hello Joe';自行删除代码内的 * 符号
*```php
echo 'Hello Joe';
*```行内代码演示
在网页开发种，我们经常用到 div 这个标签
` div `任务规划演示
{x} 2020年存入100万
{ } 2020年活下来
自行删除代码内的 * 符号
{*x} 2020年存入100万
{* } 2020年活下来默认卡片演示
{card-default width="100%" label="望庐山瀑布"}日照香炉生紫烟，
遥看瀑布挂前川。
飞流直下三千尺，
疑是银河落九天。{/card-default}
自行删除代码内的 * 符号
{*card-default width="100%" label="望庐山瀑布"}日照香炉生紫烟，<br>遥看瀑布挂前川。<br>飞流直下三千尺，<br>疑是银河落九天。{*/card-default}提示信息演示
{message type="success" content="正确提示信息演示"/}
{message type="info" content="提醒提示信息演示"/}
{message type="warning" content="警告提示信息演示"/}
{message type="error" content="错误提示信息演示"/}
自行删除代码内的 * 符号
{*message type="success" content="正确提示信息演示"/}
{*message type="info" content="提醒提示信息演示"/}
{*message type="warning" content="警告提示信息演示"/}
{*message type="error" content="错误提示信息演示"/}居中标题演示
{mtitle title="这是一个居中显示标题"/}自行删除代码内的 * 符号
{*mtitle title="这是一个居中显示标题"/}便条按钮演示
支持上百款图标，随意更换
第一种：{anote icon="fa-download" href="https://www.baidu.com" type="secondary" content="下载"/}
第二种：{anote icon="fa-download" href="https://www.baidu.com" type="success" content="下载"/}
第三种：{anote icon="fa-download" href="https://www.baidu.com" type="warning" content="下载"/}
第四种：{anote icon="fa-download" href="https://www.baidu.com" type="error" content="下载"/}
第五种：{anote icon="fa-download" href="https://www.baidu.com" type="info" content="下载"/}
自行删除代码内的 * 符号type内分别为secondary、success、warning、error、info五种样式
{*anote icon="fa-download" href="https://www.baidu.com" type="info" content="下载"/} 普通按钮演示
这个就更强了，支持任意颜色(包括半透明)、任意图标(包括无图标)、任意圆角
{abtn icon="fa-car" color="#ff6800" href="https://www.baidu.com" radius="12px" content="黄色按钮"/} 自行删除代码内的 * 符号
{*abtn icon="fa-car" color="#ff6800" href="https://www.baidu.com" radius="12px" content="黄色按钮"/} 复制功能
{copy showText="点击复制" copyText="我爱你"/}
自行删除代码内的 * 符号
{*copy showText="点击复制" copyText="我爱你"/}表情功能
::(小乖) ::(爱心) ✭
彩色虚线
{dotted startColor="#ab74e4" endColor="#1989fa"/}自行删除代码内的 * 符号
{*dotted startColor="#ab74e4" endColor="#1989fa"/}进度条
支持1-100%，支持任意颜色(包括半透明)
{progress percentage="10%" color="#ff6c6c"/}
{progress percentage="20%" color="#ab74e4"/}
{progress percentage="30%" color="green"/}
{progress percentage="40%" color="yellow"/}
{progress percentage="50%" color="blue"/}
{progress percentage="60%" color="pink"/}
自行删除代码内的 * 符号
{*progress percentage="10%" color="#ff6c6c"/}
{*progress percentage="20%" color="#ab74e4"/}
{*progress percentage="30%" color="green"/}
{*progress percentage="40%" color="yellow"/}
{*progress percentage="50%" color="blue"/}
{*progress percentage="60%" color="pink"/}标注
{callout color="orange"}
标注内容
{/callout}
自行删除代码内的 * 符号
{*callout color="orange"}
标注内容
{/callout}标签页
{tabs}
{tabs-pane label="标签一"}
标签一内容
{/tabs-pane}
{tabs-pane label="标签二"}
标签二内容
{/tabs-pane}
{/tabs}
自行删除代码内的 * 符号
{*tabs}
{tabs-pane label="标签一"}
标签一内容
{/tabs-pane}
{tabs-pane label="标签二"}
标签二内容
{/tabs-pane}
{/tabs}卡片列表
{card-list}
{card-list-item}
列表一内容
{/card-list-item}
{card-list-item}
列表二内容
{/card-list-item}
{/card-list}
自行删除代码内的 * 符号
{*card-list}
{card-list-item}
列表一内容
{/card-list-item}
{card-list-item}
列表二内容
{/card-list-item}
{/card-list}时间轴
{timeline}
{timeline-item color="#19be6b"}
2021-2-14 正式上线
{/timeline-item}
{timeline-item color="#ed4014"}
删库跑路
{/timeline-item}
{/timeline}
自行删除代码内的 * 符号
{*timeline}
{timeline-item color="#19be6b"}
2021-2-14 正式上线
{/timeline-item}
{timeline-item color="#ed4014"}
删库跑路
{/timeline-item}
{/timeline}描述卡片
{card-describe title="卡片描述"}
卡片内容
{/card-describe}
自行删除代码内的 * 符号
{*card-describe title="卡片描述"}
卡片内容
{/card-describe}跑马灯
{lamp/}
作者懒，不想加入自定义颜色功能
自行删除代码内的 * 符号
{*lamp/}折叠面板
{collapse}
{collapse-item label="折叠标题一" open}
折叠内容一
{/collapse-item}
{collapse-item label="折叠标题二"}
折叠内容二
{/collapse-item}
{/collapse}
自行删除代码内的 * 符号
{*collapse}
{collapse-item label="折叠标题一" open}
折叠内容一
{/collapse-item}
{collapse-item label="折叠标题二"}
折叠内容二
{/collapse-item}
{/collapse}云盘下载
{cloud title="360云盘" type="360" url="/" password="1234"/}
{cloud title="百度云盘" type="bd" url="/" password="1234"/}
{cloud title="天翼网盘" type="ty" url="/" password="1234"/}
{cloud title="城通网盘" type="ct" url="" password=""/}
{cloud title="微云网盘" type="wy" url="" password=""/}
{cloud title="Github仓库" type="github" url="" password=""/}
{cloud title="蓝奏云盘" type="lz" url="" password=""/}
自行删除代码内的 * 符号
{*cloud title="360云盘" type="360" url="/" password="1234"/}
{*cloud title="百度云盘" type="bd" url="/" password="1234"/}
{*cloud title="天翼网盘" type="ty" url="/" password="1234"/}
{*cloud title="城通网盘" type="ct" url="" password=""/}
{*cloud title="微云网盘" type="wy" url="" password=""/}
{*cloud title="Github仓库" type="github" url="" password=""/}
{*cloud title="蓝奏云盘" type="lz" url="" password=""/}宫格
{gird column="3" gap="15"}
{gird-item}
宫格内容一
{/gird-item}
{gird-item}
宫格内容二
{/gird-item}
{gird-item}
宫格内容三
{/gird-item}
{/gird}
虽然我觉得这个没什么卵用，但是既然作者做出来了，我也不能不发出来
自行删除代码内的 * 符号
{*gird column="3" gap="15"}
{*gird-item}
宫格内容一
{/gird-item}
{*gird-item}
宫格内容二
{/gird-item}
{*gird-item}
宫格内容三
{/gird-item}
{/gird}提示
{alert type="info"}
警告提示
{/alert}
{alert type="success"}
警告提示
{/alert}
{alert type="warning"}
警告提示
{/alert}
{alert type="error"}
警告提示
{/alert}
自行删除代码内的 * 符号
type内分别为info、success、warning、error四种样式
{*alert type="info"}
警告提示
{/alert}写在最后
虽然这些短代码在编辑器里都有快捷键，但是万一哪天主题作者抽风更新，把他的编辑器删了，我这里还有备份短代码供大家学习
本文章长期不定时更新，尽量争取更新摘取所有短代码