[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】代码语言：javascript复制#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】代码语言：javascript复制
步骤 05.设置博客侧边栏公共公告,此处采用markdown格式
代码语言：javascript复制欢迎各位**博客园**好友来访，博主是一个从事网络安全运维开发行业（专业搬砖），爱学习新技术，爱分享技术、爱交流的（三爱青年），欢迎访问博主个人博客【[https://weiyigeek.top](https://weiyigeek.top "https://weiyigeek.top")】, 以及公众号 【[WeiyiGeek](https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek/res/wechat-gzh.jpg "WeiyiGeek")】，更多文章会在上面及时发布。
步骤 05.复制如下代码粘贴到【页脚 HTML 代码】（如没开通 js 权限请先开通，理由填“适度美化博客”）
代码语言：javascript复制
步骤 06.最后点击保存即可。
温馨提示: 更多皮肤可以参照 【https://www.yuque.com/awescnb/user/kyi19z】使用方法就那些调用。
----0x03 开发配置环境依赖Git ：https://dl.softmgr.qq.com/original/Development/Git-2.29.2.2-64-bit.exeNode ： https://nodejs.org/dist/v12.18.3/node-v12.18.3-x64.msiVScode : https://aka.ms/win32-x64-user-stable温馨提示: 可根据环境需要下载最新版本。
开源项目描述: 此处可以采用【guangzan大佬提供的示例】（https://github.com/cnbloglabs/theme-geek.git）克隆 theme-geek 项目代码。
步骤 01.项目拉取
代码语言：javascript复制git clone https://gitee.com/guangzan/awescnb.git步骤 02.启动 vscode 或其他编辑器打开刚刚克隆的目录, 按下 Ctrl + ` 打开终端，输入以下命令安装依赖
代码语言：javascript复制npm install步骤 03.创建目录,复制目录 /src/themes/demo 到 /src/themes 下，并重命名为你想要的名字，例如：’‘。此时得到
代码语言：javascript复制.
|-- themes
| |--
| | |-- index.css
| | |-- index.js步骤 04.在启动项目之前，打开 /awescnb.config.js，并在终端运行如下命令，即可自动打开浏览
代码语言：javascript复制module.exports = {
- themeName: 'xxx',
+ themeName: '
// ...
}
# 运行后,你将在浏览器中看到如下导航页面，点击任意按钮即可跳转到对应页面。
npm run dev步骤 05.编写样式, 打开
步骤 06.编写脚本, 打开
代码语言：javascript复制import './index.css'
import { createTheme } from 'awescnb'
const theme = createTheme()
console.log("Hi!") // 在这里编写任意 JavaScript步骤 07. 导入插件下面，给我们的皮肤添加一个【点击特效】插件
代码语言：javascript复制import './index.css'
import { createTheme } from 'awescnb'
+ import { clickEffect } from 'plugins' // 引入点击特效插件
const theme = createTheme()
console.log("Hi!") // 在这里编写任意 JavaScript
+ theme.use(clickEffect) // 注册插件步骤 08.构建皮肤，运行如下命令将会在项目根目录生成一个 dist 文件夹
代码语言：javascript复制npm run build温馨提示: dist 文件夹放置了所有皮肤和你刚刚构建的皮肤，dist/
步骤 09.最终我们可以在博客园中使用构建的js进行安装。
代码语言：javascript复制
0x04 文章补充1.使用过的 cnblogs-theme-silence cnblogs皮肤
代码语言：javascript复制