博客园自定义皮肤工具推荐:awescnb

简介

awescnb是一个用于博客园（Cnblogs）的自定义皮肤和功能增强插件。它允许用户通过简单的配置来自定义其博客的外观和增加一些额外的功能。下面是对awescnb的简要介绍：
功能特点：
自定义皮肤：用户可以选择不同的皮肤主题，包括背景颜色、字体样式等，以个性化他们的博客页面。
扩展功能：除了皮肤自定义外，还可以添加一些实用功能，如导航条、自定义菜单、社交图标等。
外部 CSS 和 JavaScript：允许用户引入外部CSS文件来自定义样式，以及引入JavaScript脚本来添加动态效果。
响应式设计：确保博客在不同设备上都能良好显示。

效果展示

这里以geek皮肤为例

官方文档

• 安装皮肤
• 皮肤列表
• 配置列表
• 参考配置
• 常见问题

使用教程

1.个人博客首页 -> 管理 -> 设置

2.博客皮肤为Custom

3.申请js权限

理由可以为：适度美化博客

4.页面定制 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;}}

5.页首 HTML 代码

<div id="loading"><div class="loader-inner"></div></div>

6.页脚 HTML 代码

js权限需开通，参见上述第3步

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
  const config = {
    theme: {
      name: 'geek',
      avatar: 'https://pic.cnblogs.com/avatar/1289898/20240731144914.png',
      headerBackground: '/i/l/?n=24&i=blog/1289898/202408/1289898-20240807172815249-1939370043.png'
    },
    // 评论输入框表情
    emoji: {
      enable: true,
    },
    // 个性签名
    signature: {
      enable: true,
      contents: ["技术之海一望无际， 记忆长流永无止境"],
    },
    links: [
        {
          name: 'CSDN',
          link: 'https://blog.csdn.net/zk_tww',
        },
        {
            name: '皮肤配置',
            link: 'https://www.yuque.com/awescnb',
        },
    ],
  }
  $.awesCnb(config)
</script>

1.这里选择的皮肤为geek
2.头像avatar链接获取：

博客管理右上角昵称 -> 进入个人主页

右键头像 -> 复制图片地址

3.背景图headerBackground设置：打开新随笔(建议Markdown) -> 上传图片 -> 获取图片链接

7.保存

常见问题

1.文章目录无法正常展示

标题需使用正确标题格式，文章编辑建议采用Markdown编辑器

2.关注数、粉丝数等未正常展示

管理 -> 选项 -> 侧边栏控件
勾选公告

3.每页展示最后一行无法铺满

管理 -> 选项
首页与RSS每页显示选择3的倍数，如:15

4.部分配置项无法生效

请前往官方皮肤列表查看所需皮肤是否支持该配置

结束