文本合集

居中标题

<span class="joe_mtitle">
<span class="joe_mtitle__text">
测试
</span>
</span>
或者
<joe-mtitle title="牛鞭牛鞭"></joe-mtitle>

虚线描述和卡片描述

<div class="joe_card__describe">
		<div class="joe_card__describe-title">虚线描述</div>
		<div class="joe_card__describe-content">虚线内容</div>
</div>

<div class="joe_card__default" style="width: 100%">
		<div class="joe_card__default-title">卡片标题</div>
		<div class="joe_card__default-content">卡片内容</div>
</div>

段落缩进

<p class="indent">
  内容
</p>

tabs标签

<joe-tabs>
  <div class="_tpl">
    {tabs-pane 第一个}这是1{/tabs-pane}
    {tabs-pane 第二个}这是2{/tabs-pane}
    {tabs-pane 第三个}这是3{/tabs-pane}
  </div>
</joe-tabs>

按钮合集

便条按钮

<a class="joe_anote success|secondary|warning|error|info" href="https://demo.com" target="_blank" rel="noopener noreferrer nofollow">
		<span class="joe_anote__icon">
			<i class="fa fa-download"></i>
		</span>
		<span class="joe_anote__content">
			标签按钮
		</span>
</a>

网盘按钮

<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-mlist id="歌单ID"></joe-mlist>

插入网易单曲

<joe-music id="单曲ID"></joe-music>

插入本地音乐

<joe-mp3
  name="名字"
  url="链接"
  theme="red"
  cover="封面"
  autoplay
></joe-mp3>

插入本地视频

<joe-dplayer src="视频链接"></joe-dplyer>

视频播放器

https://player.xgr.cab/player/?url=视频链接

使用固定大小iframe嵌入

<iframe src="https://player.xgr.cab/player/?url=视频链接" allowfullscreen="" mozallowfullscreen="" msallowfullscreen="" oallowfullscreen="" webkitallowfullscreen="" width="100%" height="500px" frameborder="0"></iframe>

自适应大小iframe嵌入

<div class="video-container video-ratio-16by9"> <iframe src="https://player.xgr.cab/player/?url=视频链接" allowfullscreen="" mozallowfullscreen="" msallowfullscreen="" oallowfullscreen="" webkitallowfullscreen="" frameborder="0"></iframe> </div>

https://player.xgr.cab/player/?url=视频链接&next=下个视频链接&sid=1&pic=视频封面图片链接

player/?url=  //播放器路径 
av            //B站弹幕id 
id            //视频id 
sid           //集数id 
pic           //视频封面 
title         //视频标题 
next          //下一集链接 
user          //用户名 
group         //用户组

Bilibili 视频

<bloghao-bili bvid="" width="100%" height="600"></bloghao-bili>
或
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>

样式美化合集

时间线

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

进度条

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

彩色虚线

<span class="joe_dotted"></span>
或
<joe-dotted></joe-dotted>
或
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>

跑马灯

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

提示元素

<span class="joe_message success|info|warning|error">
		<span class="joe_message__icon"></span>
		<span class="joe_message__content">正确|普通|警告|错误</span>
</span>
或者
<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>

功能化合集

评论后可见

<joe-hide></joe-hide>

跳转链接提示弹窗

<div class="container"><span class="hover-me"><a href="https://xgrsir.com">Hover me !</a></span><div class="tooltip"><p>是否跳转？🖱️</p></div></div>

引用或者标注内容

<div class="joe_callout" style="border-left-color: #f0ad4e">
	引用或者标注内容
</div>

PDF预览

<bloghao-pdf src="PDF链接" width="100%" height="600"></bloghao-pdf>

块级链接卡片

<hyperlink-card href="https://www.halo.run" target="_blank" theme="regular"></hyperlink-card>

行内链接卡片

<hyperlink-inline-card href="https://www.halo.run" target="_blank"></hyperlink-inline-card>