[line]Typecho Joe 主题[/line]
joe.png
[line]标题演示[/line]

一级标题样式

实现代码:

# 我是一级标题,一个#号

二级标题风格样式

实现代码:

## 我是二级标题,两个#号

三级标题风格样式

实现代码:

### 我是三级标题,三个#号

四级标题风格样式

实现代码:

#### 我是四级标题,四个#号
五级标题风格样式

实现代码:

##### 我是五级标题,四个#号
六级标题风格样式

实现代码:

###### 我是六级标题,六个#号

[line]标签短代码[/line]

标签一 标签二 标签三 标签四 标签五

用的时候把 @ 符号删掉

[@tag type="default"]标签一[/tag]
[@tag type="success"]标签二[/tag]
[@tag type="info"]标签三[/tag]
[@tag type="warning"]标签四[/tag]
[@tag type="danger"]标签五[/tag]

[line]按钮短代码[/line]

[btn href="" type="default"]默认按钮[/btn] [btn href="" type="primary"]主要按钮[/btn] [btn href="" type="success"]成功按钮[/btn] [btn href="" type="info"]信息按钮[/btn] [btn href="" type="warning"]警告按钮[/btn] [btn href="" type="danger"]危险按钮[/btn]

用的时候把 @ 符号删掉。href: 跳转链接

[@btn href="" type="default"]默认按钮[/btn]
[@btn href="" type="primary"]主要按钮[/btn]
[@btn href="" type="success"]成功按钮[/btn]
[@btn href="" type="info"]信息按钮[/btn]
[@btn href="" type="warning"]警告按钮[/btn]
[@btn href="" type="danger"]危险按钮[/btn]

[line]提示短代码[/line]

[alt type="success"]成功提示的文案[/alt] [alt type="info"]消息提示的文案[/alt] [alt type="warning"]警告提示的文案[/alt] [alt type="error"]错误提示的文案[/alt]

用的时候把 @ 符号删掉

[@alt type="success"]成功提示的文案[/alt]
[@alt type="info"]消息提示的文案[/alt]
[@alt type="warning"]警告提示的文案[/alt]
[@alt type="error"]错误提示的文案[/alt]

[line]当前线状标题短代码[/line]
用的时候把 @ 符号删掉

[line]当前线状标题短代码[/line]
[@line]当前线状标题短代码[/line]

[line]tab栏短代码[/line]

[@tabs]
[@tab-pane label="用户管理"]用户管理[/tab-pane]
[@tab-pane label="配置管理"]配置管理[/tab-pane]
[@tab-pane label="角色管理"]角色管理[/tab-pane]
[@tab-pane label="角色管理"]角色管理[/tab-pane]
[@/tabs]

[line]基础卡片短代码[/line]
用的时候把 @ 符号删掉。 width 不可省略

[card-default width="100%" label="卡片标题"]卡片内容[/card-default]
[@card-default width="100%" label="卡片标题"]卡片内容[/card-default]

[line]展开关闭短代码[/line]
用的时候把 @ 符号删掉

[collapse-item label="标题"]我是隐藏的[/collapse-item] [collapse-item label="标题"]我是隐藏的[/collapse-item]

[@collapse]
[@collapse-item label="标题"]我是隐藏的[/collapse-item]
[@collapse-item label="标题"]我是隐藏的[/collapse-item]
[@/collapse]

[line]时间线短代码[/line]
用的时候把 @ 符号删掉

大事记
[@timeline]
[@timeline-item]啊哈哈哈哈[/timeline-item]
[@timeline-item]草族看剑[/timeline-item]
[@/timeline]

[line]复制短代码[/line]
用的时候把 @ 符号删掉

[copy]点我复制[/copy]
[@copy]点我复制[@/copy]

[line]打字机效果短代码[/line]
用的时候把 @ 符号删掉。这里可能看不出效果

[typing]打字机打字机[/typing]
[@typing]打字机打字机[@/typing]

[line]回复可见短代码[/line]
用的时候把 @ 符号删掉。

此处内容需要评论回复后(审核通过)方可阅读。
[@hide]我是被隐藏的内容[@/hide]

[line]主题自带消息弹窗[/line]

成功提示 警告提示 消息提示

注意:以上的提示信息,在移动端的样式是统一的,只会在PC端呈现不同的样式,下面是以上实现的代码

<a no-target href="javascript:void(0)" onclick="$.toast({ type: 'success', message: '成功哈哈哈哈' })" class="j-btn success">成功提示</a>
<a no-target href="javascript:void(0)" onclick="$.toast({ type: 'warning', message: '警告哈哈哈哈' })" class="j-btn warning">警告提示</a>
<a no-target href="javascript:void(0)" onclick="$.toast({ type: 'info', message: '警告哈哈哈哈' })" class="j-btn info">消息提示</a>

[line]相册功能[/line]
[photo]
27971701.jpg
29474172.jpg
253609676.jpg
[/photo]
用的时候把 @ 符号删掉。

[@photo]
![27971701.jpg][5]
![29474172.jpg][6]
![253609676.jpg][7]
[@/photo]

[line]卡片导航功能[/line]

[card-nav] [card-nav-item src="http://baidu.com" title="百度一下" img="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" /] [card-nav-item src="http://baidu.com" title="百度一下" img="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" /] [/card-nav]

用的时候把 @ 符号删掉。

[@card-nav]
[@card-nav-item src="http://baidu.com" title="百度一下" img="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" /]
[@card-nav-item src="http://baidu.com" title="百度一下" img="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" /]
[@/card-nav]

[line]文章插入视频[/line]

[dplayer src="https://yun.abcio.cn/abcio/video/guzhuang.mp4" /]

用的时候把 @ 符号删掉。

[@dplayer src="https://yun.abcio.cn/abcio/video/guzhuang.mp4" /]

[line]网易云音乐[/line]

[music id="1495496315"/]

用的时候把 @ 符号删掉。

[@music id="1495496315"/]

[line]网易云歌单[/line]

[music-list id="5370364292" /]

用的时候把 @ 符号删掉。

[@music-list id="5370364292" /]

本文转载自Joe博客,原文链接:Joe主题

最后修改:2021 年 02 月 09 日
如果觉得我的文章对你有用,请随意赞赏鼓励!