Version: Next
配置选项
文档迁移通知
📑 感谢大家的支持,当前文档已经不再保持更新。原因是,为了不影响访问速度,我将该文档托管在码云上。每次更新文档我都需要重新构建文档项目并手动更新码云 Pages 服务。这样效率是不够的,现在已经将将所有文档相关的内容托管到在线文档-语雀了。请务必访问新的文档,感谢理解! 点击查看
这页用来做什么?
发现无法进入博客了
👾 当您编辑 JavaScript 出现语法错误时,可能无法进入博客了。不用担心,随时都可以点击此处进入博客后台页面,重新配置。
基本配置
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
name | 全局主题 | String | 'reacg' | 参考-切换皮肤 |
color | 主题色 | String | 跟随皮肤 | 例如:"#ffb3cc" |
avatar | 头像图片链接 | String | 随机 | |
title | 网站标题 | String | 跟随博客园 | |
favicon | 网站图标链接 | String | 博客园 favicon | |
headerBackground | 头部背景,图片链接 | String | 无 |
theme: {
name: 'geek',
},
图片灯箱
- 60 FPS 过渡动画
- 兼容 markdown 和其他编辑器
- 点击图片查看,当您滚动页面图片会自动归位
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
imagebox: {
enable: true,
},
暗色模式
- 无任何依赖
- 全局覆盖
- 非线性切换动画
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
autoDark | 夜间自动切换暗色模式 | Boolean | false | true false |
autoLight | 日间自动切换亮色模式 | Boolean | false | true false |
darkMode: {
enable: true,
autoDark: false,
autoLight: false
},
个性签名
- 炫酷的打字机效果
- 支持输出 HTML 标签以及内联样式
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | false | true false |
contents | 内容 | Array String | [] |
signature: {
enable: true,
contents: [
"This theme is built with <b style='color:#ff6b81'>awescnb</b>.",
"<b>console.log(🍺);</b>",
],
},
二维码
- 不依赖第三方插件
- 支持添加描述信息
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | false | true false |
img | 二维码图片链接 | String | 无 | |
desc | 描述 | String | 无 |
qrcode: {
enable: false,
img: '',
desc: '',
},
背景
- 不依赖第三方插件
- 支持 repeat 背景图片
- 支持透明您的博客主体内容
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | false | true false |
value | 图片链接或颜色值 | String | 16 进制颜色值 | |
opacity | 内容的透明度 | String | 1 | 0-1 |
repeat | 背景图片是否重复 | Boolean | true | true false |
bodyBackground: {
enable: false,
value:
'https://guangzan.gitee.io/imagehost/awescnb/images/anime/22.jpg',
opacity: 0.85,
repeat: false,
},
图表
- 清新手绘风
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | false | true false |
pie | 饼图 |
charts: {
enable: true,
pie: {
title: 'My skills',
data: {
labels: ['JavaScript', 'css', 'Vue', 'React', 'wechat'],
values: [40, 30, 20, 10, 20],
},
},
},
首页列表图片
- 不依赖第三方插件
- 支持自定义图片列表
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | false | true false |
imgs | 图片 url 列表 | Array | 内置 |
indexListImg: {
enable: false,
imgs: [],
},
随笔头图
- 不依赖第三方插件
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
fixed | 视差滚动 | Boolean | false | true false |
imgs | 图片 url 列表 | Array | [] |
postTopimage: {
enable: true,
imgs: [],
},
原来的 position bottom api 已经启用使用 postBottomimage 选项代替
随笔尾图
- 不依赖第三方插件
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | false | true false |
img | 图片链接 | String | '' | |
height | 图片高度 | String | '200px' |
postBottomimage: {
enable: false,
img: '',
height: ''
},
通知
- 平滑的过渡动画
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | false | true false |
text | 文字 | Array | 默认下方两条 | ['自定义','自定义',...] |
notice:{
enable:true,
text:['🔯双击导航条锁屏','🙃快去自定义通知吧'],
},
锁屏
- 炫酷的打字效果
- 支持打印 HTML 标签以及内联样式
- 点击右上角 🔑 解锁
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
background | 背景图片 | String | 随机 | |
strings | 文字 | Array |
lock: {
enable: true,
background: '',
strings: [
'<i>Powered by</i> webpack.',
'& Theme in awescnb',
'快去自定义您的个性签名吧~',
],
},
<i>
是斜体【属于 HTML 标签】,&
是&【属于 HTML 转义字符】。
附参考文档:HTML 转义字符&HTML 标签
表情输入
- 多套图标
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
showRecents | 是否展示最近使用 | Boolean | false | true false |
showPreview | 是否预览表情 | Boolean | false | true false |
showSearch | 是否展示搜索框 | Boolean | false | true false |
recentsCount | 展示最近使用的个数 | Number | 20 |
emoji: {
enable: true,
showRecents: true,
recentsCount: 20,
showPreview: true,
showSearch: true,
},
模型
- 提供多套模型
- 支持自动模式(不推荐)
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
model | 模型 | String | 'haru-01' | 见下方 |
width | 宽度 | Number | 150 | |
height | 高度 | Number | 200 | |
position | 位置 | String | 'right' | 'left' 'right' |
gap | 边距 | String | 'default' | '100px ...' |
可选模型
- 'random' -> 随机(并不推荐)
- 'chitose'
- 'epsilon2_1'
- 'haru-01'
- 'haru-02'
- 'hijiki'
- 'tororo'
- 'ert_classic'
- 'vert_normal'
- 'vert_swimwear'
- 'ryoufuku'
- 'seifuku'
- 'shifuku'
- '小埋'
- '玉藻前'
- '伊芙加登'
- ....
live2d: {
enable: true,
page: 'all',
agent: 'pc',
model: 'haru-01',
width: 150,
height: 200,
position: 'left',
gap: 'default',
},
音乐播放器
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
autoplay | 自动播放 | Boolean | true | true false |
volume | 默认音量 | Number | 0.4 | |
lrc | 歌词 | Object | ||
audio | 音乐列表 | [object Object] | 内置 |
musicPlayer: {
enable: true,
autoplay: false,
lrc: {
enable: true, // 启用歌词
type: 1, // 歌词类型 1 -> 字符串 3 -> url
color: '#10ac84', // 颜色
},
audio: [
{
name: '404 not found',
artist: 'REOL',
url:
'http://music.163.com/song/media/outer/url?id=436016480.mp3',
cover:
'http://p2.music.126.net/cu1sEIDxXOJm5huZ3Wjs0Q==/18833534672880379.jpg?param=300x300',
lrc:
"[ti:404 not found][ar:REOL][al:Σ][by:菜籽酱][00:00.000] 作曲 : Reol[00:00.008] 作词 : Reol[00:00.25][00:01.69]fade away...do over again...[00:13.35][00:13.76]歌い始めの一文字目 いつも迷ってる[00:18.57]どうせとりとめのないことだけど[00:22.85]伝わらなきゃもっと意味がない[00:26.84][00:27.38]どうしたってこんなに複雑なのに[00:30.75]噛み砕いてやらなきゃ伝わらない[00:34.18]ほら結局歌詞なんかどうだっていい[00:37.64]僕の音楽なんかこの世になくたっていいんだよ[00:41.32][00:54.74]Everybody don't know why.[00:58.20]Everybody don't know much.[01:01.56]僕は気にしない 君は気付かない[01:04.99]何処にももういないいない[01:08.17][01:08.59]Everybody don't know why.[01:11.86]Everybody don't know much.[01:15.25]忘れていく 忘れられていく[01:18.61]We don't know,We don't know.[01:22.86][01:39.61]目の前 広がる現実世界がまた歪んだ[01:46.30]何度リセットしても[01:47.57]僕は僕以外の誰かには生まれ変われない[01:51.88]「そんなの知ってるよ」[01:53.41]気になるあの子の噂話も[01:56.52]シニカル標的は次の速報[01:59.75][02:00.22]麻痺しちゃってるこっからエスケープ[02:03.57]遠く遠くまで行けるよ[02:06.71][02:07.15]安定なんてない 不安定な世界[02:14.04]安定なんてない きっと明日には忘れるよ[02:20.52][02:22.35]fade away...do over again...[02:33.62][02:34.41]そうだ世界はどこかがいつも嘘くさい[02:37.51]綺麗事だけじゃ大事な人たちすら守れない[02:41.06]くだらない 僕らみんなどこか狂ってるみたい[02:44.48]本当のことなんか全部神様も知らない[02:48.56][03:03.39]Everybody don't know why.[03:06.80]Everybody don't know much.[03:10.17]僕は気にしない 君は気付かない[03:13.62]何処にももういないいない[03:17.02][03:17.46]Everybody don't know why.[03:20.49]Everybody don't know much.[03:23.88]忘れていく 忘れられていく[03:27.18]We don't know,We don't know.[03:29.83]",
},
],
},
tip
获取音乐链接以及歌词:https://music.liuzhijin.cn/
点击特效
- 炫酷的例子效果
- 自定义粒子颜色
- 波纹荡漾
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
auto | 进入页面自动产生点击特效 | Boolean | true | true false |
colors | 颜色列表 | Boolean | Array | ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'] |
click: {
enable: true,
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
size: 30,
maxCount: 50,
},
头部进度条
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
background | 背景色 | String | '#FFB3CC' | |
height | 高度 | String | '5px' |
topProgress: {
enable: false,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
GitHub
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
background | 图标颜色 | String | '#FFB3CC' | |
url | 链接 | String | "" |
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/guangzan/awescnb',
},
码云
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
background | 图标颜色 | String | '#C71D23' | |
url | 链接 | String | "" |
gitee: {
enable: true,
color: '#C71D23',
url: 'https://gitee.com/guangzan/awescnb',
},
随笔签名
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
enableLicense | 是否启用版权信息说明 | Boolean | true | true false |
link | 版权链接 | String | "" | |
content | 自定义内容 | Array | [] | |
licenseName | 许可协议名称 | String | '知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆' | |
licenseLink | 许可协议链接 | String | '' |
postSignature: {
enable: true,
enableLicense: true,
content: ['这是一条自定义内容', '这是一条自定义内容'],
licenseName: '',
licenseLink: '',
},
HTML 结构
<div id="post-signature">
<p>本文作者:DIVMonster</p>
<p>本文链接:https://www.cnblogs.com/guangzan/p/12886111.html</p>
<p>版权声明:本作品采用<a href="xxxx">知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议</a>进行许可。</p>
<p>这是一条自定义内容</p>
<p>这是一条自定义内容</p>
</div>
代码高亮
- 手写 css,体积很小
- 三个最受欢迎主题可选
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
dark | 深色模式下的代码高亮主题 | String | 'atomOneDark' | 见当前支持的代码高亮主题 |
light | 浅色模式下的代码高亮主题 | String | 'atomOneLight' | 见当前支持的代码高亮主题 |
当前支持的代码高亮:
- 'atomOneDark'
- 'atomOneLight'
- 'github'
- 'panda'
highLight: {
dark: 'atomOneDark',
light: 'atomOneLight',
},
如果您不使用 markdown,请在深色/浅色模式下都使用 github 代码高亮主题。原因是在博客园非 markdown 编辑器下无法做到深色高亮主题兼容所有语言。
代码行号
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
lineNumbers: {
enable: true,
},
随笔目录
- 不依赖第三方插件
- 不仅仅支持 markdown,还支持博客园其他编辑器编辑的随笔
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
position | 目录位置 | String | 'left' | 'sidebar' 'left' 'right' |
catalog: {
enable: true,
position: 'left',
},
按钮工具
- 不依赖第三方插件
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
initialOpen | 是否自动展开 | Boolean | true | true false |
tools: {
enable: true,
initialOpen: true,
},
打赏二维码
- 不依赖第三方插件
- 最多支持四个二维码
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
qrcodes | 二维码图片链接 | Array | [] |
donation: {
enable: true,
qrcodes: [],
},
弹幕
- 不依赖第三方插件
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | false | true false |
opacity | 是否弹幕透明度启用 | Number | 0.6 | 0-1 |
colors | 颜色列表 | Array | 内置 | |
fontSize | 字体大小 | String | '16px' | |
barrages | 全局弹幕(所有页面都会发送) | Array | [] | |
indexPageBarrages | 首页弹幕 | Array | [] | |
postPageBarrages | 随笔页弹幕 | Array | [] |
barrage: {
enable: false,
opacity: 0.6,
colors: [],
barrages: [],
indexBarrages: [],
postPageBarrages: [],
},
自定义链接
- 不依赖第三方插件
links: [
{
name: 'xxx',
link: 'xxx',
},
{
name: 'xxx',
link: 'xxx',
},
// ....
],
画笔
- 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
enable | 是否启用 | Boolean | true | true false |
notation: {
enable: true,
},