1. 技术文章
  2. 多图预警 | 我为博客园新增了十几个功能

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

由 不羁的心 提交于 2020-08-15 15:34:05

前置

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

基本配置

属性 描述 值类型 默认值 可选值
name 全局主题名称 String 'reacg' 'reacg' 'element' 'gshang' 'acg'
color 全局主题色 String '#ffb3cc' 16 进制颜色值
avatar 头像图片链接 String 无
title 网站标题 String 你的博客名
favicon 网站图标链接 String 内置
headerBackground 头部背景，图片链接 String 内置 
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 标签
  • 支持 tag 内联样式
属性 描述 值类型 默认值 可选值
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
position 位置 String 'top' 'top' 'bottom' 
postTopimage: {
    enable: true,
    imgs: [],
    position: 'top',
},

通知

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

锁屏

  • 炫酷的打字效果
  • 支持打印 HTML 标签
  • 支持 tag 内联样式
  • 手机、电脑通用，双击头部导航栏即可锁屏
  • 锁屏后点击 🔑 即可解锁
属性 描述 值类型 默认值 可选值
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
audio 音乐列表 [object Object] 内置 
musicPlayer: {
    enable: true,
    autoplay: false,
    audio: [
        {
            name: 'イニシャル',
            artist: "Poppin'Party",
            url: `https://guangzan.gitee.io/imagehost/awescnb/music/demo1.mp3`,
            cover: '//p2.music.126.net/ww7gcJ_erzPa8jgZesmTOA==/109951163271403502.jpg?param=90y90',
        },
    ],
},

点击特效

  • 不启用则不加载依赖
  • 若启用则只加载一次，自动 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
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'
trightype 与窗口右边的距离 String 例如 '100px' 或 '3rem' 
back2top: {
    enable: true,
    type: 'complex',
},

按钮工具

  • 不依赖第三方插件
属性 描述 值类型 默认值 可选值
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。点击跳转查看皮肤示例

仓库地址

标签
github
javascript
Gitee
imgs
Webpack
sidebar
Markdown
element
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!