博客日常

Hola&Dream主题基础信息

内容来自《玖涯博客》，感谢大佬的教程！

一、基础内容

1.1图片

这是一张图片

1.2段落缩进

看看柠檬

<p class="indent">看看柠檬</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
行1	行2	行3
行1	行2	行3
行1	行2	行3

2.6行内代码

使用Dream主题渲染博客。

2.7代码块

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

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

三、自定义标签

3.1副标题

这是副标题

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

3.2音频播放器

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

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

特有参数	说明
song	(必选)填写网易云音乐id

网易云歌单：

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

特有参数	默认值	说明
playlist		(必选)填写网易云音乐歌单id
order	list	音频循环顺序，可选值：`list`（列表循环），`random`（随机）
fold	false	列表默认折叠，可选值：false/true

自定义单曲：

<mew-music url="http://music.163.com/song/media/outer/url?id=1371939273.mp3" name="亲爱的旅人啊"></mew-music>

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

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

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

3.3bilibili视频

<mew-bilibili bvid="BV1BM411C7mE" 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	默认选中的第一页	默认被选中的标签页，可选值：truefalse

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`微云,`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="fa-history" href="https://www.baidu.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` 的图标

3.12引言

一个会开发搞测试兼顾产品经理的创业公司BOSS。
山高人为峰。

<mew-quote avatar="/upload/2022/11/live2d%20%281%29.png" href="https://www.baidu.com" name="LemonWorld">一个会开发搞测试兼顾产品经理的创业公司BOSS。</mew-quote>
<mew-quote>山高人为峰。</mew-quote>

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

3.13链接

良心博客网站

<mew-link img="/upload/2022/11/live2d%20%281%29.png" title="柠檬的小站" href="https://www.baidu.com">良心博客网站</mew-link>

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

<mew-link id="01"></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/12/dpv01.mp4"></mew-video>

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

3.15画廊

<mew-photos>
 <img src="/upload/2022/12/bgabout.png" alt="图1"/>
 <img src="/upload/2022/12/bglinks.jpg" alt="图2"/>
</mew-photos>

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

3.16样式隔离

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

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

end

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

教程

Hola&Dream主题基础信息

https://www.0xlemon.com/archives/01

作者

0xLemon

发布于

2022-11-20

更新于

2023-10-17

许可协议

CC BY 4.0

Hola&Dream主题基础信息

一、基础内容

1.1图片

1.2段落缩进

1.3加粗

1.4斜体

1.5下划线

1.6中划线

1.7链接

1.8密码文

二、内容块

2.1引用

2.2有序列表

2.3无序列表

2.4任务列表

2.5表格

2.6行内代码

2.7代码块

三、自定义标签

3.1副标题

3.2音频播放器

3.3bilibili视频

3.4标签页

3.5网盘链接

3.6进度条

3.7面板

3.8消息

3.9信封分割线

3.10时间线

3.11按钮

3.12引言

3.13链接

3.14视频播放器

3.15画廊

3.16样式隔离

end

作者

发布于

更新于

许可协议

评论