我觉得我还是要说明一下,这个主题的作者是:望仔
博客链接:https://blog.nineya.com/
本文转载自:https://blog.nineya.com/archives/91.html
本博客转载是因为,本博客用的是他的主题。我比较笨点,记不住这些设置,所以备份一份,省的每次都要去主题作者博客看使用说明书,主要是我网络垃圾,经常无法打开主题博主的博客。
一、基础内容
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 任务列表
这个暂无效果,新版好像没有
2.5 表格
列1 | 列2 | 列3 |
---|---|---|
内容 | 内容 | 内容 |
内容 | 内容 | 内容 |
内容 | 内容 | 内容 |
2.6 行内代码
使用 Dream主题
渲染博客。
<code>Dream主题</code>
2.7 代码块
/** * 运行程序 */ java -jar dream.jar
2.8 数学公式
3x−1+(1+x)2\sqrt{3x-1}+(1+x)^2
$\sqrt{3x-1}+(1+x)^2$
2.9 mermaid 图表
样式无,不知道怎么弄
TypeError: Cannot read properties of undefined (reading 'v')
三、自定义标签
3.1 副标题
这是副标题
<mew-subtitle>这是副标题</subtitle>
3.2 音频播放器
mew-music
标签支持网易云单曲、网易云歌单和音乐链接三种方式播放音乐。
网易云单曲:
特有参数 | 说明 |
---|---|
song | 必选)填写网易云音乐id |
网易云歌单:
特有参数 | 默认值 | 说明 |
---|---|---|
playlist | (必选)填写网易云音乐歌单id | |
order | list | 音频循环顺序,可选值:list ( 列表循环),random (随机) |
fold | false | 列表默认折叠,可选值:false/true |
自定义单曲:
特有参数 | 默认值 | 说明 |
---|---|---|
url | (必选)音频资源链接 | |
name | 音乐 | 音频名称 |
artist | 未知歌手 | 音频艺术家 |
cover | 音频封面 | |
lrc | 音频歌词LRC文件链接 |
以上为三种音频资源的配置方法,除此以外还包含一些公共的参数:
公共参数 | 默认值 | 说明 |
---|---|---|
theme | Dream 主题色 | 播放器的主题色 |
loop | all | 音频循环播放,可选值:all (循环全部),one (单曲循环),none (不循环) |
autoplay | false | 音频自动播放,可能有些浏览器不支持 |
3.3 bilibili视频
<mew-bilibili bvid="BV1WJ411z7qc" 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 网盘链接
<mew-cloud type="default" url=""></mew-cloud> <mew-cloud type="360" url="" password="82kD"></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 消息
[blockquote2 name=’洛维花’]这是一条消息[/tip]
[blockquote2 name=’洛维花’]这是一条消息[/tip]
[blockquote2 name=’洛维花’]这是一条消息[/tip]
[blockquote2 name=’洛维花’]这是一条消息[/tip]
<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://luoweihua.cn/">打开博客</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 引言
[blockquote1 name=’代码疯子’]投资未来的人,是忠于现实的人。[/tip]
[blockquote2 name=’引言’]投资未来的人,是忠于现实的人。[/tip]
<mew-quote avatar="https://luoweihua.cn/favicon.png" href="https://luoweihua.cn/" name="代码疯子">投资未来的人,是忠于现实的人。</mew-quote> <mew-quote>投资未来的人,是忠于现实的人。</mew-quote>
参数 | 默认值 | 说明 |
---|---|---|
avatar | 无 | 引言作者头像 |
href | 无 | 点击引言头像或作者名称的跳转链接 |
name | 无 | 引言作者名称 |
2.13 链接
<mew-link img="/upload/2022/02/favicon.ico" title="玖涯博客" href="https://luoweihua.cn/">良心博客网站</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/10/28_1663747511.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://tva2.sinaimg.cn/large/0072Vf1pgy1foxloka0r4j31hc0u0dzw.jpg" alt="图1"/> <img src="https://tva1.sinaimg.cn/large/0072Vf1pgy1fodqnyvneij31hc0u01kx.jpg" alt="图2"/> <img src="https://tva3.sinaimg.cn/large/a15b4afegy1fmvjlgdxxgj21hc0u04qp.jpg" alt="图3"/> <img src="https://tva4.sinaimg.cn/large/0072Vf1pgy1foxkd5scpnj31kw0w0h93.jpg" alt="图4"/> <img src="https://tva1.sinaimg.cn/large/0072Vf1pgy1foxkc2jnyej31hc0u04g2.jpg" alt="图5"/> <img src="https://tva4.sinaimg.cn/large/0072Vf1pgy1foxkix1n7kj31kw0w0tzl.jpg" alt="图6"/> <img src="https://tva1.sinaimg.cn/large/0072Vf1pgy1foxkifyvznj31hc0u0e1h.jpg" alt="图7"/> </mew-photos>
图片不可用 ! [ 」( )
的方式插入,因为在渲染之后会包含 < br/>
和 <p〉
相关的标签。
参数 | 默认值 | 说明 |
---|---|---|
captions | false | 鼠标停留在图片上时是否显示图片标题 |
margins | 4 | 图片间距(px) |
2.16 样式隔离
- 我是样式隔离的列表项
- 我是样式隔离的列表项
<mew-raw> <ul> <li>我是样式隔离的列表项</li> <li>我是样式隔离的列表项</li> </ul> </mew-raw>