当前位置: 首页 > news >正文

我的博客园美化记录

这个博客是一个大佬写的,我只简单修改了个别样式

大佬地址

改完之后的样子如下

暗色主题
img

亮色主题
![img]

第一步 基本设置

  1. 在博客皮肤里直接输入 Custom
    ![img]
  2. 渲染引擎:
  • 选择:highlight.js
    ![img]

第二步 美化代码

  1. 页面定制 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. 页首 HTML 代码
<div id="loading"><div class="loader-inner"></div></div>
  1. 页脚 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>

第三步 选项设置

主要是设置主要显示的内容,可以自己选择,这是我的配置可以参考一下
img

http://www.jsqmd.com/news/47924/

相关文章:

  • 2025家装木制品定制品牌怎么选?欧雅斯——楼梯、木门、衣柜、橱柜、护墙板,源头精品
  • 面向对象编程前三次大作业总结
  • iceberg sql怎么写
  • iceberg sql如何用
  • CSAPP Notes Labs
  • VSCODE协助keil开发时无法识别uint8_t
  • CSAPP 信息的处理和表示
  • NumPy ndarray 完全指南:多维数组的基石
  • 最小生成树(整理篇)
  • 有时我会想起莫名的愤怒的事情,是不是就是这里的偏执因起的情绪激动造成的
  • A script to set mysql gtid-mode off by tortoise-orm
  • C Tcp通信
  • SZMS 251019 订题赛笔记
  • 关于面向对象程序设计的第一阶段大作业总结
  • Spring Boot核心知识点全解析 - 实践
  • RHCA - DO374 | Day03:通过自动化控制器运行剧本 - 详解
  • 离职/毕业-清理电脑
  • 2025.11.22
  • 在 Python 和 NumPy 的常规书写规范中,ndarray需要大写吗?
  • ddddocr: 对图片处理提升识别率
  • `np.array` 和 `np.ndarray`是什么关系?
  • 大数据部门和AI部门边界
  • Post Processing
  • 工作草稿
  • 【Rust编程:从新手到大师】Rust 环境搭建(详细版) - 教程
  • 2025年11月南通宠物医疗市场深度分析:专业服务与行业规范的标杆选择
  • 软工团队作业3
  • 电梯调度迭代编程作业复盘
  • 球坐标系的大运动方程组
  • 【数据库】navicat的下载以及数据库约束 - 实践