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

全栈工程师修炼指南

发布于 2022-09-29 19:47:50

5560

发布于 2022-09-29 19:47:50

文章被收录于专栏：全栈工程师修炼之路

[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>💡 有理想，但不妄想， 💭 有希望，但不奢望， 🐬 有作为，但不妄为。</b>",
        "我们登上的并非我们所选择的舞台，演出并非我们所选择的剧本。-- 爱比克泰德 (古罗马哲学家) 。",
        "<b>不闻不若闻之，闻之不若见之，见之不若知之，知之不若行之，学至于行之而止矣 -- 荀子</b>",
        "<b>闻见知行。</b>",
        "<b>开头很简单，最难的是坚持。</b>",
        "<b>拥有知识的错觉，比没有知识更可怕!</b>",
        "<b>如果你只做能力范围之内的事，你就永远不会有进步!</b>",
        "<b>没有落魄的行业，只有落魄的人!</b>",
        "<b>业精于勤荒于嬉，行成于思毁于随! </b>",
        "<b>路漫漫其修远兮，吾将上下而求索。</b>",
        "<b>console.log('https://blog.weiyigeek.top');</b>",
      ],
    },
    postSignature: {
      enable: true,
      enableLicense: true,
      content: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/','欢迎访问我的个人博客首页【https://weiyigeek.top】，更多干货尽在其中！'],
    },
    links: {
      enable: true,
      value: [
        {
          name: "🍞 个人主页",
          link: "https://www.weiyigeek.top",
        },
        {
          name: "🎨 博客主页",
          link: "https://blog.weiyigeek.top",
        },
        {
          name: "👨‍💻 博主介绍",
          link: "https://blog.weiyigeek.top/about/index.html",
        },
        {
          name: "🍻 微信公众号",
          link: "https://weiyigeek.top/img/wechat-search.png",
        },
        {
          name: "🧀 Bilibili",
          link: "https://space.bilibili.com/385802642/article",
        },
        {
          name: "🍪 今日头条",
          link: "https://www.toutiao.com/c/user/token/MS4wLjABAAAAqcPSoMqfctaEqJpGSF775eeCjWkrop4AOyLITdMx-L78F5iXzfQcSRM5sY4dq3wR/?source=author_home",
        },
        {
          name: "🦁 百家号",
          link: "https://author.baidu.com/home?from=blog&app_id=1726736601523415",
        }
      ],
    },
  };
  $.awesCnb(opts);
</script>

步骤 06.最后点击保存即可。

温馨提示: 更多皮肤可以参照【https://www.yuque.com/awescnb/user/kyi19z】使用方法就那些调用。

0x03 开发配置

环境依赖

温馨提示: 可根据环境需要下载最新版本。

开源项目

描述: 此处可以采用【guangzan大佬提供的示例】（https://github.com/cnbloglabs/theme-geek.git）克隆 theme-geek 项目代码。

步骤 01.项目拉取

git clone https://gitee.com/guangzan/awescnb.git

步骤 02.启动 vscode 或其他编辑器打开刚刚克隆的目录, 按下 Ctrl + ` 打开终端，输入以下命令安装依赖

npm install

步骤 03.创建目录,复制目录 /src/themes/demo 到 /src/themes 下，并重命名为你想要的名字，例如：’‘。此时得到

.
|-- themes  
| |-- <themename>
| | |-- index.css  
| | |-- index.js

步骤 04.在启动项目之前，打开 /awescnb.config.js，并在终端运行如下命令，即可自动打开浏览

module.exports = {
-   themeName: 'xxx',
+   themeName: '<themename>',
    // ...
}

# 运行后,你将在浏览器中看到如下导航页面，点击任意按钮即可跳转到对应页面。
npm run dev

步骤 05.编写样式, 打开 <themename>/index.css，编写任何 CSS 代码。

步骤 06.编写脚本, 打开 <themename>/index.js

import './index.css'
import { createTheme } from 'awescnb'

const theme = createTheme()

console.log("Hi!")  // 在这里编写任意 JavaScript

步骤 07. 导入插件下面，给我们的皮肤添加一个【点击特效】插件

import './index.css'
import { createTheme } from 'awescnb'
+ import { clickEffect } from 'plugins' // 引入点击特效插件

const theme = createTheme()

console.log("Hi!")  // 在这里编写任意 JavaScript

+ theme.use(clickEffect) // 注册插件

步骤 08.构建皮肤，运行如下命令将会在项目根目录生成一个 dist 文件夹

npm run build

温馨提示: dist 文件夹放置了所有皮肤和你刚刚构建的皮肤，dist/<themename>.js 即是你创建的皮肤打包后的的文件

步骤 09.最终我们可以在博客园中使用构建的js进行安装。

<script>// 打包后的 js代码</script>
<script>$.awesCnb({})</script>

0x04 文章补充

1.使用过的 cnblogs-theme-silence cnblogs皮肤

<script>
  window.$silence = {
    defaultMode: 'auto',
    defaultTheme: 'a',
    showNavAdmin: false,
    hljsln: false,
    catalog: {
        enable: true,
        index: true,
        active: true,
        levels: ['h2', 'h3', 'h4']
    },
    favicon: 'https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek/favicon.ico',
    avatar: 'https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek.github.io/img/avatar.png',
    github: 'https://github.com/weiyigeek',
    navbars: [
      {
        title: '个人主页',
        url: 'https://www.weiyigeek.top/'
      },
      {
        title: '博客主页',
        url: 'https://blog.weiyigeek.top/'
      },
      {
      title: '文章标签',
      url: 'https://blog.weiyigeek.top/tags/'
      }, {
        title: '其它链接',
        chilren: [,{
            title: 'Github',
            target: '_blank',
            url: 'https://github.com/WeiyiGeek',
        },{
            title: '微信公众号',
            target: '_blank',
            url: 'https://cdn.jsdelivr.net/gh/WeiyiGeek/WeiyiGeek/res//wechat-gzh.jpg',
        }, {
            title: 'Bilibili',
            target: '_blank',
            url: 'https://space.bilibili.com/385802642/article',
        }, {
            title: '知乎',
            target: '_blank',
            url: 'https://www.zhihu.com/people/weiyiSec',
        },
        
        ]
    }],
    signature: {
        enable: true,
        author: 'WeiyiGeek',
        license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
        remark: '欢迎访问我的个人博客首页【https://weiyigeek.top】，更多干货尽在其中！',
    },
    sponsor: {
        enable: true,
        text: '人间三大情，点赞、转发、赞赏...',
        wechat: 'https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek.github.io/img/reward-wechat.png',
        alipay: 'https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek.github.io/img/reward-alipay.png'
    }
  };
</script>
<script src="https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta4/dist/silence.min.js"></script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-17，如有侵权请联系 cloudcommunity@tencent.com 删除

https