目 录CONTENT

文章目录

Joe2.0主题样式指南

米尔嘉
2022-07-06 / 0 评论 / 8 点赞 / 628 阅读 / 3,274 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-06-03,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

文章页面

a、文章页元数据(postMetaField)
字段名 值类型 默认值 描述
enable_aside Boolean true 是否启用侧边栏
enable_page_meta Boolean true 是否展示页面元信息(即顶部的字数、阅读量等数据)
enable_passage_tips Boolean true 是否展示温馨提示
enable_collect_check Boolean true 是否启用百度收录检查
enable_read_limit Boolean false 是否开启评论后可见
use_raw_content Boolean false 是否渲染原始内容
enable_comment Boolean true 是否启用评论功能
enable_toc Boolean true 是否启用 Toc 目录
toc_depth Number 0 Toc 目录默认展开层级 0~6,对应标题层级 h1 ~ h6
img_align String “center” 图片对齐方式(left-左对齐;center-居中;right-右对齐)
img_max_width String “100%” 图片最大宽度
enable_copy Boolean true 是否允许复制内容
enable_donate Boolean true 是否启用打赏(必须配置好相应二维码)
enable_share Boolean true 是否启用分享
enable_like Boolean true 是否启用点赞
code_theme String “one-dark” 指定代码主题(默认和全局设置一致)
enable_fold_long_code Boolean true 是否开启长代码块自动折叠
enable_katex Boolean false 是否启用公式支持
b、自定义页元数据(sheetMetaField)
字段名 值类型 默认值 描述
enable_aside Boolean true 是否启用侧边栏
enable_page_meta Boolean true 是否展示页面元信息(即顶部的字数、阅读量等数据)
enable_collect_check Boolean true 是否启用百度收录检查
use_raw_content Boolean false 是否渲染原始内容
enable_comment Boolean true 是否启用评论功能
img_align String “center” 图片对齐方式(left-左对齐;center-居中;right-右对齐)
img_max_width String “100%” 图片最大宽度
enable_katex Boolean false 是否启用公式支持

标题

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

文本元素

下划线

安然无恙

加粗

安然无恙

倾斜

安然无恙

删除线

安然无恙

引用

内心安然无恙

超链接

=== 安然无恙 ===

段落缩进

跨越山河去拥抱你 多大风浪都在一起 听到最美的记忆 关于你所有的消息 盼望每天都看到你 雨天也风和日丽 花花绿绿的世界里 我只会喜欢你 愿你在我看不到的地方 安然无恙 愿你的冬天永远不缺暖阳 愿你的明天不再 经历雨打风霜 愿你的未来永远热泪盈眶

<p class="indent">
    跨越山河去拥抱你多大风浪都在一起听到最美的记忆关于你所有的消息盼望每天都看到你雨天也风和日丽花花绿绿的世界里我只会喜欢你愿你在我看不到的地方安然无恙愿你的冬天永远不缺暖阳愿你的明天不再经历雨打风霜愿你的未来永远热泪盈眶
</p>

居中标题

<joe-mtitle title="安然无恙"></joe-mtitle>

代码元素

行内代码

安然无恙

代码块

安然无恙
<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;
}

列表元素

有序列表

  1. 有序列表
  2. 有序列表
  3. 有序列表

无序列表

  • 无序列表
  • 无序列表
  • 无序列表

任务列表

  • 早餐
  • 上班
  • 午餐
  • 锻炼
  • 睡觉
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 早餐</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 上班</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 午餐</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 锻炼</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 睡觉</li>
</ul>

表格元素

左对齐

表头 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="#409eff" 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-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>

装饰元素

分割线


跑马灯

<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}1000元{/timeline-item}
   {timeline-item 2021}2000元{/timeline-item}
   {timeline-item 2022}100000元{/timeline-item}
 </div>
</joe-timeline>

评论后可见

<joe-hide></joe-hide>

渲染原始内容

主题默认对常用的 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>

emoji 表情

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

媒体元素

图片预览

视频播放器

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

Bilibili 视频

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

PDF 预览

<joe-pdf  src="https://bbchin.com/upload/2022/03/Node%E7%9A%84%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0-0a7b571b1a5b4a0d8f810a253afe7077.pdf">
</joe-pdf>
<embed
      src="pdf链接"
      type="application/pdf"
      width="100%"
      height="800px"
    />

网易云歌单

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

数学公式

主题已经提供了对 数学公式Mermaid图形 的支持,数学公式使用 Katex 进行渲染,默认为关闭状态,需要手动打开。

必须先在 后台管理-外观-主题设置-文章页 中启用 数学公式支持

$\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$
$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$

i=0Nabg(t,i)dt\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t

Γ(z)=0tz1etdt.\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

Mermaid 图形

对于要展示 时序图、UML类图、甘特图 等的场景,需要使用代码块包裹内容,并指定语言类型为 mermaidHalo 会自动将它转换为 svg 给前台展示。(下面的示例是一个 UML类图,更多用法大家可以去 Mermaid 仓库 查看)。

CoolWhere am i?«interface»Class01int chimpint gorillasize()AveryLongClassClass09C2C3Class07Object[] elementDataequals()«service»Class10int idsize()

注意事项!!!

以上大部分为 webcomponents 组件,且仅在使用 halo-theme-joe2.0 主题时才能生效,请根据实际情况使用。
组件定义文件见主题目录下的 source/js/custom.js

转自 Joe2.0 样式指南

8

评论区