博客园主题美化（仅兼容 Markdown）

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

设计背景

关于个人笔记，每个人有每个的方案，就我而言大致经历了以下几个阶段：

1. 笔记软件，比如 印象笔记，有道笔记 等。

   • 优点：隐私性强，跨终端。
   • 缺点：个人用起来不是很舒服，可定制化程度低。

2. 开放博客，用作技术分享，比如某DN，某CTO，某书等等。

   • 优点：使用方便。
   • 缺点：广告多，可定制化程度低，博客的样式主题不满意。

3. 自研博客，用 Python + Django 写了一个。

   • 优点：样式好看了。
   • 缺点：由于水平有限，使用起来就不那么友好。

4. 自建博客，使用市面上开源的服务搭建一个，比如 Wordpress，Hexo 等。个人推荐： docsify。

   • 优点：定制化程度高，性能也可以。
   • 缺点：服务器需要费用。

5. 改博客园主题。

其实我很早之前就有改博客园主题，但是以前都没使用 Markdown，所以博客的兼容性不强。在使用 docsify 之后，就准备将以前的一些内容做个重构。

温故而知新。

为此专门开了这个账号用于做内容的重构，算是一个全新的开始。

如果你对重写的 docsify 感兴趣，可以看我的个人网站：

http://v2.ezops.cn/

如果你是对旧的主题感兴趣，可以查看我之前的账号：

https://blog.csdn.net/Dy1an

主题预览

博客园主题主要包含4个页面：首页，分类页，归档页，详情页，具体效果如下图所示。

主页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cX8QpxIT-1657559824416)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181412114-795741760.png “border”)]

分类页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1V8G9OqA-1657559824419)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181432181-1913771459.png “border”)]

归档页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DvqaFwit-1657559824421)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181447573-976511095.png “border”)]

详情页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i5kbI8cH-1657559824422)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181500079-2140878018.png “border”)]

配置方法

想要配置该主题，需要进行如下一些强制配置：

1. 选项设置（尽可能和我保持一致，否则可能出现未知 BUG）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqaQrcey-1657559824423)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181539563-322358960.png “border”)]

2. 基本设置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8WG5gCTL-1657559824425)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181553727-1818892495.png “border”)]

3. 页面定制 CSS（必须勾选 禁用模板默认 CSS）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aTMp2pQB-1657559824426)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181607733-1120098757.png “border”)]

CSS 代码：

#cnblogs\_c1{display:none;}.github-corner{border-bottom:0;position:absolute;right:10px;top:10px;z-index:1;}.github-corner svg{fill:#0948b3;height:80px;width:80px;}.github-corner svg *{color:#fff !important;}*{color:#17233f !important;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;letter-spacing:1px;}a{text-decoration:none !important;}body{margin:0;padding:0;background:#f7f7f8;}@media screen and (max-width:1200px){#nav\_main{margin:0 auto;width:1000px;}#main{margin:0 auto;width:1000px;}#navigator{margin:0 auto;width:1000px;}}@media screen and (max-width:1440px){#nav\_main{margin:0 auto;width:1200px;}#main{margin:0 auto;width:1200px;}#navigator{margin:0 auto;width:1200px;}}@media screen and (min-width:1700px){#nav\_main{margin:0 auto;width:1500px;}#main{margin:0 auto;width:1500px;}#navigator{margin:0 auto;width:1500px;}}#header{position:absolute;top:0;width:100%;background-color:#000;}#header #blogTitle{display:none;}#header #navigator{height:30px;line-height:30px;}#header #navigator *{color:#fff !important;font-size:13px;height:30px;line-height:30px;letter-spacing:2px;}#header #navigator #navList{float:left;}#header #navigator #navList{list-style:none;padding-inline-start:0 !important;margin:0;}#header #navigator #navList li{display:inline;margin-right:15px;}#header #navigator #navList li a:hover{color:orange !important;}#header .blogStats{float:right;}.navbar{top:30px;position:relative;display:flex !important;height:60px;padding:0;background-color:#fff;box-shadow:0px 15px 10px -15px rgb(44 46 54 / 20%);}.navbar ul{padding-inline-start:0 !important;}.navbar>nav .navbar-branding{width:100px;}.navbar>nav .navbar-branding img{margin-left:0;}.navbar>nav .navbar-search{padding-left:15px;padding-right:15px;border-radius: