如何给你cnblogs博客园换上一套好看的皮肤，玩博客园的朋友必备!

公众号关注「WeiyiGeek」

将我设为「特别关注」，每天带你玩转网络安全运维、应用开发、物联网IOT学习！

图片

本章目录：

  • 0x01 前身简述

  • 0x02 皮肤设置

  • 0x03 开发配置

  • 环境依赖

  • 开源项目

  • 0x04 文章补充

原文地址: https://www.cnblogs.com/WeiyiGeek

0x01 前身简述

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

图片

参考项目地址:

  • 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.

图片

步骤 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】

更多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 权限请先开通，理由填“适度美化博客”）

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

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

0x03 开发配置

环境依赖

  • Git ：https://dl.softmgr.qq.com/original/Development/Git-2.29.2.2-64-bit.exe

  • Node ： https://nodejs.org/dist/v12.18.3/node-v12.18.3-x64.msi

  • VScode : https://aka.ms/win32-x64-user-stable

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

开源项目

描述: 此处可以采用【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  | |-- | | |-- index.css  | | |-- index.js

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

module.exports = {-   themeName: 'xxx',+   themeName: '',		// ...}# 运行后,你将在浏览器中看到如下导航页面，点击任意按钮即可跳转到对应页面。npm run dev

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

步骤 06.编写脚本, 打开 /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/.js 即是你创建的皮肤打包后的的文件

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

0x04 文章补充

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

本文至此完毕，更多技术文章，尽情期待下一章节！

原文地址: https://www.cnblogs.com/WeiyiGeek

欢迎各位志同道合的朋友一起学习交流，如文章有误请在下方留下您宝贵的经验知识，个人邮箱地址【master#weiyigeek.top】或者个人公众号【WeiyiGeek】联系我。

更多文章来源于【WeiyiGeek Blog 个人博客 - 为了能到远方，脚下的每一步都不能少 】

个人主页: 【 https://weiyigeek.top】

博客地址: 【 https://blog.weiyigeek.top 】

专栏书写不易，如果您觉得这个专栏还不错的，请给这篇专栏 【点个赞、投个币、收个藏、关个注，转个发，留个言】(人间六大情)，这将对我的肯定，谢谢！。

图片

  • echo  "【点个赞】，动动你那粗壮的拇指或者芊芊玉手，亲！"

  • printf("%s", "【投个币】，万水千山总是情，投个硬币行不行，亲！")

  • fmt.Printf("【收个藏】，阅后即焚不吃灰，亲！")

  • console.info("【转个发】，让更多的志同道合的朋友一起学习交流，亲！")

  • System.out.println("【关个注】，后续浏览查看不迷路哟，亲！")

  • cout << "【留个言】，文章写得好不好、有没有错误，一定要留言哟，亲! " << endl;

图片 往期相关文章图片

Hexo博客框架初识入门到进阶配置

Hexo博客优化访问速度与持续集成和部署实践

1.还不会部署高可用的kubernetes集群?看我手把手教你使用二进制部署v1.23.6的K8S集群实践(上)

2.还不会部署高可用的kubernetes集群?看我手把手教你使用二进制部署v1.23.6的K8S集群实践(下)

图片

WeiyiGeek

Always keep a beginner's mind, don't forget the beginner's mind. Blog :【https://weiyigeek.top】

176篇原创内容

公众号

图片

更多网络安全、系统运维、应用开发、全栈文章，尽在【个人博客 - https://blog.weiyigeek.top】站点，谢谢支持！

个人博客文章

相关

标签