原文链接：https://blog.nineya.com/archives/91.html

本主题基于玖涯的Dream主题，除了部分功能需要halo本身的原生支持外，大多数主题功能均可在该主题上实现和使用。

使用方式：

本文档将持续不断地进行完善与优化。

1、katex公式，主题端已移除，需要插件支持

行内公式：\sqrt{3x-1}+(1+x)^2

单行公式：

\sqrt{3x-1}+(1+x)^2

需要启用KaTeX插件

  • 行内公式 CSS 选择器：[math-inline]

  • 块级公式 CSS 选择器：[math-display]

  • 确保插件配置包含默认属性选择器，用于适应pjax下的渲染。

2、密码文

猜猜这是什么：Dream主题
猜猜这是什么：<span class="pwd">Dream主题</span>

3、副标题

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

4、 音频播放器

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

网易云单曲：

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

特有参数

说明

song

（必选）填写网易云音乐id

网易云歌单：

<mew-music playlist="8624929948"></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

音频歌词LRC文件链接

以上为三种音频资源的配置方法，除此以外还包含一些公共的参数：

特有参数

默认值

说明

theme

Dream 主题色

播放器的主题色

loop

all

音频循环播放，可选值：all（循环全部），one（单曲循环），none（不循环）

autoplay

false

音频自动播放，可能有些浏览器不支持

5、bilibili视频

<mew-bilibili bvid="BV1LhfGY7EQH" width="80%"></mew-bilibili>

特有参数

默认值

说明

bvid

100%

（必选）视频的bvid

width

视频模块宽度

6、标签页

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

7、网盘链接

从360安全云盘分享文件

<p><mew-cloud type="default" url=""></mew-cloud></p>

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

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

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

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

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

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

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

特有参数

默认值

说明

type

default

网盘类型：default: 网络来源, 360: 360云盘, 115: 115网盘, 123: 123云盘, kk: 夸克网盘, xl: 迅雷云盘, onedrive: OneDrive, yd: 中国移动云盘, ty: 天翼云盘, lt: 联通云盘, uc: UC网盘, pan: 网络云盘, oss: 对象存储, bd: 百度网盘, wy: 微云, ali: 阿里云盘, github: Github仓库, gitee: Gitee仓库, gitlab: Gitlab仓库, gitea: Gitea仓库, git: Git仓库, lz: 蓝奏云网盘

url

下载链接

password

网盘文件下载提取码

8、进度条

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

特有参数

默认值

说明

value

50%

进度，最高为100%

color

var(--theme)

进度条颜色

9、面板

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

特有参数

默认值

说明

title

面板标题

color

var(--theme)

面板颜色

10、消息

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

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

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

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

11、信封分割线

<mew-hr></mew-hr>

特有参数

默认值

说明

startColor

#01d0ff

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

endColor

#fc3e85

分割线第二个块的颜色

12、时间线

平凡的一星期 工作日，开始当社畜 周末，睡了整整一天 又是平凡的一星期 工作日，开始当社畜 周末，睡了整整一天
<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 标签支持

13、按钮

打开博客 你好
<mew-btn icon="ri-mail-send-line" href="https://www.hcjike.com">打开博客</mew-btn> 

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

特有参数

默认值

说

color

var(--theme)

按钮颜色

href

按钮跳转链接

target

_blank

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

icon

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

14、引言

宏尘极客是一个专注于技术知识和NAS笔记等内容分享的综合性网站。宏尘极客是一个专注于技术知识和NAS笔记等内容分享的综合性网站。
<mew-quote avatar="https://www.hcjike.com/favicon.ico" href="https://www.hcjike.com/" name="宏尘极客">宏尘极客是一个专注于技术知识和NAS笔记等内容分享的综合性网站。</mew-quote>
<mew-quote>宏尘极客是一个专注于技术知识和NAS笔记等内容分享的综合性网站。</mew-quote>

特有参数

默认值

说

avatar

引言作者头像

href

点击引言头像或作者名称的跳转链接

name

引言作者名称

15、画廊

图1图2图3图4图5图6
<mew-photos>
  <img src="https://www.hcjike.com/upload/gallery/009660c74a9ce19dcf5263ee8d96b35c.webp" alt="图1"/>
  <img src="https://www.hcjike.com/upload/gallery/7672fc75a8e0fc47785c7bc463a82bda.webp" alt="图2"/>
  <img src="https://www.hcjike.com/upload/gallery/1e41c40aee36e3cd86e08365c767a242.webp" alt="图3"/>
  <img src="https://www.hcjike.com/upload/gallery/216b8727d9beb6d40f8e21a9477df78d.webp" alt="图4"/>
  <img src="https://www.hcjike.com/upload/gallery/e757d8e9071ebe1bf09d118b958153b6.webp" alt="图5"/>
  <img src="https://www.hcjike.com/upload/gallery/c813d15299893d8ac288d47a8650431a.webp" alt="图6"/>
</mew-photos>

图片不可用 ![]() 的方式插入，因为在渲染之后会包含 <br/> 和 <p> 相关的标签。

特有参数

默认值

说

captions

false

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

margins

4

图片间距（px）

16、样式隔离

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