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