本文主要是记录主题对应的特殊标签的使用。

副标题

这是副标题
<mew-subtitle>这是副标题</mew-subtitle>

音频播放器

mew-music 标签支持网易云单曲、网易云歌单和音乐链接三种方式播放音乐。

网易云单曲

<mew-music song="29572089"></mew-music>

字段

是否可空

说明

song

否

网易云音乐id

网易云歌单

<mew-music playlist="7355014621"></mew-music>

特有参数

默认值

说明

playlist

(必选）填写网易云音乐歌单id

order

list

音频循环顺序，可选值：list（ 列表循环），random（随机）

fold

false

列表默认折叠，可选值：false/true

自定义单曲

<mew-music url="http://music.163.com/song/media/outer/url?id=29572089.mp3" name="眉间雪"></mew-music>

特有参数

默认值

说明

url

（必选）音频资源链接

name

音乐

音频名称

artist

未知歌手

歌手名称

cover

封面图地址

lrc

歌词地址

Bilibili视频

<mew-bilibili bvid="BV1t3411e7x9" width="100%"></mew-bilibili>

特有参数

默认值

说明

bvid

(必选）视频id

width

100%

视频播放器宽度占比

标签页

html内容 java内容 
<mew-tabs>
<mew-tab-page title="html">
html内容
</mew-tab-page>
<mew-tab-page title="java">
java内容
</mew-tab-page>
</mew-tabs>

参数

默认值

说明

title

默认标签

标签页名称

active

默认选中第一页

默认选中的标签 true/false

网盘链接

从360安全云盘分享文件 
<mew-cloud type="default" url=""></mew-cloud>

<mew-cloud type="360" url="" password="82kD">从360安全云盘分享文件</mew-cloud>

<mew-cloud type="bd" url="" password="gGs2"></mew-cloud>

<mew-cloud type="wy" url=""></mew-cloud>

<mew-cloud type="ali" url=""></mew-cloud>

<mew-cloud type="github" url=""></mew-cloud>

<mew-cloud type="gitee" url=""></mew-cloud>

<mew-cloud type="lz" url=""></mew-cloud>

参数

默认值

说明

type

类型

网盘类型：default 网络来源，360 360云盘，bd 百度网盘，wy 微云，ali 阿里云盘，github Github仓库，gitee Gitee仓库

url

地址

password

密码

进度条

<mew-progress value="80%" color="#5bb854"></mew-progress>

参数

默认值

说明

value

50%

进度 0%-100%

color

var(--theme)

颜色

面板

面板内容 
<mew-panel title="面板标题">
面板内容
</mew-panel>

参数

默认值

说明

title

面板标题

color

var(--theme)

面板颜色

消息提示

这是一条消息 这是一条消息 这是一条消息 这是一条消息
<mew-message type="error">这是一条消息</mew-message>

<mew-message type="success">这是一条消息</mew-message>

<mew-message type="warning">这是一条消息</mew-message>

<mew-message type="info">这是一条消息</mew-message>

参数

默认值

说明

type

info

消息提示类型

信封分割线

<mew-hr></mew-hr>

参数

默认值

说明

startColor

#01d0ff

分割线开始第一个块的颜色

endColor

#fc3e85

第二个块的颜色

时间线

平凡的一星期 工作日，开始当社畜 周末，睡了整整一天 又是平凡的一星期 工作日，开始当社畜 周末，睡了整整一天 
<mew-timeline>
    <mew-timeline-title>平凡的一星期</mew-timeline-title>
    <mew-timeline-item type="warning" title="2022-05-23">工作日，开始当社畜</mew-timeline-item>
    <mew-timeline-item title="2022-05-28">周末，睡了整整一天</mew-timeline-item>
    <mew-timeline-title type="info">又是平凡的一星期</mew-timeline-title>
    <mew-timeline-item type="warning" title="2022-05-23">工作日，开始当社畜</mew-timeline-item>
    <mew-timeline-item title="2022-05-28">周末，睡了整整一天</mew-timeline-item>
</mew-timeline>

mew-timeline 时间线标签内包含两个子标签，mew-timeline-title为时间线的大标题，mew-timeline-item 为时间线的内容。

参数

默认值

说明

type

时间线的类型，支持 success、info、warning 和 error

title

内容标题，仅 mew-timeline-item 标签支持

按钮

打开博客 你好
<mew-btn icon="ri-mail-send-line" href="https://blog.mzli.club">打开博客</mew-btn> 

<mew-btn icon="ri-mail-send-line" onclick="javaScript:alert('你好呀');">你好</mew-btn>

参数

默认值

说明

color

var(--theme)

按钮颜色

href

按钮跳转地址

target

_blank

链接跳转方式，与 a 标签相同

icon

按钮的图标，支持 Remix Icon 的图标

引言

你想要的，我都有！ 投资未来的人，是忠于现实的人。
<mew-quote avatar="https://spider.mzli.club/favicon.png" href="https://spider.mzli.club" name="爬虫小子">你想要的，我都有！</mew-quote>
<mew-quote>投资未来的人，是忠于现实的人。</mew-quote>

参数

默认值

说明

avatar

可空

引言头像

href

引言跳转地址

name

引言作者名称

链接

外部链接引用

爬虫小子-你想要的我都有
<mew-link img="https://spider.mzli.club/favicon.png" title="爬虫小子" href="https://spider.mzli.club">爬虫小子-你想要的我都有</mew-link>

内部链接引用

<mew-link id="1706004786444"></mew-link>

<mew-link slug="about" type="sheet"></mew-link>

在halo2中失效

参数

默认值

说明

img

封面图

title

网站标题

href

网站地址

type

post

post / sheet，指定类型为文章或自定义界面，仅在填写了 id 或 slug 时有效。

id

文章-自定义页面的id

slug

文章-自定义页面的别名

视频播放器

<mew-video loop width="80%" src="https://img.mzli.club/blog/halo/2024/1/23/2024-01-23T17:04:04.248400047-fqcirmmd.mp4"></mew-video>

参数

默认值

说明

src

（必选）视频链接

width

100%

视频宽度百分比

type

视频类型

autoplay

false

自动播放

controls

true

显示控制按钮

loop

false

循环播放

muted

false

静音播放

preload

false

视频预加载

poster

false

视频加载占位图

画廊

图1 图2 图3 
<mew-photos>
  <img src="https://img.mzli.club/blog/halo/2024/1/6/2024-01-06T17:18:00.404096033-zuwtnrzt.jpg" alt="图1"/>
  <img src="https://img.mzli.club/blog/halo/2024/1/6/2024-01-06T17:18:00.404096033-zuwtnrzt.jpg" alt="图2"/>
</mew-photos>

参数

默认值

说明

captions

false

鼠标停留在图片上时是否显示图片标题

margins

4

图片间距（px）

样式隔离列表项

  • 我是样式隔离的列表项
  • 我是样式隔离的列表项
<mew-raw>
  <ul>
    <li>我是样式隔离的列表项</li>
    <li>我是样式隔离的列表项</li>
  </ul>
</mew-raw>

评论后可见

  • 我是评论后可见的列表项
  • 我是评论后可见的列表项
我是评论后可见的内容 
<mew-hide>
  <ul>
    <li>我是评论后可见的列表项</li>
    <li>我是评论后可见的列表项</li>
  </ul>
  
我是评论后可见的内容
  
</mew-hide>