这个博客是一个大佬写的，我只简单修改了个别样式
大佬地址
改完之后的样子如下
暗色主题
亮色主题
![]
第一步 基本设置
- 在博客皮肤里直接输入 Custom
] - 渲染引擎:
- 选择：highlight.js
]
第二步 美化代码
- 页面定制 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;}}
- 页首 HTML 代码
<div id="loading"><div class="loader-inner"></div></div>- 页脚 HTML 代码
<!-- 引入 awescnb 框架的主脚本 -->
<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: "xxxxxxxx", // 博客头像,可以上传到博客园，复制链接headerBackground: "https://images.cnblogs.com/cnblogs_com/guangzan/1894231/o_201205070714banner1.jpg", // 头部背景图片},// 代码高亮功能highLight: {enable: true, // 启用代码高亮},// 代码行号显示lineNumbers: {enable: true, // 启用行号显示},// GitHub 链接github: {enable: true, // 显示 GitHub 链接url: "xxxxxxxx", // GitHub 地址},// 点击特效click: {enable: true, // 启用点击特效},// Emoji 表情支持emoji: {enable: true, // 启用 Emoji},// 暗黑模式darkMode: {enable: true, // 启用暗黑模式autoDark: true, // 自动切换为暗黑模式autoLight: false, // 不自动切换为明亮模式},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>","<b>console.log('https://blog.weiyigeek.top');</b>",],},// 文章签名（每篇文章末尾显示）postSignature: {enable: true, // 启用文章签名enableLicense: true, // 启用版权声明content: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'], // 版权信息}};// 使用 jQuery 初始化 awescnb 框架并传入配置选项$.awesCnb(opts);
</script><script>
$(document).ready(function() {// 找到包含联系菜单项的父容器var contactItem = $('span.nav-item-text:contains("联系")').closest('li');if (contactItem.length) {// 找到父级列表容器var parentList = contactItem.parent();// 移除联系菜单项contactItem.remove();// 强制重新计算布局（可选）parentList.hide().show();}
});
</script>
第三步 选项设置
主要是设置主要显示的内容，可以自己选择，这是我的配置可以参考一下
)
