关于博客园主题高大上美化教程大全
1、美化需求
博客开通已久却荒废至今，近期深觉Java基础需夯实，便开启边学边整理的分享之路。然而文章虽成，美观不足——尤其缺乏大纲导航，对我这类视觉强迫症患者而言，阅读体验着实有些难耐。
身为后端开发者，虽能驾驭复杂业务逻辑，却难以驯服CSS样式设计。
遍寻网络后，幸得几款既美观又实用的博客主题，文档清晰易用，在此整理分享：
✨ 致前端小伙伴的邀请 欢迎技术娴熟的前端大佬们动手定制个性化主题，期待更多美学创意在这里绽放！
小贴士：记得修改
config.yml中的theme配置项即可快速切换主题
2、前期准备
首先说一下教程，进入博客园的设置里面申请开通js权限。
我这里已经申请过了，而且是晚上十点多申请的，通过的很快，不到一个小时。
没有申请是这个样子的
点击申请，有个弹窗
填写一下申请的理由（网上一般都是这么写的），等待通过就好了，会有邮件进行通知提醒。
| | |
| --- | --- |
| | 尊敬的博客园管理员： |
| | 您好，我希望用JS美化下我的博客页面，麻烦通过下我的JS权限申请。 |
| | 感谢您的帮助。 |
3、主题分享
等待申请通过的这段时间，就可以看一下别的小伙伴美化的主题和说明文档了。
（1）第一款主题：silence主题
专 注 于 阅 读 的 博 客 园 主 题
部署文档：esofar.github.io/cnblogs-the…
样式预览
（2）第二款主题：cute-cnblogs主题
作者博客：www.cnblogs.com/miluluyo/
部署文档：作者博客的置顶里面有很详细的说明文档
样式预览：
详情页面：
（3）第三款主题：geek主题（博主用的就是这一款）
示例博客：www.cnblogs.com/zhaohongbin…
该博主还开发了一个皮肤构建工具 awescnb，可以在博客园安装这个项目中已经集成的皮肤 www.yuque.com/awescnb/use…
样式预览：
部署使用：
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>
页脚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> |
| | |
注意：
如果出现了页面不适应或者没效果请关闭默认CSS。
4、更换（永久免费）的头像和背景墙
设置头像和背景墙：
riyugo.com/ （3天失效）
网站图床(容易失效)
妥善方法：
1.打开后台管理 上传图片 复制图片地址
2.复制粘贴对应的头像地址和背景墙地址
完结★,°:.☆(￣▽￣)/$: .°★ 。
