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

丿似锦

已于 2024-08-09 10:51:39 修改

阅读量413

点赞数 11

文章标签：交互

于 2024-08-09 08:00:00 首次发布

本文链接：https://blog.csdn.net/zk_tww/article/details/141030258

版权

简介

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: 'https://img2024.cnblogs.com/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>