源码
博客园博客美化记录
> 从零开始，打造属于自己的博客园主题
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
前言
博客园（Cnblogs）作为国内老牌技术博客平台，最大的优势之一就是支持高度自定义。你可以通过 CSS 和 JavaScript 自由修改博客外观和交互，打造一个独一无二的个人空间。
最近花了一些时间对博客进行了全面美化，效果还不错。在此把完整配置过程记录下来，既是备忘，也分享给有需要的朋友。
最终效果预览： https://www.cnblogs.com/phklsa/
一、主题选择
博客园官方提供多套皮肤，但最灵活的方案是使用第三方主题。我选择的是 BNDong 开发的 SimpleMemory 主题，配置项丰富，文档完善。
引入方式： 在**“设置”->“页脚HTML代码”中添加：
核心配置统一在 window.cnblogsConfig 对象中完成。
二、基础信息配置
字段 说明 name 博客显示名称 startDate 入园时间（鼠标悬停园龄上查看） avatar 用户头像链接 blogIcon 浏览器标签页图标
三、BANNER 背景与标语
3.1 背景图
3.2 随机标语
title 数组中的句子每次刷新随机展示一条，让首页更有活力。
四、侧边栏配置
* 导航列表：覆盖日常高频入口
* 侧边栏背景：独立配置，告别单调
* 欢迎语："OJ在此处AFK。" —— OIer 的默契表达
> icon 字段可参考 SimpleMemory 官方文档“字体图标库”。
五、自定义 CSS
在“页面定制CSS代码”中补充样式，以下是核心模块：
5.1 手写字体（云峰晶晶体）
应用到主要元素：
5.2 **效果（BILIBILI 风格）
5.3 推荐按钮美化
5.4 隐藏多余元素
5.5 滚动条美化
六、鼠标点击特效（烟花）
点击页面任意位置绽放五彩烟花，增强互动感。
> 需要先在博客园**申请 JS 权限。
七、背景音乐播放器（APLAYER）
参数 说明 fixed: true 吸底模式 autoplay: true 自动播放（需用户交互） volume: 0.2 默认音量 20% loop: 'all' 列表循环
八、注意事项
1. JS 权限：使用特效前需在**申请（设置 -> 申请JS权限）
2. 代码位置：CSS 放“页面定制CSS代码”，HTML/JS 放“页脚HTML代码”
3. 缓存问题：修改后按 Ctrl+F5 强制刷新
4. 图片资源：使用 HTTPS 直链，确保长期有效
5. 自动播放：浏览器策略限制，需用户点击后才可播放
九、完整代码汇总
以下是博客美化所用到的全部代码，按功能分类整理，方便直接复制使用。
9.1 页脚HTML代码（完整配置）
将以下代码完整复制到博客园** 设置 → 页脚HTML代码：
9.2 页面定制CSS代码
将以下代码复制到博客园** 设置 → 页面定制CSS代码：
9.3 代码放置位置速查表
代码类型 放置位置 window.cnblogsConfig 配置 设置 → 页脚HTML代码 SimpleMemory 主题 JS 引入 设置 → 页脚HTML代码 鼠标烟花特效 设置 → 页脚HTML代码 音乐播放器 设置 → 页脚HTML代码 自定义 CSS 样式 设置 → 页面定制CSS代码 字体文件 通过 CSS @font-face 引用
十、效果速览
模块 效果 首页 Banner 随机标语 + 背景图 手写字体 云峰晶晶体，风格统一 侧边栏 导航清晰，欢迎语 OJ在此处AFK。 音乐播放器 底部吸顶，随时控制 鼠标烟花 点击绽放，互动趣味
十一、后续可探索的方向
1. 自定义鼠标样式：替换指针图片
2. 友链配置：侧边栏或独立页面
3. 文章目录：调整位置和样式
4. 夜间模式：进一步调色
5. 加载动画：配置 loading 效果
结语
博客美化并不复杂，关键在于耐心调试和细节打磨。希望这篇文章能给你一些灵感，也欢迎在评论区交流心得。
博客地址： https://www.cnblogs.com/phklsa/
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
—— PHKLSA, 2026.08.28
提示：本文由DEEPSEEK创作，本人贡献绝对少于DEEPSEEK。
