博客园自定义样式
目录
1|0一、前言
一直觉得博客园自带的样式不够简介美观,所以想着使用CSS美化下,同时写篇博客总结下以供后人参考。本文中的全部代码在这:github
2|0二、准备工作
2|12.1 申请js权限
首先,在自定义博客样式前,我们需要向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等待博客园管理团队通过申请,一般几个小时就会通过。然后再刷新一下,页面就会显示支持js代码 。
2|22.2 学会“借鉴”他人样式
如果看到别人的博客非常美观,可以适当“借鉴一下”。使用chrome浏览器,在其博客界面按F12查看页面CSS代码如下图所示,图中作为例子使用的是github的首页页面。点击图中红框内的查看按钮或者按下ctrl + shift + C
查看蓝框中的元素,其CSS代码如绿框中所示。
另外可以直接修改其CSS代码,例如添加颜色属性:color:red
,会发现页面中的文字颜色变为红色了:
3|0三、改造之路
3|13.1 自定义博客主体部分
首先博客皮肤选择Custom
,然后自定义博客主体部分的CSS,下面只是摘选出了很少一部分内容作为示例,全部内容可以去github查看。
3|23.2 自定义代码高亮主题
之前写博客用的是博客园自带的TinyMCE编辑器,后来偶然喜欢上用Markdown写博客文档,索性把博客园的编辑器改为Markdown了。但是博客园的Markdown渲染效果不够美观,因此决心改造园子的Markdown样式。
博客园代码高亮使用的插件是 highlight.js,highlight.js是一款轻量级的Web代码语法高亮库。highlight官网提供了77种主题:https://highlightjs.org/static/demo/, 大家可以查看demo选择一款自己喜欢的,然后放到博客里面。
因为我比较常用的IDE是Qt Creator,所以选择了Qtcreator Light这款主题,如下所示:
下载highlight.js
包,进入主题文件夹找到你想要的主题文件,然后复制里面的CSS代码,进入你的博客园主页,【管理】->【设置】,找到【页面定制CSS代码】,粘贴到最后。
由于直接将CSS代码加进来存在一些样式冲突,一般是背景色和字体颜色,还需要一些调整。现在贴出我调整后的CSS代码:
3|33.3 侧边栏添加头像
将下面这段代码添加到【博客侧边栏公告】中,以添加头像:
3|43.4 美化页首
将下面这段代码添加到【页首Html代码】中:
3|53.5 自动生成目录索引
将下面这段代码添加到【页脚Html代码】中:
参考:
__EOF__

本文链接:https://www.cnblogs.com/treasury/p/12771768.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器