博客园主题皮肤更换记录
更换博客园主题的记录。留待后观。
1. 说明
首先非常感谢以前使用的一款皮肤，它的原作者是静逸 - 博客园 (cnblogs.com)，在我刚刚进入博客园的时候，这位作者的教程给我很大的帮助。
但是这个博主已经很久不更新了，其实让人有一些惆怅。
我又翻阅了一些博客园主题，觉得 awescnb 系列主题中的 geek 这个主题相当不错。于是决定更换。
这个主题其实挺好，其实做出来的效果和体验，已经跟自己基于hexo搭建博客相差不多了。
awescnb 相关资料：
- 文档1: www.yuque.com/awescnb
- 文档2:快速安装 | Awescnb (gitee.io)
- 源码: https://github.com/cnbloglabs
- 作者博客: guangzan - 博客园 (cnblogs.com)
2. 备份
这是我原来的侧边栏公告，能够实现代码折叠、快速跳转与分享转发。
<div id="myTime">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle">
<param name="allowScriptAccess" value="always">
<param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<param name="wmode" value="transparent">
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"6","bdPos":"right","bdTop":"100"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<script type="text/javascript">
$(document).ready(function () {
var pres = $("pre");
for (var i = 0; i < pres.length; i++) {
$(pres[i]).attr('id', 'pre' + i);
//这里注释掉
//$(pres[i]).children('code').hide();
//这里原来是view code，改为hide code
$(pres[i]).prepend('<button id="btn'+ i +'" onclick="view_code(\'pre'+ i +'\');">hide code</button>');
}
});
function view_code (id) {
var btn_text = document.getElementById(id).children[0].innerText;
var style;
var status;
if(btn_text == 'view code') {
style = '""';
status = 'hide code';
} else {
style = 'display: none;';
status = 'view code';
}
document.getElementById(id).children[0].innerText = status;
document.getElementById(id).children[1].style = style;
}
</script>
3. 加载动画的备份
- 复制 html 替换 页首 HTML 中的内容
- 复制 css 替换 页面定制 CSS 中的内容
4.博客页面设置
作为备份。
背景本来想搞一个图片，但是图片放上去很糊，所以直接设置纯色，是一个淡蓝色，值得注意的是，这里博客里的颜色会比颜色表中要淡（可能是透明度的关系）。
背景颜色参照网站 RGB颜色值与十六进制颜色码转换工具 (sioe.cn)，目前采用的是 DoderBlue-道奇蓝-#1E90FF
背景图片
这20个高质量超高清的壁纸网站，强烈推荐！ - 知乎 (zhihu.com)
壁纸来源网站Awesome Wallpapers - wallhaven.cc，上面的图很好看，第一张图片是天空、男孩和飞机，意象相当好。
https://w.wallhaven.cc/full/k7/wallhaven-k7q9m7.png
这个是目前采用的背景图片，我愿称之为 森林钢琴：
音乐
为了避免网页加载时间过长，音乐就放了两首姿妈的歌。
找音乐直链的网站：正在播放: 尚好的青春 - 孙燕姿 (liuzhijin.cn)
2022-08-26 更新了 尚好的青春 音源。
2022-08-27 更新了 种 音源，增加了 克卜勒。
侧边栏
2022-08-25-20:40增加了网站图标 favicon.jpg
图标制作大师 - 轻松制作网站favicon图标 (geticon.cn)
但是没有显示，可能是geek主题不支持。
2022-08-25-22:00 修改博文阅读按钮，是博客主题颜色的问题。
2022-09-02 修改live-2d模型 '伊芙加登'
2022-09-02 又改回去了，感觉haru-01更适配我的博客颜色；针对 种 出现错误的情况修改了一下源
<!-- @format -->
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
// 基本配置
theme: {
name: 'geek',
//color: '#FFB3CC',
color: '#00CED1',
title: 'Clivia Du',
avatar: 'https://images.cnblogs.com/cnblogs_com/blogs/705487/galleries/2077994/o_220825050658_avatar.jpg',
favicon: 'https://images.cnblogs.com/cnblogs_com/blogs/705487/galleries/2077994/o_220825124121_favicon.jpg',
headerBackground: 'https://w.wallhaven.cc/full/k7/wallhaven-k7q9m7.png',
},
// 代码高亮
highLight: {
enable: true,
},
// 代码行号
lineNumbers: {
enable: true,
},
// github图标
github: {
enable: false,
url: '',
},
// 码云图标
gitee: {
enable: false,
url: '',
},
// 图片灯箱
imagebox: {
enable: true,
},
// 文章目录
catalog: {
enable: true,
position:'left'
},
// 右下角按钮组
tools: {
enable: true,
},
// live2d模型
live2d: {
enable: true,
model: 'haru-01',//2022-09-02
//model: '伊芙加登',
},
// 点击特效
click: {
enable: true,
},
// 评论输入框表情
emoji: {
enable: true,
buttonIcon: "🥳",
emojiList: [
{
value: 'https://images.cnblogs.com/cnblogs_com/gshang/1626876/o_2001050555139.png',
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: '',
},
{
value: '(-_-#)',
label: '',
},
]
},
// 暗色模式
darkMode: {
enable: true,
autoDark: false,
autoLight: false,
},
// 音乐播放器
musicPlayer: {
enable: true,
//page: 'all',
agent: 'pc',
autoplay: false,
volume: 0.4,
lrc: {
enable: false, // 启用歌词
type: 1, // 1 -> 字符串歌词 3 -> url 歌词
color: '', // 颜色
},
audio: [
{
name: '尚好的青春',
artist: '孙燕姿',
url: 'http://music.163.com/song/media/outer/url?id=28283346.mp3',
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.6Pq403ztOl8kpOe3IxAYfAAAAA?w=143&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7',
lrc: ``,
},
{
name: '种',
artist: '孙燕姿',
url: 'https://sm-sycdn.kuwo.cn/eb810ce3d159a08be34e4400bd12f7f0/631224fc/resource/n2/58/86/3142551252.mp3',
cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ie2gOojO7eppE9xgy73ksAHaKB?w=126&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
lrc: ``,
},
{
name: '克卜勒',
artist: '孙燕姿',
url: 'http://music.163.com/song/media/outer/url?id=28196001.mp3',
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.6Pq403ztOl8kpOe3IxAYfAAAAA?w=143&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7',
lrc: ``,
},
],
},
// 随笔头图
postTopimage: {
enable: true,
},
// 随笔尾图
postBottomimage: {
enable: false,
},
// 打赏二维码
donation: {
enable: false,
qrcodes: [],
},
// 个性签名
signature: {
enable: true,
contents: [ "<b style='color:#ff6b81'>久炼成器</b>.",
"<b style='color:#ff6b81'>Life may be hard.Don't leave regrets</b>."
],
},
// 侧边栏二维码
qrcode: {
enable: false,
img: '',
desc: '',
},
// 弹出公告
notice: {
enable: false,
text: [],
},
// 首页列表图
indexListImg: {
enable: false,
},
// 顶部加载进度条
topProgress: {
enable: false,
},
// 随笔页尾部签名
postSignature: {
enable: true,
content: [],
licenseName: '',
licenseLink: '',
},
// 背景图片或颜色
bodyBackground: {
enable: true,
value: '#1E90FF',
opacity: 0.90,
repeat: false,
},
// 弹幕
barrage: {
enable: false,
},
// 图表
charts: {
enable: false,
labels: [
'Robotics',
'Computer System',
'Artificial Intelligence',
'Electronic & Control',
'Engineering & Life',
'Programming',
'Network Security',
],
datasets: [
{
label: 'Interested',
data: [95, 85, 80, 60, 90, 80, 50],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)',
},
{
label: 'Ability',
data: [70, 80, 60, 30, 60, 70, 30],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)',
},
],
},
// 锁屏
lock: {
enable: false,
},
// 自定义链接链接
links: [
{
name: 'Github: zzrs123',
link: 'https://github.com/zzrs123',
},
{
name: 'Gitee: 山河故人',
link: 'https://gitee.com/mountain-and-river',
},
{
name: 'Leetcode: zzrs123',
link: 'https://leetcode-cn.com/u/zzrs123/',
},
{
name: '洛谷: zzrs123',
link: 'https://www.luogu.com.cn/user/693860',
},
{
name: '知乎: 山河故人',
link: 'https://www.zhihu.com/people/zheng-zheng-ri-shang-4-44/posts',
},
{
name: '组织1: 西工大舞基救援组',
link: 'https://team-explorer-rescue-robot.github.io/'
}
],
}
$.awesCnb(opts)
</script>
//图表备份
charts: {
enable: true,
pie: {
title: 'Interested in',
data: {
labels: ['Robotics', 'Computer System', 'Artificial Intelligence', 'Electronic & Control'],
values: [40, 30, 30, 20],
},
},
},
这里图表是不显示的，问了皮肤作者，答曰：图表没什么用，遂放弃。
5. 一些问题
我发现这套皮肤还是有问题的，
刚开始采用的是 reacg 主题，已经比较好看了，但突然感觉所有的侧边栏只在右侧很奇怪，并且如果要在侧边栏显示足够多的信息的话，就会让博客页面很长，不是很好。
于是采用 geek 主题，把首页的博文变成了卡片状，我觉得很好。
- 还是有一些不足，相较于最开始我使用的皮肤，这套皮肤的点赞太小了，我感觉之后我的随笔点赞量会下降一些。
- 此外，卡片式的布局，每页需要是12篇随笔。而博客园后台默认首页10篇随笔的话，外加置顶一篇随笔，还剩一个空位，让人看着比较难受。我想后续再置顶一篇随笔来凑齐。
