Dream 主题预览

一、基础内容

1.1 图片

<img src="https://res.7793.top/assets/img/pc/image361.jpg" alt="这是一张图片">

1.2 段落缩进

Dream主题

<p class="indent">Dream主题</p>

1.3 加粗

使用 Dream主题 渲染博客。

使用 <strong>Dream主题</strong> 渲染博客。

1.4 斜体

Dream主题

<em>Dream主题</em>

1.5 下划线

使用Dream主题渲染博客。

使用<u>Dream主题</u>渲染博客。

1.6 中划线

Dream主题 渲染博客。

<del>Dream主题</del> 渲染博客。

1.7 链接

Dream主题 渲染博客。

<a href="Dream%E4%B8%BB%E9%A2%98">Dream主题</a> 渲染博客。

1.8 密码文

猜猜这是什么：Dream主题

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

1.9 短笺

Dream主题...Dream主题...Dream主题...Dream主题...Dream主题...

<p class="note">Dream主题...Dream主题...Dream主题...Dream主题...Dream主题...</p>

1.10 Emoji 表情

主题配置了表情包，在编辑器中可输入 : （分号前面有空格）呼起表情包选择下拉框。

Halo-Plus 1.1.4 & Dream 2.3.1 起支持

:haha: :huaji: :nu:

二、内容块

2.1 引用

使用 Dream主题 渲染博客。

使用 Dream主题 渲染博客。
使用 Dream主题 渲染博客。

<blockquote>
使用 <del>Dream主题</del> 渲染博客。
<blockquote>
使用 <del>Dream主题</del> 渲染博客。<br>
使用 <del>Dream主题</del> 渲染博客。
</blockquote>
</blockquote>

2.2 有序列表

1. 使用 Dream主题 渲染博客。
2. 使用 Dream主题 渲染博客。
3. 使用 Dream主题 渲染博客。

<ol>
<li>使用 <strong>Dream主题</strong> 渲染博客。</li>
<li>使用 <em>Dream主题</em> 渲染博客。</li>
<li>使用 <u>Dream主题</u> 渲染博客。</li>
</ol>

2.3 无序列表

• 使用 Dream主题 渲染博客。
• 使用 Dream主题 渲染博客。
• 使用 Dream主题 渲染博客。

<ul>
<li>使用 <u>Dream主题</u> 渲染博客。</li>
<li>使用 <u>Dream主题</u> 渲染博客。</li>
<li>使用 <u>Dream主题</u> 渲染博客。</li>
</ui>

2.4 任务列表

• 使用 Dream主题 渲染博客。
• 使用 Dream主题 渲染博客。

<ul>
<li class="vditor-task"><input disabled="" type="checkbox"> 使用 <u>Dream主题</u> 渲染博客。</li>
<li class="vditor-task vditor-task--done"><input checked="" disabled="" type="checkbox"> 使用 <u>Dream主题</u> 渲染博客。</li>
</ul>

2.5 表格

列1	列2	列3
内容	内容	内容
内容	内容	内容
内容	内容	内容

| 列1 | 列2 | 列3 |
| :--: | :--: | :--: |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |

<table>
<thead>
<tr>
<th align="center">列1</th>
<th align="center">列2</th>
<th align="center">列3</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>
<tr>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>
<tr>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>
</tbody>
</table>

2.6 行内代码

使用 Dream主题 渲染博客。

使用 <code>Dream主题</code> 渲染博客。

2.7 代码块

普通代码块：

/**
 * 运行程序
 */
java -jar dream.jar

自定义标题代码块：

\\\bash|自定义标题
/**
 * 运行程序
 */
java -jar dream.jar
\\\

自定义标题并默认折叠代码块：

\\\bash<自定义标题
/**
 * 运行程序
 */
java -jar dream.jar
\\\

自定义标题并通过 |+ 选中指定行代码块：

\\\bash|自定义标题:select
/**
 * 运行程序
 */
|+ |+ java -jar dream.jar
\\\

2.8 数学公式

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

单行公式：

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

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

单行公式：

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

2.9 mermaid 图表

graph TD;
  A-->B;
  A-->C;
  B-->D;
  E-->F;

2.10 PDF加载

<iframe
    src="https://res.7793.top/assets/pdf.js/web/viewer.html?file=https://7793.top/d/Google.pdf"
    height="560"
    width="100%"
    scrolling="no"
    frameborder="0"
    allowfullscreen="true"
    webkitallowfullscreen="true"
    mozallowfullscreen="true"
    oallowfullscreen="true"
    msallowfullscreen="true">
</iframe>

三、自定义标签

自定义标签和其他内容前后之前应该保留一个空行，否则在边距上可能会出现一些问题。

3.1 副标题

这是副标题

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

3.2 音频播放器

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="眉间雪(纯歌版)" artist="晴愔" cover="https://p3.music.126.net/cpoUinrExafBHL5Nv5iDHQ==/109951166361218466.jpg?param=90y90" lrc="https://res.7793.top/assets/api/meting/?server=netease&type=lrc&id=29572089"></mew-music>

特有参数	默认值	说明
url		（必选）音频资源链接
name	音乐	音频名称
artist	未知歌手	音频艺术家
cover		音频封面
lrc		音频歌词LRC文件链接

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

公共参数	默认值	说明
theme	Dream 主题色	播放器的主题色
loop	all	音频循环播放，可选值：all（循环全部），one（单曲循环），none（不循环）
autoplay	false	音频自动播放，可能有些浏览器不支持

3.3 bilibili视频

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

参数	默认值	说明
bvid	无	（必选）视频的bvid
width	100%	视频模块宽度

3.4 标签页

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

3.5 网盘链接

从Alist分享文件 从360安全云盘分享文件 从百度网盘分享文件 从微云分享文件 从阿里网盘分享文件 从Github仓库分享文件 从Gitee仓库分享文件 从蓝奏云分享文件

<mew-cloud type="default" url="">从Alist分享文件</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="">从Github仓库分享文件</mew-cloud>

<mew-cloud type="gitee" url="">从Gitee仓库分享文件</mew-cloud>

<mew-cloud type="lz" url="">从蓝奏云分享文件</mew-cloud>

参数	默认值	说明
type	default	网盘类型：default 网络来源，360 360云盘，bd 百度网盘，wy 微云，ali 阿里云盘，github Github仓库，gitee Gitee仓库
url	无	下载链接
password	无	网盘文件下载提取码

3.6 进度条

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

参数	默认值	说明
value	50%	进度，最高为100%
color	var(--theme)	进度条颜色

3.7 面板

面板内容

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

参数	默认值	说明
title	无	面板标题
color	var(--theme)	面板颜色

3.8 消息

这是一条消息

这是一条消息

这是一条消息

这是一条消息

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

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

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

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

3.9 信封分割线

<mew-hr></mew-hr>

参数	默认值	说明
startColor	#01d0ff	分割线开始第一个块的颜色
endColor	#fc3e85	分割线第二个块的颜色

3.10 时间线

平凡的一星期 工作日，开始当社畜 周末，睡了整整一天 又是平凡的一星期 工作日，开始当社畜 周末，睡了整整一天

<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 标签支持

3.11 按钮

打开博客 你好

<mew-btn icon="ri-mail-send-line" href="https://blog.7793.top">打开博客</mew-btn>
<mew-btn icon="ri-mail-send-line" onclick="javaScript:alert('你好呀');">你好</mew-btn>

参数	默认值	说明
color	var(--theme)	按钮颜色
href	无	按钮跳转链接
target	_blank	链接跳转方式，与 a 标签相同
icon	无	按钮的图标，支持 Remix Icon 的图标

3.12 引言

一条咸鱼。 一条咸鱼。

<mew-quote avatar="https://blog.7793.top/upload/2025/09/music.png" href="https://blog.7793.top/" name="TANGZIPの博客">一条咸鱼。</mew-quote>
<mew-quote>一条咸鱼。</mew-quote>

参数	默认值	说明
avatar	无	引言作者头像
href	无	点击引言头像或作者名称的跳转链接
name	无	引言作者名称

3.13 链接

一条咸鱼的网站

<mew-link img="https://blog.7793.top/upload/2025/09/music.png" title="TANGZIPの博客" href="https://blog.7793.top">一条咸鱼的网站</mew-link>

对于博客内部的文章和自定义页面可通过 id 和 slug （别名）定义文章的链接。

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

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

参数	默认值	说明
img	无	链接封面图
title	无	网页标题
href	无	网页地址
type	post	post / sheet，指定类型为文章或自定义界面，仅在填写了 id 或 slug 时有效。
id	无	文章或自定义页面的id
slug	无	文章或自定义页面的别名

3.14 视频播放器

<mew-video loop="" width="100%" src="https://res.7793.top/assets/mp4/或许时间从来不是回忆的对手…_哔哩哔哩_bilibili.mp4"></mew-video>

参数	默认值	说明
src	无	（必选）视频链接
width	100%	视频宽度百分比
type	无	视频类型
autoplay	false	自动播放
controls	true	显示控制按钮
loop	false	循环播放
muted	false	静音播放
preload	false	视频预加载
poster	无	视频加载占位图

3.15 画廊



<mew-photos>
<img src="https://res.7793.top/assets/img/pc/api.php?1" alt="图1">
<img src="https://res.7793.top/assets/img/pc/api.php?2" alt="图2">
<img src="https://res.7793.top/assets/img/pc/api.php?3" alt="图3">
<img src="https://res.7793.top/assets/img/pc/api.php?4" alt="图4">
<img src="https://res.7793.top/assets/img/pc/api.php?5" alt="图5">
<img src="https://res.7793.top/assets/img/pc/api.php?6" alt="图6">
<img src="https://res.7793.top/assets/img/pc/api.php?7" alt="图7">
</mew-photos>

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

参数	默认值	说明
captions	false	鼠标停留在图片上时是否显示图片标题
margins	4	图片间距（px）

3.16 样式隔离

• 我是样式隔离的列表项
• 我是样式隔离的列表项

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

3.17 评论后可见

• 我是评论后可见的列表项
• 我是评论后可见的列表项

我是评论后可见的内容

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