博客园博客美化记录

博客园博客美化记录（代码部分来源于网络，没事DeepSeek没说是谁的，但能确定一个）

从零开始，打造属于自己的博客园主题

前言

博客园（Cnblogs）作为国内老牌技术博客平台，最大的优势之一就是支持高度自定义。你可以通过 CSS 和 JavaScript 自由修改博客外观和交互，打造一个独一无二的个人空间。

最近花了一些时间对博客进行了全面美化，效果还不错。在此把完整配置过程记录下来，既是备忘，也分享给有需要的朋友。

最终效果预览： https://www.cnblogs.com/phklsa/

一、主题选择

博客园官方提供多套皮肤，但最灵活的方案是使用第三方主题。我选择的是 BNDong 开发的 SimpleMemory 主题，配置项丰富，文档完善。

引入方式： 在后台“设置”->“页脚HTML代码”中添加：

<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.4/dist/simpleMemory.js" defer></script>

核心配置统一在 window.cnblogsConfig 对象中完成。

二、基础信息配置

window.cnblogsConfig = {
    info: {
        name: 'PHKLSA',
        startDate: '2026-06-11',
        avatar: 'https://pic.cnblogs.com/avatar/3809347/20260826200843.png',
        blogIcon: 'https://pic.cnblogs.com/avatar/3809347/20260826200843.png'
    },
    // ...
}

字段	说明
`name`	博客显示名称
`startDate`	入园时间（鼠标悬停园龄上查看）
`avatar`	用户头像链接
`blogIcon`	浏览器标签页图标

3.1 背景图

banner: {
    home: {
        background: [
            "https://你的首页背景图.jpg"
        ],
        title: [
            '生活不是等着暴风雨过去，而是学会在雨中起舞。',
            '脚下是荆棘，抬头是星光，我偏要一条路走到天亮。',
            '世界很吵，这里很静。',
            '破局。',
            '万物皆有裂痕，那是光照进来的地方。'
        ]
    },
    article: {
        background: [
            "https://你的文章页背景图.jpg"
        ]
    }
}

3.2 随机标语

title 数组中的句子每次刷新随机展示一条，让首页更有活力。

四、侧边栏配置

sidebar: {
    navList: [
        ['首页', '/', 'icon-blog-solid'],
        ['联系', 'https://msg.cnblogs.com/send/PHKLSA', 'icon-zhifeiji'],
        ['管理', 'https://i.cnblogs.com/', 'icon-setup_fill'],
        ['GitHub', 'https://github.com/sdchiyan123', 'icon-github']
    ],
    infoBackground: 'https://你的侧边栏背景图.jpg',
    titleMsg: 'OJ在此处AFK。'
}

导航列表：覆盖日常高频入口
侧边栏背景：独立配置，告别单调
欢迎语："OJ在此处AFK。" —— OIer 的默契表达

icon 字段可参考 SimpleMemory 官方文档“字体图标库”。

五、自定义 CSS

在“页面定制CSS代码”中补充样式，以下是核心模块：

5.1 手写字体（云峰晶晶体）

@font-face {
    font-family: 'YunFengJingJing';
    src: url('https://github.com/sdchiyan123/ttf-or-ttc/raw/refs/heads/main/云峰晶晶体.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

应用到主要元素：

body {
    font-family: "YunFengJingJing", "Microsoft Yahei", sans-serif;
}
.postTitle a:link {
    font-family: "YunFengJingJing", "Open Sans", sans-serif;
}
#sideBar a {
    font-family: "YunFengJingJing", "Long Cang", sans-serif;
}
.page-title {
    font-family: "YunFengJingJing", "Long Cang", cursive;
}

5.2 黑幕效果（Bilibili 风格）

.heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
    color: white !important;
}

5.3 推荐按钮美化

#div_digg {
    position: fixed;
    bottom: 10px;
    width: 60px;
    right: 50px;
    box-shadow: 0 0 6px #0000FF;
    border: 2px solid #800080;
    padding: 4px;
    background-color: #fff;
    border-radius: 4px;
}

5.4 隐藏多余元素

#comment_nav, #header, #leftcontentcontainer, #profile_block, #top_nav, .catListTitle {
    display: none !important;
}
#ad_c1, #ad_c2, #ad_t1, #ad_t2, #cnblogs_c1, #cnblogs_c2 {
    display: none;
}

5.5 滚动条美化

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
::-webkit-scrollbar-thumb {
    background-color: #999;
    background-clip: padding-box;
    min-height: 100px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

六、鼠标点击特效（烟花）

<script src="https://files.cnblogs.com/files/wkfvawl/mouse-click.js"></script>

点击页面任意位置绽放五彩烟花，增强互动感。

需要先在博客园后台申请 JS 权限。

七、背景音乐播放器（APlayer）

<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/blogs/693306/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/blogs/693306/APlayer.min.js"></script>

<div id="aplayer"></div>

<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: true,
    volume: 0.2,
    loop: 'all',
    audio: [{
        name: 'Komorebi',
        artist: 'm-taku',
        url: 'https://你的音乐链接.mp3',
        cover: 'https://你的封面图链接.jpg'
    }]
});
</script>

参数	说明
`fixed: true`	吸底模式
`autoplay: true`	自动播放（需用户交互）
`volume: 0.2`	默认音量 20%
`loop: 'all'`	列表循环

八、注意事项

JS 权限：使用特效前需在后台申请（设置 -> 申请JS权限）
代码位置：CSS 放“页面定制CSS代码”，HTML/JS 放“页脚HTML代码”
缓存问题：修改后按 Ctrl+F5 强制刷新
图片资源：使用 HTTPS 直链，确保长期有效
自动播放：浏览器策略限制，需用户点击后才可播放

九、完整代码汇总

以下是博客美化所用到的全部代码，按功能分类整理，方便直接复制使用。

9.1 页脚HTML代码（完整配置）

将以下代码完整复制到博客园后台 设置 → 页脚HTML代码：

<script type="text/javascript">
window.cnblogsConfig = {
    info: {
        name: 'PHKLSA',
        startDate: '2026-06-11',
        avatar: 'https://pic.cnblogs.com/avatar/3809347/20260826200843.png',
        blogIcon: 'https://pic.cnblogs.com/avatar/3809347/20260826200843.png'
    },
    sidebar: {
        customList: {},
        navList: [
            ['首页', '/', 'icon-blog-solid'],
            ['联系', 'https://msg.cnblogs.com/send/PHKLSA', 'icon-zhifeiji'],
            ['管理', 'https://i.cnblogs.com/', 'icon-setup_fill'],
            ['GitHub', 'https://github.com/sdchiyan123', 'icon-github']
        ],
        infoBackground: 'https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEaAAGbapBJQnQCf7573F7x5wL3_AyisjgAAiYwAAKpuYFUs5hbUzntSqw9BA.jpg',
        titleMsg: 'OJ在此处AFK。'
    },
    banner: {
        home: {
            background: [
                "https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEZ_9pqkDybTJe-B0rhXEmktdqlD1gAAXwAAl0vAAKpuYFU9adIl3Xm2849BA.jpg"
            ],
            title: [
                '生活不是等着暴风雨过去，而是学会在雨中起舞。',
                '脚下是荆棘，抬头是星光，我偏要一条路走到天亮。',
                '世界很吵，这里很静。',
                '破局。',
                '万物皆有裂痕，那是光照进来的地方。'
            ]
        },
        article: {
            background: [
                "https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEZ_7BqkDrqPJT-ccFLQJQJkI67Z97agAACLy8AAqm5gVSZYsjIWIKCAj0E.jpg"
            ]
        }
    },
    links: { page: [] },
    loading: {
        rebound: { tension: 16, friction: 5 },
        spinner: {
            id: 'spinner',
            radius: 90,
            sides: 3,
            depth: 4,
            colors: {
                background: '#f0f0f0',
                stroke: '#272633',
                base: null,
                child: '#272633'
            },
            alwaysForward: true,
            restAt: 0.5,
            renderBase: false
        }
    },
    progressBar: { color: '#77b6ff' },
    title: {
        onblur: '下次再见～',
        onblurTime: 500,
        focus: '欢迎回来～',
        focusTime: 1000
    },
    footer: {
        style: 0,
        text: {
            left: '© 2026 PHKLSA',
            right: 'Powered by SimpleMemory',
            iconFont: { icon: "icon-xl", color: "red", fontSize: "16px" }
        }
    },
    rtMenu: { downScrollDom: '#blog_post_info_block' },
    switchDayNight: {
        enable: true,
        auto: { enable: false }
    },
    animate: {
        homeBannerTitle: { enable: true },
        homeBanner: {
            enable: true,
            options: {
                radius: 15,
                density: 0.2,
                color: 'rgba(255,255,255, .2)',
                clearOffset: 0.3
            }
        },
        articleTitle: { enable: true },
        articleBanner: { enable: true },
        background: {
            enable: false,
            options: {
                colorSaturation: "60%",
                colorBrightness: "50%",
                colorAlpha: 0.5,
                colorCycleSpeed: 5,
                verticalPosition: "random",
                horizontalSpeed: 200,
                ribbonCount: 3,
                strokeSize: 0,
                parallaxAmount: -0.2,
                animateSections: true
            }
        },
        bannerImages: {
            enable: true,
            options: { time: 15000 }
        },
        backgroundMouse: { enable: true },
        mouse: {
            enable: false,
            options: { size: 8, sizeF: 36 }
        }
    },
    code: {
        type: 'hljs',
        options: {
            maxHeight: '70vh',
            line: true,
            macStyle: true
        }
    },
    articleDirectory: {
        position: 'right',
        minBodyWeight: 1400,
        autoWidthScroll: true
    },
    articleSuffix: {
        imgUrl: 'https://pic.cnblogs.com/avatar/3809347/20260826200843.png',
        aboutHtml: 'PHKLSA专注于WA，从不改变',
        copyrightHtml: '转载请注明出处'
    }
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.4/dist/simpleMemory.js" defer></script>

<!-- 鼠标点击烟花特效 -->
<script src="https://files.cnblogs.com/files/wkfvawl/mouse-click.js"></script>

<!-- 背景音乐播放器 -->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/blogs/693306/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/blogs/693306/APlayer.min.js"></script>
<div id="aplayer"></div>
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: true,
    volume: 0.2,
    loop: 'all',
    audio: [{
        name: 'Komorebi',
        artist: 'm-taku',
        url: 'https://videotourl.com/audio/1787924725620-4487dd37-90b8-47c2-8d8b-4ecb5f68de5e.mp3',
        cover: ''
    }]
});
</script>

9.2 页面定制CSS代码

将以下代码复制到博客园后台 设置 → 页面定制CSS代码：

/*
Original Author: PHKLSA
Version: 6.0
Latest Update: 2026/08/28
Updated Content:
1. 适配 SimpleMemory 主题 v2.1.4
2. 配置博客基础信息（名称、头像、入园时间等）
3. 设置 banner 背景图及首页标语
4. 开启首页 banner 动效
5. 配置侧边栏导航及背景
6. 设置页脚样式及版权信息
7. 调整代码框样式（行号）

欢迎访问我的博客：https://www.cnblogs.com/PHKLSA/
如有建议，欢迎私信交流：https://msg.cnblogs.com/send/PHKLSA

—— PHKLSA
*/

@font-face {
    font-family: 'YunFengJingJing';
    src: url('https://github.com/sdchiyan123/ttf-or-ttc/raw/refs/heads/main/%E4%BA%91%E5%B3%B0%E6%99%B6%E6%99%B6%E4%BD%93.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== 全局字体 ===== */
body {
    font-family: "YunFengJingJing", "Microsoft Yahei", sans-serif;
}
.postTitle a:link {
    font-family: "YunFengJingJing", "Open Sans", sans-serif;
}
#sideBar a {
    font-family: "YunFengJingJing", "Long Cang", sans-serif;
}
.page-title {
    font-family: "YunFengJingJing", "Long Cang", cursive;
}
#cnblogs_post_body h1 {
    font-family: "YunFengJingJing", "Long Cang", cursive;
}
.entrylistItemPostDesc, .sb-title {
    font-family: "YunFengJingJing", "Long Cang", sans-serif;
}
.c_b_p_desc {
    font-family: "YunFengJingJing", "Apple Chancery", serif;
}
.page-description {
    font-size: 3rem;
    font-family: "YunFengJingJing", "Long Cang", cursive;
}

/* ===== 黑幕效果 ===== */
.heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
    color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
    color: lightblue !important;
}

/* ===== 推荐按钮美化 ===== */
#div_digg {
    position: fixed;
    bottom: 10px;
    width: 60px;
    right: 50px;
    box-shadow: 0 0 6px #0000FF;
    border: 2px solid #800080;
    padding: 4px;
    background-color: #fff;
    border-radius: 4px;
}
.buryit {
    opacity: 0;
    display: none;
}
.diggit {
    margin-left: 30%;
}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
::-webkit-scrollbar-thumb {
    background-color: #999;
    background-clip: padding-box;
    min-height: 100px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* ===== 隐藏多余元素 ===== */
#comment_nav, #header, #leftcontentcontainer, #profile_block, #top_nav, .catListTitle {
    display: none !important;
}
#ad_c1, #ad_c2, #ad_t1, #ad_t2, #cnblogs_c1, #cnblogs_c2 {
    display: none;
}
#cnblogs_ch {
    display: none !important;
}
.ad_text_commentbox {
    display: none !important;
}
.c_ad_block, .under-post-card {
    display: none !important;
}

/* ===== 隐藏鼠标（默认注释，取消注释即可启用） ===== */
/* html { cursor: none; } */

9.3 代码放置位置速查表

代码类型	放置位置
`window.cnblogsConfig` 配置	`设置` → `页脚HTML代码`
SimpleMemory 主题 JS 引入	`设置` → `页脚HTML代码`
鼠标烟花特效	`设置` → `页脚HTML代码`
音乐播放器	`设置` → `页脚HTML代码`
自定义 CSS 样式	`设置` → `页面定制CSS代码`
字体文件	通过 CSS `@font-face` 引用

十、效果速览

模块	效果
首页 Banner	随机标语 + 背景图
手写字体	云峰晶晶体，风格统一
侧边栏	导航清晰，欢迎语 `OJ在此处AFK。`
音乐播放器	底部吸顶，随时控制
鼠标烟花	点击绽放，互动趣味

十一、后续可探索的方向

自定义鼠标样式：替换指针图片
友链配置：侧边栏或独立页面
文章目录：调整位置和样式
夜间模式：进一步调色
加载动画：配置 loading 效果

结语

博客美化并不复杂，关键在于耐心调试和细节打磨。希望这篇文章能给你一些灵感，也欢迎在评论区交流心得。

博客地址： https://www.cnblogs.com/phklsa/

—— PHKLSA, 2026.08.28

提示：本文由DeepSeek创作，本人贡献绝对少于DeepSeek。

posted @ 2026-08-28 22:16 PHKLSA 阅读(7) 评论(0) 收藏举报

刷新页面返回顶部

PHKLSA