博客园允许用户设置多样化的主题。通过选择皮肤,然后开启JS脚本权限,在设置里面植入跟皮肤配套的
CSS
、JS
,并且禁用默认的CSS
,即可实现个性化的界面风格和交互行为。
文档参考这里,非常详细🌹
勾选 “公告”
皮肤选择 SimpleMemory
这里我选择的是 Cnblogs-Theme-SimpleMemory V2.1.0
版本
@import url(https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@2.1.0/dist/simpleMemory.css);
注意:
下面是我的配置(仅供参考)
<script type="text/javascript">
window.cnblogsConfig = {
// iconfont(我个人的,可以自己建一个iconfont项目维护使用)
fontIconExtend: "//at.alicdn.com/t/c/font_3603036_keyavmcqbhn.css",
info: {
name: '甜点cc', // 用户名
startDate: '2016-10-08', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
avatar: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 用户头像
blogIcon: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 网站图标 favicon.ico
},
sidebar: {
infoBackground: 'https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/Machine_tool.jpg', // 个人信息背景
titleMsg: '宝宝等你很久啦~🌹🌹', // 侧边栏title信息
navList: [
['友链', 'https://www.cnblogs.com/all-smile/p/16612170.html', 'icon-pengyoufill'],
['个人主页', 'https://home.i-xiao.space/', 'icon-zhuye'],
],
},
banner: {
home: {
// 主页banner标语, 随机从数组中获取一条文字显示
title: ['每一个不曾起舞的日子,都是对生命的辜负。', '为者常成,行者常至。', '逝者如斯夫,不舍昼夜。', "相逢的还会再相逢。"],
// 主页banner图片
background: [
"https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/Machine_tool.jpg",
"https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/horse.jpg",
"https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/background.jpg",
"https://raw.githubusercontent.com/all-smile/nav/master/static/images/sunset.jpg",
"https://raw.githubusercontent.com/all-smile/nav/master/static/images/sunset02.jpg"
],
},
},
// 失去焦点标签文字
title: {
onblur: '(o゚v゚)ノ Hi',
},
// 页面加载loading。
loading: {
rebound: {
tension: 16,
},
spinner: {
id: 'spinner',
radius: 90,
}
},
// 页脚模式
footer: {
style: 2,
text: {
left: '蓄之既久,其发必速。',
},
},
// 友情链接
links: {
// 文章底部显示添加友链入口(博客园发送消息)
footer: [
/*
格式:
Key Description
name 昵称
introduction 简介
avatar 头像
url 友链地址
*/
["添加友链", 'https://msg.cnblogs.com/send/甜点cc'],
],
},
// 右下角菜单
rtMenu: {
qrCode: 'https://xxx.jpg', // 自己设置
reward: {
wechatpay: 'https:xxx.jpg' // 自己设置
},
},
animate: {
// 主页banner动效配置。
homeBanner: {
enable: true,
options: {
radius: 15,
}
},
// 文章页标题动效配置。
articleTitle: {
enable: true,
},
// 文章页banner动效配置
articleBanner: {
enable: true,
},
// 背景动效。
background: {
enable: false,
},
// 跟随鼠标动效。
mouse: {
enable: false,
},
},
};
// 友链配置
window.cnblogsConfig.links.page = [
{
name: '甜点cc', // 昵称
introduction: '博客', // 简介
avatar: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 头像
url: 'https://home.i-xiao.space/blog/' // 友链地址
},
]
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>
注意:
GitHub
上面托管,采用CDN访问(参考这里)
👉 方式很多,顺手就行 👈