侧边栏壁纸
  • 累计撰写 34 篇文章
  • 累计收到 18 条评论

Typecho-Joe-Theme

Hrlni
2020-11-21 / 0 评论 / 94 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2020年12月12日,已超过603天没有更新,若内容或图片失效,请留言反馈。

一级标题样式

实现代码

啊八八八八吧

二级标题风格样式

实现代码

## 啊八八八八吧

三级标题风格样式

实现代码

### 啊八八八八吧

四级标题风格样式

实现代码

#### 四级标题风格样式
五级标题风格样式

实现代码

#####五级标题风格样式
六级标题风格样式

实现代码

######六级标题风格样式

[line]代码演示[/line]

标签

[tag type="default"]标签一[/tag]
[tag type="success"]标签二[/tag]
[tag type="info"]标签三[/tag]
[tag type="warning"]标签四[/tag]
[tag type="danger"]标签五[/tag]
用的时候把 @ 符号删掉,这里加上是为了防止自带解析成上面看到的样式

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

按钮

[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]

提示

[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]

tab栏

[tabs]
[tab-pane label="用户管理"]用户管理[/tab-pane]
[tab-pane label="配置管理"]配置管理[/tab-pane]
[tab-pane label="角色管理"]角色管理[/tab-pane]
[tab-pane label="角色管理"]角色管理[/tab-pane]
[/tabs]
用的时候把 @ 符号删掉,这里加上是为了防止自带解析成上面看到的样式。

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

基础卡片

[card-default width="100%" label="卡片标题"]卡片内容[/card-default]
用的时候把 @ 符号删掉,这里加上是为了防止自带解析成上面看到的样式。

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

展开关闭

[collapse]
[collapse-item label="标题"]我是隐藏的[/collapse-item]
[collapse-item label="标题"]我是隐藏的[/collapse-item]
[/collapse]
用的时候把 @ 符号删掉,这里加上是为了防止自带解析成上面看到的样式。

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

时间线

[timeline]
[timeline-item]啊哈哈哈哈[/timeline-item]
[timeline-item]草族看剑[/timeline-item]
[/timeline]

用的时候把 ```@``` 符号删掉,这里加上是为了防止自带解析成上面看到的样式。
[@timeline]
[@timeline-item]啊哈哈哈哈[/timeline-item]
[@timeline-item]草族看剑[/timeline-item]
[@/timeline]

message消息弹框

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

注意:以上的提示信息,在移动端的样式是统一的,只会在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>

模版相关

如何设置回复可见?

编写文章时加入以下代码 @ 去掉

[@hide]我是被隐藏的内容[/hide]
0

评论 (0)

取消