博客园美化，更改外部主题，自定义JavaScript

博客园还能美化？

我的博客

在之前，我一直以为博客园他是那种万年不变的老旧风格，看着就有一种年代感，但是，昨天我莫名看到一个项目，我尝试进行了美化后，发现这玩意很好看啊。

如果不看域名，还真看不出这是博客园。

可以预览一下我的博客园，美化后好看很多。

JanYork（小简） - 博客园 (cnblogs.com)

如何美化？

那么我们怎么样可以美化呢？

我来细说一下。

这个项目叫awescnb，我Fork到了文档仓库，有兴趣开发主体的可以看看。

Github：AWESCNB

Gitee：AWESCNB

有兴趣开发自己的博客园主题的可以看看，如果你只需要美化，那就没必要看了。

开启博客园自定义JS权限

📌 仅需几步就能在你的博客园快速安装皮肤。

👾 当你编辑 JavaScript 出现语法错误时，可能无法进入博客了。不用担心，随时都可以 🔗点击此处进入博客后台页面，重新配置。

🎬 如果感到力不从心，作者还精心制作了视频教程供你参考。

开通需要申请，很容易通过，我们申请理由可以填“适度美化博客”这类理由。

完成基础的设置

设置博客皮肤为“Custom”
渲染引擎选择 highlight.js，取消勾选显示行号，主题样式选择默认的 cnblogs

使用 loading

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

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

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

勾选禁用默认 CSS 样式
复制如下代码粘贴到【页脚 HTML 代码】。

 <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
 <script>
   const opts = {
     // 默认启用皮肤 'reacg'
     // 在这里添加自定义配置
     // 当前为全部使用默认配置
   }
   $.awesCnb(opts)
 </script>

保存后他默认为第一个主题。

目前这个项目有10套主题可自由选择了。

修改主题

我们的主题直接修改对应值就可以，我们这里是用的geek主题。

主题介绍

reacg
- 👔 作者：guangzan
- 🎨 默认皮肤
- 🎀 二次元风格
- 🏆 覆盖 99% 的配置选项
- 🌓 深色模式
- 💻 兼容手机、平板、桌面
geek

Geek主题就是目前我这个，可以直接参考我的博客园页面。

👔 作者：guangzan

💻 兼容手机、平板、桌面

🌓 深色模式

bilibili

👔 作者：GShang

🎨 简约风格

view
- 👔 作者：guangzan
- 🎨 简约风格
- 💻 兼容手机、平板、桌面
- 🌓 深色模式
simple

👔 作者：guangzan

🎨 简约风格

💻 兼容手机、平板、桌面

csdn

👔 作者：GShang

💻 兼容手机、平板、桌面

element
- 👔 作者：GShang
- 🎨 Element UI 风格
bilibiliv1

👔 作者：GShang

🎨 简约风格

silence

👔 作者：esofar

💻 兼容: 手机、桌面

acg

👔 作者：guangzan

🎀 二次元风格

❌ 不再维护，会映射到皮肤 reacg

基础配置

属性	描述	值类型	默认值	可选值
name	要使用的皮肤	String	'reacg'	参考所有皮肤
color	全局主题色	String	跟随皮肤	-
avatar	头像图片链接	String	随机头像	-
title	网站标题	String	-	-
favicon	网站图标url	String	-	-
headerBackground	头部背景图	String	-	-
log	控制台打印信息	Boolean	true	-

JanYork