Cnblogs博客皮肤配置与分享记录

[TOC]

0x01 前身简述

描述: 博客园第三方主题数不胜数, 或者你也为你的博客园作了一些优化, 下面是本博主收集整理并使用的开源的博客园皮肤, 例如本博主当前博客匹配。

WeiyiGeek.我的博客园

参考项目地址:

• https://github.com/cnbloglabs/theme-geek

---

0x02 皮肤设置

简单说明 描述: 此处以 cnbloglabs 提供的 acnb-theme-geek (https://github.com/cnbloglabs/theme-geek) 博客园项目皮肤为例进行讲解.

操作步骤 步骤 01.打开你的博客首页 -> 管理 -> 设置 或者 (https://i.cnblogs.com/settings)

步骤 02.设置博客皮肤为“Custom”, 并将代码高亮渲染引擎选择highlight.js，取消勾选显示行号，主题样式选择默认的 cnblogs.

WeiyiGeek.博客皮肤基础设置

步骤 03.在页面定制CSS, 勾选禁用默认 CSS 样式 。

步骤 04.使用 loading 显示,我们需要配置【页首 HTML】与【页面定制 CSS】

• a.复制如下代码粘贴到【页面定制 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;}}

• b.复制如下代码粘贴到【页首 HTML】

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

更多Loadomh参考: https://www.yuque.com/awescnb/user/fphby0

步骤 05.设置博客侧边栏公共公告,此处采用markdown格式

欢迎各位**博客园**好友来访，博主是一个从事网络安全运维开发行业（专业搬砖），爱学习新技术，爱分享技术、爱交流的（三爱青年），欢迎访问博主个人博客【[https://weiyigeek.top](https://weiyigeek.top "https://weiyigeek.top")】, 以及公众号 【[WeiyiGeek](https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek/res/wechat-gzh.jpg "WeiyiGeek")】，更多文章会在上面及时发布。

![公众号](https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek/res/wechat-gzh.jpg)

步骤 05.复制如下代码粘贴到【页脚 HTML 代码】（如没开通 js 权限请先开通，理由填“适度美化博客”）

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
 const opts = {
    theme: {
      name: 'geek',
      url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
      log: true,
      avatar: "https://pic.cnblogs.com/avatar/2176087/20220517180403.png",
      headerBackground:
        "https://images.cnblogs.com/cnblogs_com/guangzan/1894231/o_201205070714banner1.jpg",
    },
    highLight: {
      enable: true,
    },
    lineNumbers: {
      enable: true,
    },
    github: {
      enable: true,
      url: "https://github.com/weiyigeek",
    },
    gitee: {
      enable: true,
      url: 'https://gitee.com/weiyigeek',
    },
    click: {
      enable: true,
    },
    emoji: {
      enable: true,
    },
    darkMode: {
      enable: true,
      autoDark: false,
      autoLight: false,
    },
    qrcode: {
      enable: true,
      img: 'https://weiyigeek.top/img/wechat-search.png',
      desc: 'WeiyiGeek 公众号',
    },
    donation: {
      enable: true,
      qrcodes: ['https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek.github.io/img/reward-alipay.png'],
    },
    signature: {
      enable: true,
      contents: [
        "<b>为了能到远方，脚下的每一步都不能少.</b>",
        "Always keep a beginner's mind, don't forget the beginner's mind.",
        "<b>花开堪折直须折，莫待无花空折枝。</b>",
        "<b>一件事情不付诸实践，即使在心里想一万遍也是徒然。</b>",
        "<b>一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。</b>",
        "<b>
原文地址：https://cloud.tencent.com/developer/article/2129895
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。