博客园还能美化?

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

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

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

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

如何美化?

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

我来细说一下。

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

GithubAWESCNB

GiteeAWESCNB

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

开启博客园自定义JS权限

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

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

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

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

完成基础的设置

  1. 设置博客皮肤为“Custom”

  1. 渲染引擎选择 highlight.js,取消勾选显示行号,主题样式选择默认的 cnblogs

  1. 使用 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;}}
  1. 勾选禁用默认 CSS 样式

  1. 复制如下代码粘贴到【页脚 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网站图标urlString--
headerBackground头部背景图String--
log控制台打印信息Booleantrue-

更多配置

🔨 配置选项 · 语雀 (yuque.com)

作者的文档写的很详细,配置直接在文档里面看就可以。

最后修改:2022 年 05 月 17 日
如果觉得我的文章对你有用,请随意赞赏