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

前置

最近写了几篇随笔，大家都不看内容，讨论博客皮肤 😂，满足你们。以下所有功能都可作为一个插件使用，你可以将它迁移到你的博客，代码仓库地址在文末。或者使用 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 标签】，&amp;是&【属于 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  阅读(3003)  评论(39)    收藏  举报