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

時間  2020-05-16
標籤 預警 博客 新增 幾個 功能 简体版
原文   原文鏈接

前置

最近寫了幾篇隨筆，你們都不看內容，看博客皮膚 😂，知足大家。如下全部功能均可做爲一個插件使用，你能夠將它遷移到你的博客，代碼倉庫地址在文末。或者使用 awescnb 將這些插件集成到你現有的博客園皮膚。如有錯誤，懇請指點一二，感激涕零。歡迎評論區交流。另外插件還在不斷擴充。css

基本配置

屬性 描述 值類型 默認值 可選值
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 生成頭像html

title & faviconwebpack

headerBackgroundgit

圖片燈箱

  • 不啓用則不加載依賴
  • 若啓用則只加載一次，自動 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 標籤github

表情輸入

  • 不啓用則不加載依賴
  • 若啓用則只加載一次，自動 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 ...'

可選模型web

  • '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 結構markdown

<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% 上文中的選項，你可能會認爲這個皮膚文件很大，看圖：dom

當前主題名爲 reacg（當時亂起的）， 經過 webpack 打包最後 js+css (css 經過 js 動態添加，因此你只能看到 js 文件) 只有不到 165KB，同時還支持分離 css，它將帶來更快的加載速度，且無需使用 loading。點擊跳轉查看皮膚示例編輯器

倉庫地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程