多圖預警 | 我為博客園新增了十幾個功能

本文轉載自查看原文 2020-05-15 20:10 2310 博客園/ 插件/ Cnblog

前置

最近寫了幾篇隨筆，大家都不看內容，討論博客皮膚 😂，滿足你們。以下所有功能都可作為一個插件使用，你可以將它遷移到你的博客，代碼倉庫地址在文末。或者使用 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。點擊跳轉查看皮膚示例

倉庫地址

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。