侧边栏壁纸
博主头像
梦荟楼

干啥啥不行,干饭第一名

  • 累计撰写 24 篇文章
  • 累计创建 59 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

🍭 Joe2.0 样式指南

梦荟楼
2022-03-28 / 0 评论 / 1 点赞 / 852 阅读 / 5,040 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-02,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

🌝 本文主要展示 halo-theme-joe2.0 中的各种样式,方便大家写作的时候进行参考,部分样式可能会在迭代过程中有所变更,请及时关注最新信息。
本文章来自M酷请查看原文章,本文章只是根据我自己的需求改了改

文本元素

标题

image

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

下划线

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

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

加粗

气喘吁吁 的和你说:我在跑步

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

倾斜

你问她为什么有 啪啪啪 的声音,她和你说:我是穿拖鞋跑步的

你问她为什么有 *啪啪啪* 的声音,她和你说:我是穿拖鞋跑步的

删除线

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

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

引用

那女孩对你说:你还不如跳蛋。

>那女孩对你说:你还不如跳蛋。

超链接

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

[=== 高清无码套图 50P ===](https://baidu.com)

段落缩进

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

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

居中标题

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

代码元素

行内代码

halo-theme-joe2.0

`halo-theme-joe2.0`

代码块

<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <p>远上寒山石径斜,白云生处有人家。</p>
  </body>
</html>
#Joe {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100vh;
}

列表元素

有序列表

杜蕾斯(durex)的优点如下:

  1. 耐久(durability)
  2. 可靠(reliability)
  3. 优良(excellence)
1. 耐久(durability)
2. 可靠(reliability)
3. 优良(excellence)

无序列表

  • 一个女朋友
  • 二个女朋友
  • 三个女朋友
  • N 个女朋友
- 一个女朋友
- 二个女朋友
- 三个女朋友
- N 个女朋友
- 卒

任务列表

  •  早餐
  •  上班
  •  午餐
  •  锻炼
  •  睡觉
- [x] 早餐
- [x] 上班
- [x] 午餐
- [ ] 锻炼
- [ ] 睡觉

表格元素

左对齐

表头 1表头 2表头 3
内容 1内容 2内容 3
| 表头 1 | 表头 2 | 表头 3 |
|:------ |:------ |:------ |
| 内容 1 | 内容 2 | 内容 3 |

居中

表头 1表头 2表头 3
内容 1内容 2内容 3
| 表头 1 | 表头 2 | 表头 3 |
|:------: |:------: |:------: |
| 内容 1 | 内容 2 | 内容 3 |

右对齐

表头 1表头 2表头 3
内容 1内容 2内容 3
|表头 1|表头 2|表头 3|
|-------:|-------:|-------:|
|内容 1|内容 2|内容 3|

按钮元素

多彩按钮

自定义自己想要的颜色

<joe-abtn color="#66ccff" content="多彩按钮"></joe-abtn>

自定义图标,达 6000+ 图标任你使用

<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-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" title="《丛林奇航》HD高清中字" 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="lz" 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>

评论后可见

<joe-hide></joe-hide>

头像框

列出了当前主题包含的头像框,方便大家进行选择
image-1648474464877

emoji 表情

列出一些通用表情元素,更多请 参见这里参见这里

😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷🙁🙂🙃🙄🤐🤑🤒🤓🤔🤕🤠🤡🤢🤣🤤🤥🤧🤨🤩🤪🤫🤬🤭🤮🤯🧐😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷😸😹😺😻😼😽😾😿🙀🙁🙂🙃🙄

媒体元素

image-1648474555956

视频播放器

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

bilibili 视频

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

PDF 预览

<joe-pdf src="https://oniya.cn/halo/%F0%9F%8D%AD%20Joe2.pdf" ></joe-pdf>

网易云歌单

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

网易云单曲

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

提示元素

消息提示




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

注意事项!!!

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

1

评论区