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是否启用Booleantruetrue false
imagebox: {
enable: true,
},

暗色模式

  • 无任何依赖
  • 全局覆盖
  • 非线性切换动画
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
autoDark夜间自动切换暗色模式Booleanfalsetrue false
autoLight日间自动切换亮色模式Booleanfalsetrue false
darkMode: {
enable: true,
autoDark: false,
autoLight: false
},

个性签名

  • 炫酷的打字机效果
  • 支持输出 HTML 标签以及内联样式
  • 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性描述值类型默认值可选值
enable是否启用Booleanfalsetrue false
contents内容Array String[]
signature: {
enable: true,
contents: [
"This theme is built with <b style='color:#ff6b81'>awescnb</b>.",
"<b>console.log(🍺);</b>",
],
},

二维码

  • 不依赖第三方插件
  • 支持添加描述信息
属性描述值类型默认值可选值
enable是否启用Booleanfalsetrue false
img二维码图片链接String
desc描述String
qrcode: {
enable: false,
img: '',
desc: '',
},

背景

  • 不依赖第三方插件
  • 支持 repeat 背景图片
  • 支持透明您的博客主体内容
属性描述值类型默认值可选值
enable是否启用Booleanfalsetrue false
value图片链接或颜色值String16 进制颜色值
opacity内容的透明度String10-1
repeat背景图片是否重复Booleantruetrue false
bodyBackground: {
enable: false,
value:
'https://guangzan.gitee.io/imagehost/awescnb/images/anime/22.jpg',
opacity: 0.85,
repeat: false,
},

图表

  • 清新手绘风
  • 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性描述值类型默认值可选值
enable是否启用Booleanfalsetrue false
pie饼图
charts: {
enable: true,
pie: {
title: 'My skills',
data: {
labels: ['JavaScript', 'css', 'Vue', 'React', 'wechat'],
values: [40, 30, 20, 10, 20],
},
},
},

首页列表图片

  • 不依赖第三方插件
  • 支持自定义图片列表
属性描述值类型默认值可选值
enable是否启用Booleanfalsetrue false
imgs图片 url 列表Array内置
indexListImg: {
enable: false,
imgs: [],
},

随笔头图

  • 不依赖第三方插件
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
fixed视差滚动Booleanfalsetrue false
imgs图片 url 列表Array[]
postTopimage: {
enable: true,
imgs: [],
},

原来的 position bottom api 已经启用使用 postBottomimage 选项代替

随笔尾图

  • 不依赖第三方插件
属性描述值类型默认值可选值
enable是否启用Booleanfalsetrue false
img图片链接String''
height图片高度String'200px'
postBottomimage: {
enable: false,
img: '',
height: ''
},

通知

  • 平滑的过渡动画
属性描述值类型默认值可选值
enable是否启用Booleanfalsetrue false
text文字Array默认下方两条['自定义','自定义',...]
notice:{
enable:true,
text:['🔯双击导航条锁屏','🙃快去自定义通知吧'],
},

锁屏

  • 炫酷的打字效果
  • 支持打印 HTML 标签以及内联样式
  • 点击右上角 🔑 解锁
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
background背景图片String随机
strings文字Array
lock: {
enable: true,
background: '',
strings: [
'<i>Powered by</i> webpack.',
'&amp; Theme in awescnb',
'快去自定义您的个性签名吧~',
],
},

<i>是斜体【属于 HTML 标签】,&amp;是&【属于 HTML 转义字符】。 附参考文档:HTML 转义字符&HTML 标签

表情输入

  • 多套图标
  • 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
showRecents是否展示最近使用Booleanfalsetrue false
showPreview是否预览表情Booleanfalsetrue false
showSearch是否展示搜索框Booleanfalsetrue false
recentsCount展示最近使用的个数Number20
emoji: {
enable: true,
showRecents: true,
recentsCount: 20,
showPreview: true,
showSearch: true,
},

模型

  • 提供多套模型
  • 支持自动模式(不推荐)
  • 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
model模型String'haru-01'见下方
width宽度Number150
height高度Number200
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是否启用Booleantruetrue false
autoplay自动播放Booleantruetrue false
volume默认音量Number0.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是否启用Booleantruetrue false
auto进入页面自动产生点击特效Booleantruetrue false
colors颜色列表BooleanArray['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
click: {
enable: true,
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
size: 30,
maxCount: 50,
},

头部进度条

  • 不启用则不加载依赖,若启用则只加载一次,自动 cache
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
background背景色String'#FFB3CC'
height高度String'5px'
topProgress: {
enable: false,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},

GitHub

属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
background图标颜色String'#FFB3CC'
url链接String""
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/guangzan/awescnb',
},

码云

属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
background图标颜色String'#C71D23'
url链接String""
gitee: {
enable: true,
color: '#C71D23',
url: 'https://gitee.com/guangzan/awescnb',
},

随笔签名

属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
enableLicense是否启用版权信息说明Booleantruetrue 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是否启用Booleantruetrue false
lineNumbers: {
enable: true,
},

随笔目录

  • 不依赖第三方插件
  • 不仅仅支持 markdown,还支持博客园其他编辑器编辑的随笔
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
position目录位置String'left''sidebar' 'left' 'right'
catalog: {
enable: true,
position: 'left',
},

按钮工具

  • 不依赖第三方插件
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
initialOpen是否自动展开Booleantruetrue false
tools: {
enable: true,
initialOpen: true,
},

打赏二维码

  • 不依赖第三方插件
  • 最多支持四个二维码
属性描述值类型默认值可选值
enable是否启用Booleantruetrue false
qrcodes二维码图片链接Array[]
donation: {
enable: true,
qrcodes: [],
},

弹幕

  • 不依赖第三方插件
属性描述值类型默认值可选值
enable是否启用Booleanfalsetrue false
opacity是否弹幕透明度启用Number0.60-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是否启用Booleantruetrue false
notation: {
enable: true,
},