我的项目

Dream 主题预览

一、基础内容

1.1 图片

这是一张图片

1.2 段落缩进

Dream主题

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

1.3 加粗

使用 Dream主题 渲染博客。

1.4 斜体

使用 Dream主题 渲染博客。

1.5 下划线

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

1.6 中划线

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

1.7 链接

使用 Dream主题渲染博客。

1.8 密码文

猜猜这是什么：Dream主题

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

1.9 短笺

Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题Dream主题

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

1.10 Emoji 表情

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

Halo-Plus 1.1.4 & Dream 2.3.1 起支持

:haha: :huaji: :nu:

二、内容块

2.1 引用

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

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

2.2 有序列表

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

2.3 无序列表

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

2.4 任务列表

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

2.5 表格

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

2.6 行内代码

使用 Dream主题 渲染博客。

2.7 代码块

普通代码块：

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

自定义标题代码块：

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

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

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

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

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

2.8 数学公式

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

单行公式：

3 x - 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;

三、自定义标签

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

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="眉间雪"></mew-music>

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

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

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

3.3 bilibili视频

<mew-bilibili bvid="BV1t3411e7x9" width="80%"></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 网盘链接

从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	网盘类型：`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.nineya.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` 的图标

3.12 引言

投资未来的人，是忠于现实的人。

<mew-quote avatar="https://blog.nineya.com/favicon.png" href="https://blog.nineya.com/" name="玖涯博客">投资未来的人，是忠于现实的人。</mew-quote>
<mew-quote>投资未来的人，是忠于现实的人。</mew-quote>

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

3.13 链接

良心博客网站

<mew-link img="https://blog.nineya.com/favicon.png" title="玖涯博客" href="https://blog.nineya.com">良心博客网站</mew-link>

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

<mew-link id="92"></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="80%" src="/upload/2022/06/share_b0aaa3aaae739f82844a6defaac40e71.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://blog.nineya.com/upload/2021/12/%E5%B0%81%E9%9D%A238-21cdb40e6a3b49129baef10c51442497.jpg" alt="图1"/>
  <img src="https://blog.nineya.com//upload/2021/06/image-a3c5b2da64784fb2992e91b7e3a5078f.png" alt="图2"/>
  <img src="https://blog.nineya.com/upload/2021/06/1608977961088-7b79bfeb868848698be261301be9a22a.jpeg" alt="图3"/>
  <img src="https://blog.nineya.com/upload/2021/06/12-fe28a2127c8d42038824ae66b6b01fdf.jpg" alt="图4"/>
  <img src="https://blog.nineya.com/upload/2022/04/screenshot-c3ff744830a540eba6abd64bc3650f97.png" alt="图5"/>
  <img src="https://blog.nineya.com/upload/2021/12/image-41c7033eaaa44804b78918ae6857d4fb.png" alt="图6"/>
  <img src="https://blog.nineya.com/upload/2021/06/封面23-2b5436ecf6c246ff9f6cfd77d271e5c7.jpg" 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>
  
我是评论后可见的内容
  
</mew-hide>

如果觉得文章对你有用，请随意赞赏

博客 Dream

Dream 主题预览

https://blog.nineya.com/archives/91.html

作者

殇雪

发布于

2022-04-15

更新于

2023-12-20

许可协议

CC BY 4.0