博客园主题美化教程
1、美化原因
微博开通了很久,但是没写过什么东西。近期发现Java基础知识较为薄弱,一边在网上找视频,一边在博客整理笔记进行分享。但是写完之后发现不够美观,而且侧面没有文章的标题大纲,对于我这种有些强迫症的人来说,看着属实有些难受。
但本人是个后端,自己写的样式很丑陋。
所以在网上找到了一些很好看,也很好用的主题,而且说明文档也很详细,整理了我试用过的几种,进行分享。
技术还不错的前端小伙伴也可以自己试着自己美化一下,然后分享给大家。
2、前期准备
首先说一下教程,进入博客园的设置里面申请开通js权限。

我这里已经申请过了,而且是晚上十点多申请的,通过的很快,不到一个小时。
没有申请是这个样子的

点击申请,有个弹窗

填写一下申请的理由(网上一般都是这么写的),等待通过就好了,会有邮件进行通知提醒。
尊敬的博客园管理员: 您好,我希望用JS美化下我的博客页面,麻烦通过下我的JS权限申请。 感谢您的帮助。

3、主题分享
等待申请通过的这段时间,就可以看一下别的小伙伴美化的主题和说明文档了。
(1)第一款主题:silence主题
专 注 于 阅 读 的 博 客 园 主 题
作者博客:https://www.cnblogs.com/esofar
部署文档:https://esofar.github.io/cnblogs-theme-silence/#/
样式预览


(2)第二款主题:cute-cnblogs主题
作者博客:https://www.cnblogs.com/miluluyo/
部署文档:作者博客的置顶里面有很详细的说明文档
样式预览:



(3)第三款主题:geek主题(博主用的就是这一款)
示例博客:https://www.cnblogs.com/zhaohongbing/p/16332606.html
作者博客:https://www.cnblogs.com/guangzan/
该博主还开发了一个皮肤构建工具 awescnb
,可以在博客园安装这个项目中已经集成的皮肤 https://www.yuque.com/awescnb/user
样式预览:


部署使用:
one、将主题设置为Custom
two、将渲染引擎设置为highlight.js
![]()
three、页面定制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;}} four、首页HTML代码
<div id="loading"><div class="loader-inner"></div></div> five、页脚HTML代码(这里可以自定义配置)
<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://blog-static.cnblogs.com/files/blogs/775095/733a851cc36cbf615c31123bfebd85e.gif?t=1668011108", //头像 headerBackground: "https://blog-static.cnblogs.com/files/blogs/775095/1.gif?t=1668326814", //背景 }, highLight: { enable: true, }, lineNumbers: { enable: true, }, github: { enable: false, url: "https://github.com/tiansztiansz", }, gitee: { enable: false, url: 'https://gitee.com/weiyigeek', }, click: { enable: true, }, emoji: { enable: true, }, darkMode: { enable: true, autoDark: true, autoLight: false, }, qrcode: { enable: false, img: 'https://weiyigeek.top/img/wechat-search.png', desc: 'WeiyiGeek 公众号', }, donation: { enable: false, 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>", ], }, postSignature: { enable: true, enableLicense: true, content: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'], }, links: { enable: false, 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>
本文作者:huxingxin
本文链接:https://www.cnblogs.com/huxingxin/p/16886323.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库