侧边栏壁纸

『教程』Joe主题帮助文档

2022年04月29日 1.2k阅读 2评论 3点赞

前言

好久没有更新文章了今天出一个Joe的编辑器代码使用吧。本文为Joe主题帮助及演示使用,转自Joe主题,您可以在下方找到您的问题及解决方案。

自行删除代码内的 * 符号

引用演示
一级引用
二级引用
三级引用
> 一级引用
> > 二级引用
>>>三级引用
文本加粗演示

欢迎使用Joe主题

**欢迎使用Joe主题**
文本倾斜演示

欢迎使用Joe主题

*欢迎使用Joe主题*
超链接演示

百度一下

 [百度一下](http://www.baidu.com) 
图片预览演示

插入图片

![插入图片](https://puui.qpic.cn/media_img/lena/PICxogfwz_580_1680/0) 
有序列表演示
  1. 有序列表项目
  2. 有序列表项目
  3. 有序列表项目
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代码


!!!
<span class="test">HTML代码</span>
<style>
  .test { color: #ff6800 }
</style>
!!!
文章插入表格演示
左对齐右对齐居中对齐
单元格单元格单元格
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
删除线演示

这是一段错误的内容

~~这是一段错误的内容~~
文章插入代码段演示(本版本支持上百种代码)
echo 'Hello Joe';

自行删除代码内的 * 符号

*```php
echo 'Hello Joe';
*```
行内代码演示

在网页开发种,我们经常用到 div 这个标签

` div `
任务规划演示

2020年存入100万
2020年活下来

{*x} 2020年存入100万
{* } 2020年活下来
默认卡片演示

{*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="错误提示信息演示"/}
居中标题演示

{*mtitle title="这是一个居中显示标题"/}
便条按钮演示

自行删除代码内的 * 符号
type内分别为secondary、success、warning、error、info五种样式

{*anote icon="fa-download" href="https://www.baidu. com" type="secondary" content="下载"/}
普通按钮演示

{*abtn icon="fa-car" color="#ff6800" href="https://www.baidu.com" radius="12px" content="黄色按钮"/} 
表情功能

表情 表情

彩色虚线

{*dotted startColor="#ab74e4" endColor="#1989fa"/}
进度条






{*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="#f0ad4e"}
标注内容
{/callout}
标签页


{*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}

时间轴

{*timeline}
{timeline-item color="#19be6b"}
 2021-12-18正式上线
{/timeline-item}
{timeline-item color="#ed4014"}
 删库跑路
{/timeline-item}
{/timeline}
描述卡片


{*card-describe title="卡片描述"}
卡片内容
{/card-describe}

跑马灯


{*lamp/}

折叠面板


{*collapse}
{collapse-item label="折叠标题一" open}
 折叠内容一
{/collapse-item}
{collapse-item label="折叠标题二"}
 折叠内容二
{/collapse-item}
{/collapse}

open默认展开,可删除

云盘下载







{*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="5"}
提示

自行删除代码内的 * 符号
type内分别为info、success、warning、error四种样式

{*alert type="info"}
警告提示
{/alert}
写在最后

虽然这些短代码在编辑器里都有快捷键,但是万一哪天主题作者 抽风 更新,把他的编辑器删了,我这里还有备份短代码供大家学习.

本文章长期不定时更新,尽量争取更新摘取所有短代码

3

—— 评论区 ——

昵称
邮箱
网址
取消
  1. 头像
    966
    Android 12   Google Chrome 96
    回复

    666

  2. 头像
    haha
    Windows 10 x64 Edition   Google Chrome 104
    回复

    感谢

人生倒计时
最新评论