0. 致謝
首先感謝，awescnb專案及其成員，提供的一系列成果，使得博客園的皮膚美化，變得非常簡單且美好，
這里是該專案的使用手冊等公告檔案，你需要的一切都可以從這上面得到，
這里是該專案最初的作者寫的博客園匯總貼，
1. 開始設定博客園皮膚
awescnb的公告檔案，已經詳細說明了該如何使用和設定博客園的皮膚，
這里只是按照順序記錄一下我的操作步驟，和一些改動的定制化地方，
1.1 設定基本皮膚
如下圖所示，設定基本皮膚為官方的Custom，并且申請了JS權限，以及勾選禁用模板默認CSS
1.2 添加Loading影片
Loading影片就是在打開博客界面時的載入影片，awescnb官方提供了一些Loading影片，在其基礎上定制化了一個，具體如下：
在頁首HTML代碼添加以下代碼：
<!-- rainbow rotate -->
<div id="loading">
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
在頁面定制 CSS代碼添加以下代碼：
/* rainbow rotate */
@keyframes spin3D {
from {
transform: rotate3d(01.5, 01.5, 01.5, 360deg)
}
to {
transform: rotate3d(0deg)
}
}
#loading {
height: 100%;
background-color: #1d2630;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
overflow: hidden;
z-index: 99999999
}
.spinner-box {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent
}
.leo {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%
}
.red {
width: 1px;
height: 1px;
border: 100px solid #FF0000;
animation: spin3D 0.5s linear 0s infinite
}
.orange {
width: 1px;
height: 1px;
border: 90px solid #FF7F00;
animation: spin3D 0.5s linear 0s infinite
}
.yellow {
width: 1px;
height: 1px;
border: 80px solid #FFFF00;
animation: spin3D 0.5s linear 0s infinite
}
.green {
width: 1px;
height: 1px;
border: 70px solid #00FF00;
animation: spin3D 0.5s linear 0s infinite
}
.cyan {
width: 1px;
height: 1px;
border: 60px solid #00FFFF;
animation: spin3D 0.5s linear 0s infinite
}
.blue {
width: 1px;
height: 1px;
border: 50px solid #0000FF;
animation: spin3D 0.5s linear 0s infinite
}
.purple {
width: 1px;
height: 1px;
border: 40px solid #8B00FF;
animation: spin3D 0.5s linear 0s infinite
}
.w1 {
transform: rotate3D(1, 1, 1, 90deg)
}
.w2 {
transform: rotate3D(1, 1, 1, 120deg)
}
.w3 {
transform: rotate3D(1, 1, 1, 150deg)
}
.w4 {
transform: rotate3D(1, 1, 1, 180deg)
}
.w5 {
transform: rotate3D(1, 1, 1, 210deg)
}
.w6 {
transform: rotate3D(1, 1, 1, 240deg)
}
.w7 {
transform: rotate3D(1, 1, 1, 270deg)
}
1.3 我定制化的頁面布局
awescnb官方提供的一個主題geek的有些頁面布局，我選擇定制化一下，在剛剛1.2中添加的CSS代碼后面追加以下代碼：
/* -------------------------------自定義css----------------------------- */
/* 日歷 */
#custom-calendar {
display: none;
}
/* 提交評論按鈕 */
#btn_comment_submit {
color: #FFFFFF !important;
background-color: #1976D2 !important;
}
/* 頭像下方的收藏、閃存、小組、博問導航欄 */
.profile-menu {
display: none !important;
}
/* 右上角的郵箱、寫信導航欄 */
.email {
display: none;
}
.message {
display: none;
}
/* 背景圖整體框 */
.profile-banner {
border-radius: 10px !important;
}
/* 頭像框 */
.profile-avatar {
left: 1px !important;
bottom: 1px !important;
}
/* 頭像右側的資訊欄 */
.profile-msg {
bottom: 5px !important;
}
/* 首頁博文卡片的閱讀等按鈕 */
.custom-card-actions button {
background-color: #1976D2 !important;
}
/* 首頁博文卡片 */
.custom-card {
border-radius: 10px !important;
}
/* 博文卡片標題 */
.custom-card-title {
font-size: 25px !important;
}
/* 首頁博文卡片流布局 */
.cards-list {
grid-template-columns: repeat(1, 1fr) !important;
}
/* 博客中間布局 */
#mainContent {
grid-template-rows: 18vh 1fr !important;
}
/* 博客整體布局 */
#home {
grid-template-columns: auto !important;
}
1.4 引入awescnb的js腳本，并定制化
在頁腳HTML代碼中添加以下代碼，基本上包含了當前awescnb專案能配置的所有選項，雖然其中很多選項都是geek主題使用不了的，不過已經足夠用了，想開啟這些選項，就enable: true,；其中有些圖片的url需要自己去手動添加了：
<!-- @format -->
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
// 基本配置
theme: {
name: 'geek', // 要使用的皮膚
color: '', // 全域主題色，默認跟隨皮膚
title: '', // 網站標題
avatar: '', // 頭像url
favicon: '', // 網站圖示
headerBackground: '', //背景圖url
},
// 代碼高亮
highLight: {
enable: true,
},
// 代碼行號
lineNumbers: {
enable: true,
},
// github圖示
github: {
enable: false,
color: '#FFB3CC',
url: '',
},
// 碼云圖示
gitee: {
enable: false,
url: '',
},
// 圖片燈箱，點擊圖片單獨顯示
imagebox: {
enable: true,
},
// 文章目錄
catalog: {
enable: true,
position: 'left',
},
// 右下角按鈕組
tools: {
enable: true,
initialOpen: true,
},
// live2d模型
live2d: {
enable: false,
page: 'all',
agent: 'pc',
model: 'random',
width: 150,
height: 200,
position: 'left',
gap: 'default',
},
// 點擊特效
click: {
enable: false,
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
size: 30,
maxCount: 50,
},
// 評論輸入框表情
emoji: {
enable: true,
buttonIcon: "emoji",
emojiList: [
{
value: '??',
label: '笑哭',
},
{
value: '??',
label: '大笑',
},
{
value: '??',
label: '苦笑',
},
{
value: '??',
label: '斜眼笑',
},
{
value: '??',
label: '得意',
},
{
value: '??',
label: '微笑',
},
{
value: '??',
label: '酷！',
},
{
value: '??',
label: '花癡',
},
{
value: '??',
label: '呵呵',
},
{
value: '??',
label: '好崇拜哦',
},
{
value: '??',
label: '思考',
},
{
value: '??',
label: '白眼',
},
{
value: '??',
label: '略略略',
},
{
value: '??',
label: '呆住',
},
{
value: '??',
label: '大哭',
},
{
value: '??',
label: '頭炸了',
},
{
value: '??',
label: '冷汗',
},
{
value: '??',
label: '嚇死了',
},
{
value: '??',
label: '略略略',
},
{
value: '??',
label: '暈',
},
{
value: '??',
label: '憤怒',
},
{
value: '??',
label: '祝賀',
},
{
value: '??',
label: '小丑竟是我',
},
{
value: '??',
label: '噓~',
},
{
value: '??',
label: '猴',
},
{
value: '??',
label: '笑笑不說話',
},
{
value: '??',
label: '牛',
},
{
value: '??',
label: '啤酒',
},
{
value: '(=?ω?=)',
label: '',
},
{
value: '(｀?ω?′)',
label: '',
},
{
value: '(°?°)?',
label: '',
},
{
value: '←_←',
label: '',
},
{
value: '→_→',
label: '',
},
{
value: 'Σ(?д?;)',
label: '',
},
{
value: '(??ω??)',
label: '',
},
{
value: '(-_-#)',
label: '',
},
]
},
// 暗色模式
darkMode: {
enable: true,
darkDefault: false, // 是否默認設定暗色模式
autoDark: true,
autoLight: true,
},
// 音樂播放器
musicPlayer: {
enable: false,
page: 'all',
agent: 'pc',
autoplay: false,
volume: 0.4,
lrc: {
enable: false, // 啟用歌詞
type: 1, // 1 -> 字串歌詞 3 -> url 歌詞
color: '', // 顏色
},
audio: [
{
name: '404 not found',
artist: 'REOL',
url: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo4.mp3',
cover: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo.jpg',
lrc: ``,
},
],
},
// 隨筆頭圖
postTopimage: {
enable: true,
fixed: true, // 視差滾動
imgs: [], // 圖片url串列
},
// 隨筆尾圖
postBottomimage: {
enable: false,
img: '',
height: '200px',
},
// 打賞二維碼
donation: {
enable: false,
img: '',
qrcodes: [],
desc: '', // 描述
},
// 個性簽名，在背景圖上的打字效果
signature: {
enable: false,
contents: [],
},
// 側邊欄二維碼
qrcode: {
enable: false,
img: '',
desc: '',
},
// 彈出公告
notice: {
enable: false,
text: ['來了老弟', '老弟記得三連啊'],
},
// 首頁串列圖
indexListImg: {
enable: false,
imgs: [], // 圖片url串列
},
// 頂部加載進度條
topProgress: {
enable: false,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
// 隨筆頁尾部簽名
postSignature: {
enable: true,
enableLicense: true,
link: '',
licenseName: '',
licenseLink: '',
content: [],
},
// 背景圖片或顏色
bodyBackground: {
enable: false,
value: '',
opacity: 0.9,
repeat: false,
},
// 彈幕
barrage: {
enable: false,
opacity: 0.6,
colors: [],
fontSize: '16px',
barrages: [], // 全域彈幕
indexBarrages: [], // 首頁彈幕
postPageBarrages: [], // 博文頁彈幕
},
// 圖表，不如使用eCharts
charts: {
enable: false,
},
// 鎖屏
lock: {
enable: false,
background: '', // 背景圖片，默認隨機
strings: ['test'],
},
// 自定義鏈接鏈接
links: [
{
name: '',
link: '',
},
// ......
],
// 畫筆，將Markdown的一些線條使用擬人畫筆代替
notation: {
enable: true,
},
}
$.awesCnb(opts)
</script>
1.5 保存享受煥然一新的博客
做完上述操作以后，點擊保存即可，
接下來就是重繪博客首頁，享受煥然一新的博客了，
如果重繪以后博客首頁白屏（應該不會，以防萬一），點擊這里進入博客園后臺撤銷上述操作，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/506021.html
標籤：其他