Halo-Joe博客主题样式指南

本文系统呈现了 halo-theme-joe 2.0 主题的全量样式规范，旨在为内容创作者提供直观的视觉参考。需要特别说明的是，部分样式可能会随着版本迭代发生调整，关键更新将通过语义化版本号进行标识，建议开发者通过 官方文档 或 GitHub Releases 获取最新动态。实际应用时请以当前生产环境的渲染效果为准，同时建议定期同步主题更新以确保样式一致性。

消息提示

<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-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-music id="1303046498"></joe-music>

网易云歌单

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

居中标题

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

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>

B站视频

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

视频播放器

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

时间线

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

Tabs

<joe-tabs>
  <div class="_tpl">
    {tabs-pane 第一个}单身狗的故事{/tabs-pane}
    {tabs-pane 第二个}小说家的故事{/tabs-pane}
  </div>
</joe-tabs>

彩色虚线

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

进度条

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

跑马灯

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

网盘按钮

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