侧边栏壁纸
  • 累计撰写 21 篇文章
  • 累计创建 11 个标签
  • 累计收到 9 条评论

Joe 主题自定义标签不完全指北

好巧
2023-04-30 / 0 评论 / 0 点赞 / 116 阅读 / 10570 字
温馨提示:
本文最后更新于 2023-09-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

前言

默认编辑器使用自定义标签需配合 Tool-Bench(1.0.4版本) 插件一起使用才会生效

Tool-Bench 1.0.4版本以下使用自定义标签只有 ByteMD 编辑器才会生效

标注

<joe-callout color="#f0ad4e" content="标注内容"></joe-callout>

<joe-callout color="#f0ad4e" content="标注内容"></joe-callout>

居中标题

<joe-title title="Hello JavaScript"></joe-title>

<joe-title title="Hello JavaScript"></joe-title>

多彩按钮

<joe-btn color="#50bfff" content="多彩按钮"></joe-btn>

<joe-btn color="#50bfff" content="多彩按钮"></joe-btn>

<joe-btn color="#409eff" content="圆角按钮" radius="6px"></joe-btn>

<joe-btn color="#409eff" content="圆角按钮" radius="6px"></joe-btn>

<joe-btn icon="joe-font joe-icon-yumao" color="#50bfff" content="带图标按钮"></joe-btn>

<joe-btn icon="joe-font joe-icon-yumao" color="#50bfff" content="带图标按钮"></joe-btn>

更多icon图标类名请查看:joe iconfont

<joe-btn color="#409eff" content="带链接按钮" href="#"></joe-btn>

<joe-btn color="#409eff" content="带链接按钮" href="#"></joe-btn>

标签按钮

<joe-note icon="joe-font joe-icon-tag" type="secondary" content="标签按钮" href="#" ></joe-note>

<joe-note icon="joe-font joe-icon-tag" type="info" content="标签按钮" href="#" ></joe-note>

<joe-note icon="joe-font joe-icon-tag" type="success" content="标签按钮" href="#" ></joe-note>

<joe-note icon="joe-font joe-icon-tag" type="warning" content="标签按钮" href="#" ></joe-note>

<joe-note icon="joe-font joe-icon-tag" type="error" content="标签按钮" href="#" ></joe-note>

<joe-note icon="joe-font joe-icon-tag" type="secondary" content="标签按钮" href="#"></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="info" content="标签按钮" href="#"></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="success" content="标签按钮" href="#"></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="warning" content="标签按钮" href="#"></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="error" content="标签按钮" href="#"></joe-note>

消息提示

<joe-message type="info" content="信息"></joe-message>

<joe-message type="success" content="成功"></joe-message>

<joe-message type="warning" content="警告"></joe-message>

<joe-message type="error" content="错误"></joe-message>

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

提示方框

<joe-alert type="info" content="信息"></joe-alert>

<joe-alert type="success" content="成功"></joe-alert>

<joe-alert type="warning" content="警告"></joe-alert>

<joe-alert type="error" content="错误"></joe-alert>

<joe-alert type="info" content="信息"></joe-alert>
<joe-alert type="success" content="成功"></joe-alert>
<joe-alert type="warning" content="警告"></joe-alert>
<joe-alert type="error" content="错误"></joe-alert>

彩色虚线

<joe-dotted startcolor="#409eff" endcolor="#4cd327"></joe-dotted>

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

进度条

<joe-progress percentage="50%" color="#409eff"></joe-progress>

<joe-progress percentage="50%" color="#2bde3f"></joe-progress>

卡片

<joe-card-default width="100%" title="卡片标题" content="<p class='_temp'>卡片内容</p>"></joe-card-default>

<joe-card-default width="100%" title="卡片标题"></joe-card-default>

<joe-card-describe title="卡片标题" content="<p class='_temp'>卡片内容</p>"></joe-card-describe>

<joe-card-describe title="卡片标题" content="<p class='_temp'卡片内容</p>"></joe-card-describe>

网盘按钮

<joe-cloud type="default" title="" url="" password=""></joe-cloud>

<joe-cloud type="360" title="" url="" password=""></joe-cloud>

<joe-cloud type="bd" title="" url="" password="bn6f"></joe-cloud>

<joe-cloud type="ty" title="" url="" password=""></joe-cloud>

<joe-cloud type="ct" title="" url="" password=""></joe-cloud>

<joe-cloud type="wy" title="" url="" password=""></joe-cloud>

<joe-cloud type="github" title="" url="" password=""></joe-cloud>

<joe-cloud type="gitee" title="" url="" password=""></joe-cloud>

<joe-cloud type="lz" title="" url="" password=""></joe-cloud>

<joe-cloud type="default" title="" url="" password=""></joe-cloud>
<joe-cloud type="360" title="" url="" password=""></joe-cloud>
<joe-cloud type="bd" title="" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" title="" url="" password=""></joe-cloud>
<joe-cloud type="ct" title="" url="" password=""></joe-cloud>
<joe-cloud type="wy" title="" url="" password=""></joe-cloud>
<joe-cloud type="github" title="" url="" password=""></joe-cloud>
<joe-cloud type="gitee" title="" url="" password=""></joe-cloud>
<joe-cloud type="lz" title="" url="" password=""></joe-cloud>

音频

<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="#1989fa" cover="https://bbchin.com/upload/2022/04/cgts.png" autoplay></joe-mp3>

<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="#1989fa" cover="https://bbchin.com/upload/2022/04/cgts.png" autoplay></joe-mp3>

网易云单曲

<joe-music id="188432" color="#1989fa" autoplay="false"></joe-music>

<joe-music id="188432" color="#1989fa" autoplay="false"></joe-music>

网易云歌单

<joe-music-list id="737535139" color="#1989fa" autoplay="false"></joe-music-list>

<joe-music-list id="737535139" color="#1989fa" autoplay="false"></joe-music-list>

视频

<joe-dplayer width="100%" height="500px" src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4" ></joe-dplyer>

<joe-dplayer width="100%" height="500px" src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4" ></joe-dplyer>

哔哩哔哩视频

<joe-bilibili width="100%" height="500px" bvid="BV12h411k7vr"></joe-bilibili>

<joe-bilibili width="100%" height="500px" bvid="BV12h411k7vr"></joe-bilibili>

Tabs(不支持默认、StackEdit编辑器,支持ByteMD编辑器)

<joe-tabs>
  <div class="_temp">
    {tabs-pane Tab 1}Content of Tab Pane 1{/tabs-pane}
    {tabs-pane Tab 2}Content of Tab Pane 2{/tabs-pane}
  </div>
</joe-tabs>

时间线(不支持默认、StackEdit编辑器,支持ByteMD编辑器)

<joe-timeline>
 <div class="_temp">
   {timeline-item color="#1d72f3"}2023-07-07{/timeline-item}
   {timeline-item color="#2bde3f"}2023-08-08{/timeline-item}
   {timeline-item color="#ffc007"}2023-09-09{/timeline-item}
 </div>
</joe-timeline>

0

评论区