博客园主题美化👻
博客园主题美化👻
最近看到好几个人问我博客园皮肤的事情，我就发一下我的博客美化代码把，大家可以参考参考，后续美化的话会继续补充在这里：
1. 博客园主题模板：SimpleMemory
2. css样式代码：
https://blog-static.cnblogs.com/files/blogs/675033/1.css
3. 博客园侧边栏公告代码：
点击查看代码
<script type="text/javascript">
window.cnblogsConfig = {
GhVersions : 'xxx', // 版本
blogUser : "xxx", // 用户名
blogAvatar : "https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpeg", // 用户头像
blogStartDate : "2020-10-01", // 入园时间
// 标签聚焦 失焦显示字样
webpageTitleOnblur: '(oﾟvﾟ)ノ 404啦！',
webpageTitleOnblurTimeOut: 500,
webpageTitleFocus: '(*´∇｀*) Welcome Back！',
webpageTitleFocusTimeOut: 1000,
// 设置网站图标图片
webpageIcon: "https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.png",
// 日/夜间模式自动切换
switchDayNight: {
enable: true,
auto: {
enable: true
}
},
// 页面加载loading
loading: {
rebound: {
tension: 16,
},
spinner: {
id: 'spinner',
radius: 90,
}
},
// 是否渲染主页banner动效 以及配置动态效果
homeTopAnimationRendered: true,
homeTopAnimation: {
color : 'random',
},
// 是否渲染文章页banner动效 以及配置动态效果
essayTopAnimationRendered: true,
essayTopAnimation: {
triW : 10,
triH : 20,
},
// 是否渲染页面背景动效 以及配置动态效果
bgAnimationRendered: true,
backgroundAnimation: {
colorSaturation: "60%",
colorBrightness: "50%",
},
// 主页banner图片Url，推荐尺寸>= 1920*1080，支持多张，每次刷新随机设置一张。
homeTopImg: [
"https://blog-static.cnblogs.com/files/blogs/675033/xxx.gif",
"https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpg",
"https://blog-static.cnblogs.com/files/blogs/675033/xxx.gif",
"https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpg"
],
// 主页banner上的标语
homeBannerTextType: "one",
// 文章页banner图片Url，推荐尺寸>= 1920*600，支持多张，每次刷新随机设置一张。
essayTopImg: [
"https://blog-static.cnblogs.com/files/blogs/675033/xxx.gif",
"https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpg",
"https://blog-static.cnblogs.com/files/blogs/675033/xxx.gif",
"https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/xxx.jpg",
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"
],
// 文章页后缀
essaySuffix: {
aboutHtml: "既然选择了远方，那就冲冲冲！🎉",
},
// 限制代码框高度，开启行号
codeMaxHeight: true,
codeLineNumber: true,
// 设置博客园代码块样式
essayCodeHighlightingType: "highlightjs",
essayCodeHighlighting: "googlecode",
// 页脚样式
footerStyle: 1,
bottomBlogroll: [ // 友情链接，[[链接名,链接]....]
["申请坑位", 'https://msg.cnblogs.com/send/xxx'],
["申请坑位", 'https://msg.cnblogs.com/send/xxx'],
["申请坑位", 'https://msg.cnblogs.com/send/xxx'],
["申请坑位", 'https://msg.cnblogs.com/send/xxx'],
["申请坑位", 'https://msg.cnblogs.com/send/xxx'],
],
// 页脚标语
bottomText: {
icon: "❤️", // v1.3.0 已废弃该配置
iconFont: { // v1.3.0 新增配置
icon: "icon-xl", // iconfont 图标名称
color: "red", // 图标颜色
fontSize: "16px" // 图标大小
},
left : "不要小看自己",
right: "人有无限可能！"
},
// 控制台输出
consoleList: [
['BNDong CNBlogs', 'https://www.cnblogs.com/xxx/'],
['BNDong Email', 'xxxxxxxxxx@qq.com'],
],
// 关闭广告
advertising: true,
// 版本映射
isVersionMapping: true,
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.2/src/script/simpleMemory.min.js"></script>
4. 页首代码：
点击查看代码
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<!-- 悬挂的喵 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/fsh001/szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/fsh001/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -999px;"></div>
5. 页脚代码：
点击查看代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/675033/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/675033/waifu.css">
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/blogs/675033/flat-ui.min.css"/>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://files.cnblogs.com/files/blogs/675033/live2d.js"></script>
<script src="https://files.cnblogs.com/files/blogs/675033/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
<canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<!--图片放放大效果-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/jajian/img.enlarge.js"></script>
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;
width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
<img id="bigimg" style="height: auto;width: 65%;border: 5px solid #7e8c8d;
margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>
<!--设置鼠标吸附效果-->
<script id="c_n_script" src="https://blog-static.cnblogs.com/files/xiaokang01/js.js" color="240,230,140" opacity="1" count="75" zindex="-2">if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
} else {}</script>
</body>
</html>
总结
至于如何修改成大家自己喜欢的样式，大家可以看看侧边栏，页首和页脚的代码哈！不多，但是都有注释，大家可以自己选择性的修改！好啦，有什么不会的可以私聊留言！👻
有什么错误或者改进意见欢迎评论或发给我噢！大家一起共同学习！大佬多指教！！！！
