『教程』Joe主题帮助文档(含所有短代码,长期更新)
侧边栏壁纸
    love love love

  • 累计撰写 47 篇文章
  • 累计收到 939 条评论

『教程』Joe主题帮助文档(含所有短代码,长期更新)

六六丶
2021-02-22 / 29 评论 / 514 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年06月08日,已超过111天没有更新,若内容或图片失效,请留言反馈。

本文为Joe主题帮助及演示使用,转自Joe主题,您可以在下方找到您的问题及解决方案

主题下载地址1:QQ群:198963776
主题下载地址2:https://github.com/HaoOuBa/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="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}
{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-2-14 正式上线
{/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}

云盘下载

自行删除代码内的 * 符号

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

提示

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

{*alert type="info"}
警告提示
{/alert}

写在最后

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

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

16

打赏

评论 (29)

取消
  1. 头像
    哈哈哈
    Linux · Safari

    感谢分享!

    回复
  2. 头像
    Windows 7 · Google Chrome

    表情 小霸王的里面好多错误提示,源码我也有,还有跨域问题,看着好不舒服

    回复
    1. 头像
      六六
      Android · Google Chrome
      @

      你看我的,我稍微做了一些调整,会好一点点

      回复
  3. 头像
    溪芕
    Windows 10 · Google Chrome

    表情

    回复
  4. 头像
    云海
    Windows 10 · Google Chrome

    可以可以可以,很详细

    回复
    1. 头像
      六六丶 作者
      Android · QQ Browser
      @ 云海

      感谢你的支持

      回复
  5. 头像
    Joe
    iPhone · QQ Browser

    表情表情表情表情

    回复
    1. 头像
      六六丶 作者
      Android · QQ Browser
      @ Joe

      什么玩意

      回复
      1. 头像
        Joe
        iPhone · QQ Browser
        @ 六六丶

        居然说我抽风删编辑器表情表情表情

        回复
        1. 头像
          六六丶 作者
          Android · QQ Browser
          @ Joe

          万一呢表情

          回复
  6. 头像
    Too子牙
    Android · QQ Browser

    那具体的短代码是什么呢 有些在joe博主的博客可以找到 有些没有 比如便条 提示信息 可以方便说下吗表情

    回复
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ Too子牙

      你可以直接F12扒代码

      回复
      1. 头像
        Too子牙
        Windows 10 · Google Chrome
        @ 六六丶

        你的意思是写每一篇文章都直接用html写,你也是这样写的,真厉害表情

        回复
        1. 头像
          六六丶 作者
          Android · QQ Browser
          @ Too子牙

          表情并不是这个意思,只是扒关键代码就行了

          回复
          1. 头像
            Too子牙
            Windows 10 · Google Chrome
            @ 六六丶

            是我唐突了 但是你还是没有明白我的意思 我想问的是比如加粗是两个** 而用html是strong标签 我就想知道用**的方式 便条和提示信息 是怎么写的

            回复
            1. 头像
              六六丶 作者
              Android · QQ Browser
              @ Too子牙

              你把代码扒开看看你就明白了,因为markdown支持**等基础语法,但是不支持便条和提示的,便条和提示是主题作者添加的功能,你把代码扒开就能知道便条和提示用的什么代码了,另外说一句,虽然这篇文章是我从主题作者那转来的,但是整片文章我都是直接扒代码写出来的

              回复
              1. 头像
                Too子牙
                Windows 10 · Google Chrome
                @ 六六丶

                好吧 抱歉 谢谢了表情

                回复
                1. 头像
                  六六丶 作者
                  Android · QQ Browser
                  @ Too子牙

                  我估计你是用的Joe最新版主题,这个主题在6.0以前其实是用的typecho默认编辑器,只不过主题作者在默认编辑器上添加了便条等功能

                  回复
                  1. 头像
                    Too子牙
                    Windows 10 · Google Chrome
                    @ 六六丶

                    确实 我是一直在更新的

                    回复
                    1. 头像
                      六六丶 作者
                      Android · Google Chrome
                      @ Too子牙

                      等明天我把恢复原版编辑器的教程发出来,你可以参考换回6.0之前的编辑器

                      回复
                      1. 头像
                        Too子牙
                        Windows 10 · Google Chrome
                        @ 六六丶

                        好的 谢谢了表情表情表情

                        回复
                        1. 头像
                          六六丶 作者
                          Windows 7 · Google Chrome
                          @ Too子牙

                          老版编辑器教程更新了 https://blog.52aill.xyz/archives/212/

                          回复
            2. 头像
              Too子牙
              Windows 10 · Google Chrome
              @ Too子牙

              joe主题自己实现的md语法 不会 就想问这个

              回复
              1. 头像
                六六丶 作者
                Windows 7 · Google Chrome
                @ Too子牙

                所有功能代码都分享出来了表情

                回复
                1. 头像
                  Too子牙
                  Android · QQ Browser
                  @ 六六丶

                  厉害 真的有心了 这样认真负责的博主以后肯定可以成就一番大事业表情

                  回复
                  1. 头像
                    六六丶 作者
                    Android · QQ Browser
                    @ Too子牙

                    谬赞了表情

                    回复
  7. 头像
    花开陌路
    Windows 7 · QQ Browser

    不错学习下

    回复
  8. 头像
    QQ
    Android · QQ Browser

    牛批

    回复
  9. 头像
    六六丶 作者
    Windows 7 · Google Chrome

    o( ̄▽ ̄)d牛

    回复