多图预警 | 我为博客园新增了十几个功能

前置

最近写了几篇随笔，大家都不看内容，讨论博客皮肤 😂，满足你们。以下所有功能都可作为一个插件使用，你可以将它迁移到你的博客，代码仓库地址在文末。或者使用 awescnb 将这些插件集成到你现有的博客园皮肤。若有错误，恳请指点一二，感激不尽。欢迎评论区友善交流。另外插件还在不断扩充与完善。

基本配置

属性	描述	值类型	默认值	可选值
name	全局主题名称	String	'reacg'	'reacg' 'element' 'gshang' 'acg'
color	全局主题色	String	'#ffb3cc'	16 进制颜色值
avatar	头像图片链接	String	无
title	网站标题	String	你的博客名
favicon	网站图标链接	String	内置
headerBackground	头部背景，图片链接	String	内置
countentSize	内容宽度	String	'mid'	'min' 'mid' 'max'

theme: {
    name: 'reacg',
    color: '#FFB3CC',
    title: '',
    avatar: '//pic.cnblogs.com/avatar/1501373/20200119190802.png',
    favicon: 'https://guangzan.gitee.io/imagehost/awescnb/favicon.png',
    headerBackground:
        'https://guangzan.gitee.io/imagehost/awescnb/images/anime/22.jpg',
}

avatar 生成头像

title & favicon

headerBackground

图片灯箱

不启用则不加载依赖
若启用则只加载一次，自动 cache
60 FPS 过渡动画
自动识别图片可见性，帮你缩放至可视范围
化繁为简，没有多余的按钮
点击图片放大查看
当你滚动继续浏览，它会自动归位，或者通过点击任意位置归位

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	true	true false

imagebox: {
    enable: true,
},

暗色模式

不依赖第三方插件
使用 css variable
全局覆盖
非线性过渡动画

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	true	true false
autoDark	夜间自动切换暗色模式	Boolean	false	true false
autoLight	日间自动切换亮色模式	Boolean	true	true false

darkMode: {
    enable: true,
    autoDark: false,
    autoLight: true
},

个性签名

炫酷的打字效果
不启用则不加载依赖
若启用则只加载一次，自动 cache
支持打印 HTML 标签
支持内联样式

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	false	true false
contents	内容	Array String	[]

signature: {
    enable: false,
    contents: [],
},

二维码

不依赖第三方插件
支持添加二维码描述
尽情宣传你的公众号吧

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	false	true false
img	二维码图片链接	String	''
desc	描述	String	''

qrcode: {
    enable: false,
    img: '',
    desc: '',
},

背景

不依赖第三方插件
支持 repeat 背景图片
支持透明你的博客主体内容

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	false	true false
type	类型图片或颜色	String		'color' 'img'
value	图片链接或颜色值	String		16 进制颜色值
opacity	内容的透明度	String	1	0-1
repeat	背景图片是否重复	Boolean	true	true false

bodyBackground: {
    enable: false,
    type: 'img',
    value:
        'https://guangzan.gitee.io/imagehost/awescnb/images/anime/22.jpg',
    opacity: 1,
    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
imgs	图片 urls 列表	Array	内置图像
position	位置	String	'top'	'top' 'bottom'

postTopimage: {
    enable: true,
    imgs: [],
    position: 'top',
},

通知

60 FPS 渡动画
间隔发送 sleep

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	true	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.',
        '&amp; Theme in awescnb',
        '快去自定义你的个性签名吧~',lock
    ],
},

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

表情输入

不启用则不加载依赖
若启用则只加载一次，自动 cache
配置丰富
清新风格
多套图标

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	true	true false
showRecents	是否展示最近使用	Boolean	true	true false
showPreview	是否预览表情	Boolean	true	true false
showSearch	是否展示搜索框	Boolean	true	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: '', // 颜色
    },
    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]",
        },
    ],
},

获取音乐链接以及歌词：https://music.liuzhijin.cn/

点击特效

不启用则不加载依赖
若启用则只加载一次，自动 cache
炫酷的例子效果
自定义粒子颜色
波纹荡漾

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	true	true false
auto	进入页面自动产生点击特效	Boolean	false	true false
colors	颜色列表	Boolean	Array	`['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']`
maxCount	粒子最大数量	Number	50

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
link	版权链接	String	""
content	内容	Array	内置

postSignature: {
    enable: false,
    content: [],
    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
三个最受欢迎主题可选

属性	描述	值类型	默认值	可选值
type	代码高亮主题	String	'atomOneDark'	'atomOneDark' 'atomOneLight' 'github'

highLight: {
    type: 'atomOneDark',
},

代码行号

不启用则不加载依赖
若启用则只加载一次，自动 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',
},

返回顶部

不依赖第三方插件
当前皮肤使用 tools 代替

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	true	true false
type	类型	String	'complex'	'simple' 'complex'

back2top: {
    enable: true,
    type: 'complex',
},

按钮工具

不启用则不加载依赖
若启用则只加载一次，自动 cache
可以随处拖动
支持展开收起的初始化配置

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	true	true false
initialOpen	是否自动展开	Boolean	true	true false
draggable	是否可拖动	Boolean	false	true false

tools: {
    enable: true,
    initialOpen: true,
    draggable: false,
},

弹幕

不依赖第三方插件

属性	描述	值类型	默认值	可选值
enable	是否启用	Boolean	false	true false
opacity	是否弹幕透明度启用	Number	0.6	0-1
colors	颜色列表	Array	内置
barrages	全局弹幕（所有页面都会发送）	Array	[]
indexPageBarrages	首页弹幕	Array	[]
postPageBarrages	随笔页弹幕	Array	[]

barrage: {
    enable: false,
    opacity: 0.6,
    colors: [
        '#FE0302',
        '#FF7204',
        '#FFAA02',
        '#FFD302',
        '#FFFF00',
        '#A0EE00',
        '#00CD00',
        '#019899',
        '#4266BE',
        '#89D5FF',
        '#CC0273',
        '#CC0273',
    ],
    barrages: [],
    indexBarrages: [],
    postPageBarrages: [],
},

底部链接

不依赖第三方插件

;[
  {
    name: 'awesCnb',
    link: 'https://gitee.com/guangzan/awescnb',
  },
]

最后

当前博客皮肤包含 99% 上文中的选项，你可能会认为这个皮肤文件很大，看图：

图中有四个打包后的皮肤都可独立使用，当前主题名为 reacg，通过 webpack 打包最后 js+css (css 通过 js 动态添加，所以你只能看到 js 文件) 只有不到 165KB，同时还支持分离 css，它将带来更快的加载速度，且无需使用 loading。点击跳转查看皮肤示例

仓库地址

posted @ 2020-05-15 20:10 guangzan 阅读(2933) 评论(39) 编辑收藏举报

刷新页面返回顶部