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>

二、内容块

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

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

2.8 数学公式

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

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

2.9 mermaid 图表

TypeError: Cannot read properties of undefined (reading 'v')

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

三、自定义标签

3.1 副标题

这是副标题

<mew-subtitle>这是副标题</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)	面板颜色

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

2.9 信封分割线

<mew-hr></mew-hr>

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

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

2.11 按钮

打开博客

你好

<mew-btn icon="fa-history" href="https://blog.nineya.com">打开博客</mew-btn> 

<mew-btn icon="fa-history" onclick="javaScript:alert('你好呀');">你好</mew-btn>

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

2.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	无	引言作者名称

2.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	无	文章或自定义页面的别名

2.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	无	视频加载占位图

2.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）

2.16 样式隔离

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

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

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

博客 Dream