Joe主题所用部分代码样式

一级标题样式

实现代码:

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

二级标题风格样式

实现代码:

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

三级标题风格样式

实现代码:

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

四级标题风格样式

实现代码:

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

实现代码:

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

实现代码:

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

[line]标签短代码[/line]
[tag type=”default”]标签一[/tag] [tag type=”success”]标签二[/tag] [tag type=”info”]标签三[/tag] [tag type=”warning”]标签四[/tag] [tag type=”danger”]标签五[/tag]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

[@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]
[alt type=”info”]用的时候把 @ 符号删掉。href: 跳转链接。[/alt]

[@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=”info”]用的时候把 @ 符号删掉。[/alt]

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

[line]当前线状标题短代码[/line]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

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

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

[line]基础卡片短代码[/line]
[alt type=”info”]用的时候把 @ 符号删掉。width 不可省略![/alt]
[card-default width=”100%” label=”卡片标题”]卡片内容[/card-default]

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

[line]展开关闭短代码[/line]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]
[collapse]
[collapse-item label=”标题”]我是隐藏的[/collapse-item]
[collapse-item label=”标题”]我是隐藏的[/collapse-item]
[/collapse]

[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

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

[line]时间线短代码[/line]
[timeline]
[timeline-item]啊哈哈哈哈[/timeline-item]
[timeline-item]草族看剑[/timeline-item]
[/timeline]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

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

[line]复制短代码[/line]
[copy]点我复制[/copy]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

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

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

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

[line]回复可见短代码[/line]


用的时候把 @ 符号删掉。

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

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

网站名称 网站地址 网站描述
遇上你 https://chenyu.me 要时间嘉许,等春风得意,我正好遇上你
上水君玉 https://www.chenyu.me 要时间嘉许,等春风得意,我正好遇上你
网站名称|网站地址|网站描述
:--:|:--:|:--:
遇上你|https://chenyu.me|要时间嘉许,等春风得意,我正好遇上你
上水君玉|https://www.chenyu.me|要时间嘉许,等春风得意,我正好遇上你

其中的:-:,代表居中的意思;:-,代表靠左对齐;-:,代表靠右对齐;|,代表表格线。

[line]字体颜色[/line]
Markdown的转义符号是\...\

\!\"\#\$\%\&\'\(\)\*\+\,\-\.\/\:\;\<\=\>\?\@\[\\\]\^\_\`\{\|\}\~
背景色的设置是按照十六进制颜色值:#7FFFD4
背景色的设置是按照十六进制颜色值:#FF83FA
背景色的设置是按照十六进制颜色值:#D1EEEE
背景色的设置是按照十六进制颜色值:#C0FF3E
背景色的设置是按照十六进制颜色值:#54FF9F
这里的背景色是:OrangeRed, 十六进制颜色值:#FF4500, rgb(255, 69, 0)

代码如下:

<table><tr><td bgcolor=#FF00FF>背景色的设置是按照十六进制颜色值:#7FFFD4</td></tr></table>
<table><tr><td bgcolor=#FF83FA>背景色的设置是按照十六进制颜色值:#FF83FA</td></tr></table>
<table><tr><td bgcolor=#D1EEEE>背景色的设置是按照十六进制颜色值:#D1EEEE</td></tr></table>
<table><tr><td bgcolor=#C0FF3E>背景色的设置是按照十六进制颜色值:#C0FF3E</td></tr></table>
<table><tr><td bgcolor=#54FF9F>背景色的设置是按照十六进制颜色值:#54FF9F</td></tr></table>

<table>
  <tr>
    <td bgcolor=#FF4500>这里的背景色是:OrangeRed,  十六进制颜色值:#FF4500, rgb(255, 69, 0)</td>
  </tr>
</table>

以下是各种漂亮的颜色代码对照表:

这里是红色
2 红色 #FF0000
3 绿色 #00FF00
4 蓝色 #0000FF
5 牡丹红 #FF00FF
6 青色 #00FFFF
7 黄色 #FFFF00
8 黑色 #000000
9 海蓝 #70DB93
10 巧克力色 #5C3317
11 蓝紫色 #9F5F9F
12 黄铜色 #B5A642
13 亮金色 #D9D919
14 棕色 #A67D3D
15 青铜色 #8C7853
16 2号青铜色 #A67D3D
17 士官服蓝色 #5F9F9F
18 冷铜色 #D98719
19 铜色 #B87333
20 珊瑚红 #FF7F00
21 紫蓝色 #42426F
22 深棕 #5C4033
23 深绿 #2F4F2F
24 深铜绿色 #4A766E
25 深橄榄绿 #4F4F2F
26 深兰花色 #9932CD
27 深紫色 #871F78
28 深石板蓝 #6B238E
29 深铅灰色 #2F4F4F
30 深棕褐色 #97694F
32 深绿松石色 #7093DB
33 暗木色 #855E42
34 淡灰色 #545454
35 土灰玫瑰红色 #856363
36 长石色 #D19275
37 火砖色 #8E2323
38 森林绿 #238E23
39 金色 #CD7F32
40 鲜黄色 #DBDB70
41 灰色 #C0C0C0
42 铜绿色 #527F76
43 青黄色 #93DB70
44 猎人绿 #215E21
45 印度红 #4E2F2F
46 土黄色 #9F9F5F
47 浅蓝色 #C0D9D9
48 浅灰色 #A8A8A8
49 浅钢蓝色 #8F8FBD
59 浅木色 #E9C2A6
60 石灰绿色 #32CD32
61 桔黄色 #E47833
62 褐红色 #8E236B
63 中海蓝色 #32CD99
64 中蓝色 #3232CD
65 中森林绿 #6B8E23
66 中鲜黄色 #EAEAAE
67 中兰花色 #9370DB
68 中海绿色 #426F42
69 中石板蓝色 #7F00FF
70 中春绿色 #7FFF00
71 中绿松石色 #70DBDB
72 中紫红色 #DB7093
73 中木色 #A68064
74 深藏青色 #2F2F4F
75 海军蓝 #23238E
76 霓虹篮 #4D4DFF
77 霓虹粉红 #FF6EC7
78 新深藏青色 #00009C
79 新棕褐色 #EBC79E
80 暗金黄色 #CFB53B
81 橙色 #FF7F00
82 橙红色 #FF2400
83 淡紫色 #DB70DB
84 浅绿色 #8FBC8F
85 粉红色 #BC8F8F
86 李子色 #EAADEA
87 石英色 #D9D9F3
88 艳蓝色 #5959AB
89 鲑鱼色 #6F4242
90 猩红色 #BC1717
91 海绿色 #238E68
92 半甜巧克力色 #6B4226
93 赭色 #8E6B23
94 银色 #E6E8FA
95 天蓝 #3299CC
96 石板蓝 #007FFF
97 艳粉红色 #FF1CAE
98 春绿色 #00FF7F
99 钢蓝色 #236B8E
100 亮天蓝色 #38B0DE
101 棕褐色 #DB9370
102 紫红色 #D8BFD8
103 石板蓝色 #ADEAEA
104 浓深棕色 #5C4033
105 淡浅灰色 #CDCDCD
106 紫罗兰色 #4F2F4F
107 紫罗兰红色 #CC3299
108 麦黄色 #D8D8BF
109 黄绿色 #99CC32

[line]字体格式[/line]
加粗斜体删除线链接1

<strong>加粗</strong>,<em>斜体</em>,<del>删除线</del>,<a href="">链接</a><sup><a href="https://chenyu.me/">1</a></sup>

[line]脚注[/line]

一、正文标题1

二、正文标题2

三、正文标题3

#一、正文标题[^xr1]
[^xr1]:这里是对脚注1的描述
#二、正文标题[^xr2]
[^xr2]:这里是对脚注2的描述
#三、正文标题[^xr3]
[^xr3]:这里是对脚注3的描述

[line]相册[/line]
[photo]

ltbk05

ltbk04

ltbk03

ltbk01

 

[/photo]

[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

[@photo]
![天使在人间][1]
![天使在人间][2]
![天使在人间][3]
[@/photo]

  [1]:https://chenyu.me/My/photo/baby/baby01.jpg
  [2]:https://chenyu.me/My/photo/baby/baby02.jpg
  [3]:https://chenyu.me/My/photo/baby/baby03.jpg

[line]卡片导航功能[/line]
[card-nav]
[card-nav-item src=”https://chenyu.me/” title=”遇上你” img=”https://cdn.chenyu.me/gh/cy-j/[email protected]/img/logo/yu1.png” /]
[card-nav-item src=”https://www.chenyu.me/” title=”上水君玉” img=”https://cdn.chenyu.me/gh/cy-j/[email protected]/img/logo/yu2.png” /]
[/card-nav]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

[@card-nav]
[@card-nav-item src="https://chenyu.me/" title="遇上你" img="https://cdn.chenyu.me/gh/cy-j/[email protected]/img/logo/yu1.png" /]
[@card-nav-item src="https://www.chenyu.me/" title="上水君玉" img="https://cdn.chenyu.me/gh/cy-j/[email protected]/img/logo/yu2.png" /]
[@/card-nav]

[line]文章插入视频[/line]
[dplayer src=”https://pan.chenyu.me/zy/web/szhk.mp4” autoplay=”false”/]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

[@dplayer src="https://xxx.com/xxx.mp4" /]

开启自动播放

[@dplayer src="https://xxx.com/xxx.mp4"  autoplay="true"/]

[line]网易云音乐[/line]
[music id=”1495496315″/]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

[@music id="1495496315"/]

[line]网易云歌单[/line]
[music-list id=”5370364292″ /]
[alt type=”info”]用的时候把 @ 符号删掉。[/alt]

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

  1. 这里是对脚注1的描述
  2. 这里是对脚注2的描述
  3. 这里是对脚注3的描述
© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞7赞赏 分享
评论 共2条
头像
人生坎坎,山山而峦,不过尔尔;心路漫漫,水水而川,如此悠悠
提交
头像

昵称

取消
昵称表情代码图片
    • 头像你好0
    • 头像amiisk0