记录收集博客园样式美化代码
初始微改版
预览
页面
点击查看代码
/* 全局字体设定 */
#cnblogs_post_body {
font-family: 'Roboto', sans-serif;
color: #333; /* 增强字体颜色对比度,提高可读性 */
}
/* 一级标题 */
#cnblogs_post_body h1 {
font-size: 30px;
font-weight: bold;
line-height: 1.5;
color: #333;
margin: 20px 0;
}
/* 二级标题 */
#cnblogs_post_body h2 {
font-size: 28px;
font-weight: bold;
line-height: 1.5;
color: #fff;
background-color: #007bff; /* 使用Bootstrap标准蓝色 */
padding: 10px;
margin: 20px 0;
}
/* 三级标题 */
#cnblogs_post_body h3 {
font-size: 24px;
font-weight: bold;
line-height: 1.5;
color: #fff;
background-color: #6c757d; /* 深灰色背景 */
padding: 10px;
}
/* 四级标题 */
#cnblogs_post_body h4 {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
color: #fff;
background-color: #343a40; /* 更深的灰色背景 */
padding: 10px;
}
/* 五级标题 */
#cnblogs_post_body h5 {
font-size: 18px;
font-weight: bold;
line-height: 1.5;
color: #fff;
background-color: #495057; /* 中等深度灰色 */
padding: 8px;
}
/* 六级标题 */
#cnblogs_post_body h6 {
font-size: 16px;
font-weight: bold;
line-height: 1.5;
color: #fff;
background-color: #adb5bd; /* 较浅灰色 */
padding: 8px;
}
/* 引用样式 */
#cnblogs_post_body blockquote {
font-size: 14pt;
font-style: italic;
color: #555;
border-left: 10px solid #007bff; /* 蓝色左边界线 */
padding: 10px 20px;
margin: 20px 0;
}
/* 正文 */
#cnblogs_post_body p {
font-size: 12pt; /* 增大正文字号 */
line-height: 1.8; /* 增加行距 */
}
简约版
请先确认已开通js编辑权限
silence
SimpleMemory美化插件 (目前在用)
请先确认已开通js编辑权限
预览
自定义内容主要在{博客侧边栏公告处}
附上我目前的配置,点击查看代码
<script type="text/javascript">
window.cnblogsConfig = {
info: {
name: 'Fcat', // 您的用户名
startDate: '2023-10-19', // 您的入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
avatar: 'https://s2.loli.net/2024/07/05/Wva8HTgDUQnK6ep.png', // 您的头像 URL 地址
blogIcon: 'https://s2.loli.net/2024/07/05/q2iBvwfE5Iumjzl.jpg',
},
sidebar: {
infoBackground: 'https://s2.loli.net/2024/07/05/leVZJxEg8wMOzyI.jpg', //侧边背景
},
banner: {
home: {
background: [ // 主页背景
"https://s2.loli.net/2023/12/04/wP2NfizpuvJKkUI.jpg",
"https://s2.loli.net/2024/07/05/GJanVIsqxzYSovL.jpg",
"https://s2.loli.net/2024/07/05/vjVHIuSxTXCcN46.jpg",
"https://s2.loli.net/2024/07/05/leVZJxEg8wMOzyI.jpg",
"https://s2.loli.net/2024/07/05/5QUHDiVyg1FYCLJ.jpg",
],
// title: '测试',
},
article: {
background: [ // 文章背景
"https://s2.loli.net/2024/07/05/DwBJmqEjL3c2Qrx.jpg",
"https://s2.loli.net/2024/07/05/JYGRvtWXw19HUfl.jpg",
"https://s2.loli.net/2024/07/05/v7gVWElJ92XUFSw.jpg",
"https://s2.loli.net/2024/07/05/HXvVEZp4d2WtxIj.jpg",
],
},
},
articleContent: {
prefixIcon: { // 文章标题前的图标
enable: true,
// options:{ // 替换图标不知道为什么有问题,等修复
// link: 'https://at.alicdn.com/t/c/font_4611513_d9x3wa98yhn.js',
// iconfontArr: ['hebaodan'],
// }
}
},
animate: {
homeBannerTitle: { // banner名字特效
enable: true
},
// articleTitle: { // 文章标题名动效
// enable: true
// },
// articleBanner: {
// enable: true
// },
bannerImages: { //图片自己切换
enable: true,
options:{
current: -1,
}
},
backgroundMouse: { // 背景横幅,跟随鼠标
enable: true
},
},
}
</script>
<!-- 插件文件引入 -->
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@2.1.5/dist/simpleMemory.js" defer></script>
<!-- 也可以使用下面的地址进行加载,CDN 使用哪家,大家自己权衡 -->
<!-- <script src="https://jsd.cdn.zzko.cn/gh/BNDong/Cnblogs-Theme-SimpleMemory@{VERSION}/dist/simpleMemory.js" defer></script> -->
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)