我的博客园美化记录

博客园主题美化优化指南

博客园主题美化完整指南：打造个性化博客界面

基于大佬 huxingxin 的原创作品优化，仅修改了个别样式

效果预览

暗色主题效果

亮色主题效果

快速开始

第一步：基础配置

1. 选择自定义皮肤

   • 进入博客园后台 → 设置 → 博客皮肤
   • 在皮肤选择框中直接输入: Custom
     

2. 配置代码高亮引擎

   • 进入设置 → 代码高亮
   • 选择渲染引擎: highlight.js
     

第二步：代码美化配置

1. 页面定制CSS代码

将以下CSS代码复制到"页面定制CSS代码"区域：

/* ================================
   加载动画容器
   覆盖整个屏幕，阻止用户交互
   ================================ */
#loading {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    background-color: #f4f5f5;
    pointer-events: none;
}

/* ================================
   加载动画核心元素
   包含主要的动画效果
   ================================ */
.loader-inner {
    will-change: transform;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    background-color: #3742fa;
    border-radius: 50%;
    animation: scaleout 0.6s infinite ease-in-out forwards;
    text-indent: -99999px;
    z-index: 999991;
}

/* ================================
   缩放淡出动画关键帧定义
   控制动画的整个过程
   ================================ */
@keyframes scaleout {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

2. 页首HTML代码

将以下HTML代码复制到"页首HTML代码"区域：

<div id="loading">
    <div class="loader-inner">加载中...</div>
</div>

3. 页脚HTML代码

将以下代码复制到"页脚HTML代码"区域：

<!-- 引入 awescnb 美化框架 -->
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>

<script>
// 配置 awescnb 框架
const opts = {
    // 主题配置
    theme: {
        name: 'geek',
        url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
        log: true,
        avatar: "替换为你的头像URL", // 上传到博客园后获取链接
        headerBackground: "替换为你的背景图URL", // 推荐尺寸：1920×400
    },
    
    // 代码高亮功能
    highLight: {
        enable: true,
    },
    
    // 代码行号显示
    lineNumbers: {
        enable: true,
    },
    
    // GitHub 链接
    github: {
        enable: true,
        url: "替换为你的GitHub地址",
    },
    
    // 点击特效
    click: {
        enable: true,
    },
    
    // Emoji 表情支持
    emoji: {
        enable: true,
    },
    
    // 暗黑模式
    darkMode: {
        enable: true,
        autoDark: true,
        autoLight: false,
    },
    
    // 个性签名
    signature: {
        enable: true,
        contents: [
            "<b>为了能到远方，脚下的每一步都不能少。</b>",
            "Always keep a beginner's mind, don't forget the beginner's mind.",
            "<b>花开堪折直须折，莫待无花空折枝。</b>",
            "<b>一件事情不付诸实践，即使在心里想一万遍也是徒然。</b>",
            // 更多个性签名...
        ],
    },
    
    // 文章签名（每篇文章末尾显示）
    postSignature: {
        enable: true,
        enableLicense: true,
        content: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
    }
};

// 初始化 awescnb 框架
$.awesCnb(opts);
</script>

<!-- 移除联系菜单项 -->
<script>
$(document).ready(function() {
    var contactItem = $('span.nav-item-text:contains("联系")').closest('li');
    if (contactItem.length) {
        contactItem.remove();
    }
});
</script>

第三步：个性化设置

进入博客园后台 → 设置，根据个人需求配置以下选项：

推荐配置：

• 博客标题：你的个性签名或昵称
• 博客子标题：简短描述或座右铭
• 页面定制：禁用模板默认CSS
• 博客公告：个性化欢迎语

配置说明

必填项替换

在使用前，请务必将以下占位符替换为你的实际信息：

1. 头像URL：将头像上传到博客园，复制图片地址替换 avatar 配置
2. 背景图URL：选择喜欢的背景图片，推荐尺寸1920×400像素
3. GitHub地址：替换为你的GitHub主页链接

常见问题

Q: 背景图显示异常？
A: 确认图片URL可访问，推荐使用图床或博客园自带的文件上传功能。

Q: 想修改个性签名内容？
A: 在 signature.contents 数组中添加或修改你喜欢的句子。

进阶定制

如需进一步个性化，可以：

• 修改CSS中的颜色值匹配你的品牌色
• 调整动画时长和效果
• 添加自定义字体
• 集成其他第三方服务

---

如有问题欢迎在评论区留言，我会及时回复解答。