第二种主题

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

博客侧边栏公告(支持HTML代码) (支持 JS 代码)

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>$.awesCnb({
    // 基本配置
    theme: {
        name: 'simple',
        color: '#FFB3CC',
        title: '力拔山兮气盖世',
        contentSize: 'mid',
        headerBackground: 'https://i0.hdslb.com/bfs/article/d2745ce0f999eb26209c81338ea9473015e16b46.png@1320w_742h.webp',
        avatar: '//i1.hdslb.com/bfs/face/37114ab1a7374711f2a8af257f2bc81fb2fe2365.jpg',
        favicon: '',
    },
    // 代码高亮
    highLight: {
        type: 'atomOneDark',
        inDarkMode: 'atomOneDark',
    },
    // 代码行号
    lineNumbers: {
        enable: true,
    },
    // github图标
    github: {
        enable: true,
        color: '#ffb3cc',
        url: 'https://github.com/SanForfive',
    },
    // 图片灯箱
    imagebox: {
        enable: true,
    },
    // 文章目录
    catalog: {
        enable: true,
        position: 'left',
    },
    // 返回顶部按钮
    back2top: {
        enable: true,
        type: 'complex',
    },
    // 右下角按钮列表
    tools: {
        enable: true,
        initialOpen: true,
        draggable: false,
    },
    // 点击特效
    click: {
        enable: true,
        auto: false,
        colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
        size: 30,
        maxCount: 15,
    },
    // 评论输入框表情
    emoji: {
        enable: true,
        showRecents: false,
        recentsCount: 20,
        showPreview: false,
        showSearch: false,
    },
    // 暗色模式
    darkMode: {
        enable: true,
        autoDark: true,
        autoLight: true,
    },
    // 弹出公告
    notice: {
        enable: false,
        text: [],
    },
    // 首页列表图
    indexListImg: {
        enable: false,
        imgs: [],
    },
    // 顶部加载进度条
    topProgress: {
        enable: true,
        page: 'all',
        agent: 'pc',
        background: '#FFB3CC',
        height: '5px',
    },
    indexTimeline: {
        enable: false,
    },
signature: {
    enable: true,
    contents: [
    "Hi!我现在呢还是学生,想想初中的同学都结婚生子了,自己,嗯。(啊!!!)本科以及硕士读的都是应用统计 在这里请广大网友多多指教了!如果有机会的话,大家可以一起造轮子  <b style='color:#ff6b81'>HuangB2ydjm</b>.",
    "<b>console.log(new);</b>",
    ],
},
    // 随笔页尾部签名
    postSignature: {
        enable: true,
        content: ['我分享的越多,收获的也就越多'],
        licenseLink: '',
    },
    // 背景图片或颜色
    bodyBackground: {
        enable: false,
        value: '',
        opacity: 1,
        repeat: false,
    },
    // 图表
    charts: {
        enable: true,
        pie: {
            title: 'My skills',
            data: {
                labels: ['JavaScript', 'css', 'Vue', 'React', 'wechat'],
                values: [40, 30, 20, 10, 20],
            },
        },
    },
    // 锁屏
    lock: {
        enable: true,
        background: '',
        strings: ['明日复明日'],
    },
    // footer链接
    links: [
        {
            name: 'HuangB2ydjm',
            link: 'https://www.cnblogs.com/xiaofeisnote/',
        },
        {
        name: 'google',
        link: 'https://www.google.com/',
    },
    {
        name: 'b-站',
        link: 'https://www.bilibili.com/',
    },
    {
        name: 'awescnb-docs',
        link: 'https://guangzan.gitee.io/awescnb-docs/',
    },
    ],
})
</script>


<!-- 第一款自主放置的鼠标点击特效 -->
<script src="https://files.cnblogs.com/files/sanforfive/sketch.js"></script>

页首 HTML 代码

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


<div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div>
<script type="text/javascript" src="https://files.cnblogs.com/files/sanforfive/firework.js"></script>

页脚 HTML 代码

<!-- 标签页图标最上面的图标 -->
<script type="text/javascript" language="javascript">
  //Setting ico for cnblogs
  var linkObject = document.createElement('link');
  linkObject.rel = "shortcut icon";
  linkObject.href = "https://files.cnblogs.com/files/sanforfive/230160135.ico";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

用法:直接复制到相应位置就好了

原文地址:https://www.cnblogs.com/sanforfive/p/13584037.html