博客园主题美化
博客园主题美化
原由:
毕业两年了，感觉和刚毕业没什么区别，但又想涨工资，怎么办呢？于是我请教我的某位大牛朋友，得出的结论就是要养成写博客的习惯。那写博客有什么好处呢？此处省略一万字（刚开始写，等我悟了，跟大家说）
吐槽：
博客园注册了，写博客功能也开通了，点进去就这样？？？不能说很丑，只能说凑乎能用！！！将就着写了一篇随笔，然后就出现了压倒骆驼的最后一个稻草，左侧没有导航栏？？？不能忍，动手美化一下
我在网上随便一搜就出来一大堆，难度很低。我就随便找了一篇最简单的一篇开始，好看不好看对我来说不重要，重要的是必须由导航栏，这是我最后的倔强
文章借鉴：https://www.programminghunter.com/article/81652453962
这老哥直接将代码放在页面方便复制粘贴，真是大大的良心
开始
前提：申请权限
美化主题的前提是你开通了js的权限
1.点击博客首页的管理
2.点击设置
3.申请js权限
第一步：设置主题
将主题设置为Custom（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 代码（这里根据需要修改配置）：
<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://5fou.com/i/2022/05/27/ni9w5f.jpg", //头像
headerBackground:
"https://images.cnblogs.com/cnblogs_com/guangzan/1894231/o_201205070714banner1.jpg", //背景
},
highLight: {
enable: true,
},
lineNumbers: {
enable: true,
},
github: {
enable: true,
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: false,
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/'],
},
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>
添加头像
点击上方网址生成图像外链，然后添加到页脚HTML代码的头像中
总结：
虽然博客园的默认主题不好看也不好用，但是其良好的可扩展性还是很棒的，到此简单的主题美化就结束了。如果你是一个会前端的，那你就可以设计出属于自己的博客主题了。
