以下内容均使用Vditor编辑器编辑

以下内容均使用Vditor编辑器编辑(强烈推荐),想要实现以下样式如何非Vditor编辑器请配合Tool-Bench使用。

居中标题

  • 01
<joe-mtitle title="XW"></joe-mtitle>

halo-theme-joe3

  • 01
halo-theme-joe3

代码块

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
\```html <html> <head> <title>标题</title> </head> <body> <p>远上寒山石径斜,白云生处有人家。</p> </body> </html> \```

表格元素

表头 1 表头 2 表头 3
内容 1 内容 2 内容 3
  • 01
  • 02
  • 03
  • 04
| 表头 1 | 表头 2 | 表头 3 | | :----: | :----: | :----: | | 内容 1 | 内容 2 | 内容 3 |

表头 1 表头 2 表头 3
内容 1 内容 2 内容 3
  • 01
  • 02
  • 03
  • 04
| 表头 1 | 表头 2 | 表头 3 | | -----: | -----: | -----: | | 内容 1 | 内容 2 | 内容 3 |

按钮元素

  • 01
<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>

  • 01
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>

  • 01
<joe-abtn radius="12px" content="圆角按钮"></joe-abtn>

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
<joe-abtn color="#409eff" icon="fa-bell" href="#" radius="3px" content="搭配在一起"></joe-abtn>

  • 01
  • 02
  • 03
  • 04
  • 05
<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote> <joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote> <joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote> <joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote> <joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>

  • 01
  • 02
  • 03
  • 04
  • 05
<joe-copy title="点击复制" content="这是一段美好的鸡汤文" color="green" bold></joe-copy>

  • 01
  • 02
  • 03
  • 04
  • 05
<joe-anote icon="fa-download" href="#" type="success" content="标签按钮"></joe-anote>

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
<joe-cloud type="default" url="" password=""></joe-cloud> <joe-cloud type="360" url="" password=""></joe-cloud> <joe-cloud type="bd" url="" password="bn6f"></joe-cloud> <joe-cloud type="ty" url="" password=""></joe-cloud> <joe-cloud type="ct" url="" password=""></joe-cloud> <joe-cloud type="wy" url="" password=""></joe-cloud> <joe-cloud type="github" url="" password=""></joe-cloud> <joe-cloud type="gitee" url="" password=""></joe-cloud> <joe-cloud type="lz" url="" password=""></joe-cloud> <joe-cloud type="ad" url="" password=""></joe-cloud>

装饰元素

  • 01
<span class="joe_lamp"></span>

  • 01
<joe-progress percentage="50%" color="#6ce766"></joe-progress>


  • 01
  • 02
<joe-dotted></joe-dotted> <joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>

{tabs-pane 第一个}单身狗的故事{/tabs-pane} {tabs-pane 第二个}小说家的故事{/tabs-pane}
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
<joe-tabs> <div class="_tpl"> {tabs-pane 第一个}单身狗的故事{/tabs-pane} {tabs-pane 第二个}小说家的故事{/tabs-pane} </div> </joe-tabs>

{timeline-item 2020}10元{/timeline-item} {timeline-item 2021}20元{/timeline-item} {timeline-item 2022}100元{/timeline-item}
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
<joe-timeline> <div class="_tpl"> {timeline-item 2020}10元{/timeline-item} {timeline-item 2021}20元{/timeline-item} {timeline-item 2022}100元{/timeline-item} </div> </joe-timeline>


  • 01
<joe-dplayer src="https://52he.cc/usr/themes/Brave/base/img/shiping/Train.webm"></joe-dplyer>

  • 01
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>

  • 01
<joe-pdf src="/upload/Chinese%20Simplified%20-%20Siemens-SW-Heatsinks-here-there-everywhere-White%20Paper.pdf"></joe-pdf>

  • 01
<joe-mlist id="6800335663"></joe-mlist>

  • 01
  • 02
  • 03
<joe-message type="info" content="普通消息"></joe-message> <joe-message type="warning" content="警告消息"></joe-message> <joe-message type="error" content="错误消息"></joe-message>

以上大部分为 webcomponents 组件,且仅在使用 halo-theme-joe3.0 主题时才能生效,请根据实际情况使用。

组件定义文件见主题目录下的 assets/js/custom.js。

文章出自: Jiewen