多图预警 | 我为博客园新增了十几个功能
2020-05-15 20:10
10 查看
前置
最近写了几篇随笔,大家都不看内容,讨论博客皮肤 😂,满足你们。以下所有功能都可作为一个插件使用,你可以将它迁移到你的博客,代码仓库地址在文末。或者使用 awescnb 将这些插件集成到你现有的博客园皮肤。若有错误,恳请指点一二,感激不尽。欢迎评论区友善交流。另外插件还在不断扩充与完善。
基本配置
属性 | 描述 | 值类型 | 默认值 | 可选值 |
---|---|---|---|---|
name | 全局主题名称 | String | 'reacg' | 'reacg' 'element' 'gshang' 'acg' |
color | 全局主题色 | String | '#ffb3cc' | 16 进制颜色值 |
avatar | 头像图片链接 | String | 无 | |
title | 网站标题 | String | 你的博客名 2088 | |
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.', '& 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 | 1c02
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。点击跳转查看皮肤示例
仓库地址
相关文章推荐
- Visual Studio 2013 Web开发、新增功能:“Browser Link”
- java8接口的新增功能
- XML for Microsoft Windows 2000 的新增功能
- 轻松把玩HttpClient之封装HttpClient工具类(七),新增验证码识别功能
- GNOME Clocks 3.8 登陆 Ubuntu 13.10 软件中心-新增功能
- 新增用户删除功能:JSP和Servlet的整合项目
- windows程序设计-第四章 system2.c 新增滚动条功能
- PDF插件VintaSoftPDF.NET Plug-in v5.5发布,新增PDF验证功能
- 详解Tomcat 7的七大新特性和新增功能(1)
- 【翻译】Web AppBuilder for ArcGIS的新增功能(2017年12月)
- 开源版产品新增“联系我们配置管理”功能
- 如何给博客园加上运行代码功能
- C# 2.0 语言和编译器中的新增功能
- Windows 8.1再次泄漏 新增功能汇总!
- Adsense新增域名保护功能
- 系统警钟-日志预警功能
- Android各版本新增功能一览
- Windows Phone 8 新增功能:解锁开发者手机和新的调试功能
- SQL SERVER 2000新增功能介绍1
- Laravel小项目之第4节 Laravel-通过表单实现新增及操作状态提示功能