Joe3样式指南-小破站

文本元素

标题

下划线

今天天气很好，你拨通了女盆友的电话1300002225

加粗

她气喘吁吁的和你说：我在跑步

倾斜

你问它为什么声音，它说：我在跑步

删除线

你明白了，此刻自己头上正顶着个~~绿帽子~~

引用

我对你说

超链接

=== 高清无码套图 50P ===

段落缩进

有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ---- 李七毛《我们都不擅长告别》

<p class="indent">
有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。
---- 李七毛《我们都不擅长告别》
</p>

居中标题

<joe-mtitle title="牛鞭牛鞭"></joe-mtitle>

小标签

小标签 ChatGPT

小标签已修正内容

小标签待确认内容

<!-- type支持自定义 可以仿照插件中的相关CSS实现自定义小标签备注功能 -->
<tool-sign type="gpt">小标签 ChatGPT</tool-sign>
<tool-sign type="modified">小标签 已修正内容</tool-sign>
<tool-sign type="not-sure">小标签 待确认内容</tool-sign>

折叠块

这是折叠内容

<!-- title默认为"折叠内容"，expand默认为true -->

<tool-expand title="折叠块" expand=true>这是折叠内容</tool-expand>

Github仓库

<!-- 仓库所有者的名称应当填写你的GitHub Account Username而不是Name，得是你自己的库，别人的没用 -->
<tool-github owner="仓库所有者" repo="仓库名"></tool-github>

代码元素

行内代码

halo-theme-joe2.0

halo-theme-joe2.0

代码块

<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <p>远上寒山石径斜，白云生处有人家。</p>
  </body>
</html>

```html
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <p>远上寒山石径斜，白云生处有人家。</p>
  </body>
</html>

列表元素

有序列表

优点如下：

可靠
可靠
可靠

无序列表

不可靠
不可靠
不可靠

任务列表

早餐
午餐
晚餐

表格元素

左对齐

col1	col2	col3
1	2	3
4	5	6

居中

col1	col2	col3
1	2	3
4	5	6

右对齐

col1	col2	col3
1	2	3
4	5	6

按钮元素

多彩按钮

自定义自己想要的的按钮

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

自定义图标，达6000+图标任你使用/joe-abtn>

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

自定义圆角度数，最大18px

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

搭配在一起使用

<joe-abtn  color="#409eff"  icon="fa-bell" href="#" radius="3px"    content="搭配在一起"></joe-abtn>

便条按钮

便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样

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

复制按钮

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

标签按钮

<joe-anote icon="fa-download" href="#" type="success" content="标签按钮"></joe-anote>

网盘按钮

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

装饰元素

分割线

------------

跑马灯

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

进度条

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

彩色虚线

可自定义虚线颜色

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

Tabs

{tabs-pane 第一个}单身狗的故事{/tabs-pane} {tabs-pane 第二个}小说家的故事{/tabs-pane}

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

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

渲染原始内容

主题默认对常用的HTML标签进行了样式美化，但有时候你可能不想应用这些样式。比如你想富文本内容中的样式能够原样展示，那么就需要用到这个标签来承载你的内容，该标签内的内容将不会被外部样式和脚本污染，反之亦然。

俺是个3级标题，我有自己的样式

我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的

<joe-raw-content>
  <div id="_raw">
    <div
      style="padding: 1px 10px;background: linear-gradient(45deg, #329891, #ffe266);"
    >
      <h3 style="color:blue;font-style:italic">
        俺是个3级标题，我有自己的样式
      </h3>
      <p>我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的</p>
    </div>
  </div>
</joe-raw-content>

媒体元素

图片预览

视频播放

<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>

Bilibili 视频

<joe-bilibili bvid="BV1Yi421R7g4"></joe-bilibili>

PDF预览

<joe-pdf src="/upload/2_亿光简介%20-大专本科%20.pdf"></joe-pdf>

网易云歌单

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

网易云单曲

<joe-music id="1303046498"></joe-music>

音乐播放器

<joe-mp3 name="天生狂野-柴古唐斯主题曲" url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3" theme="red" cover="https://bbchin.com/upload/2022/04/cgts.png" autoplay></joe-mp3>

提示元素

消息提示

<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>

Joe3样式指南