文章目录
显示
? 优质资源分享 ?
| 学习路线指引（点击解锁） | 知识定位 | 人群定位 |
|---|---|---|
| ? Python实战微信订餐小程序 ? | 进阶级 | 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 |
| ?Python量化交易实战? | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
设计背景
关于个人笔记，每个人有每个的方案，就我而言大致经历了以下几个阶段：
-
笔记软件，比如
印象笔记，有道笔记等。- 优点：隐私性强，跨终端。
- 缺点：个人用起来不是很舒服，可定制化程度低。
-
开放博客，用作技术分享，比如某DN，某CTO，某书等等。
- 优点：使用方便。
- 缺点：广告多，可定制化程度低，博客的样式主题不满意。
-
自研博客，用 Python + Django 写了一个。
- 优点：样式好看了。
- 缺点：由于水平有限，使用起来就不那么友好。
-
自建博客，使用市面上开源的服务搭建一个，比如 Wordpress，Hexo 等。个人推荐： docsify。
- 优点：定制化程度高，性能也可以。
- 缺点：服务器需要费用。
- 改博客园主题。
其实我很早之前就有改博客园主题，但是以前都没使用 Markdown，所以博客的兼容性不强。在使用 docsify 之后，就准备将以前的一些内容做个重构。
温故而知新。
为此专门开了这个账号用于做内容的重构，算是一个全新的开始。
如果你对重写的 docsify 感兴趣，可以看我的个人网站：
如果你是对旧的主题感兴趣，可以查看我之前的账号：
主题预览
博客园主题主要包含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")]
配置方法
想要配置该主题，需要进行如下一些强制配置：
- 选项设置（尽可能和我保持一致，否则可能出现未知 BUG）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqaQrcey-1657559824423)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181539563-322358960.png "border")]
- 基本设置：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8WG5gCTL-1657559824425)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181553727-1818892495.png "border")]
- 页面定制 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:0px;background-color:#f4f4f4;height:30px;width:300px;}.navbar>nav .navbar-search>input{width:300px;font-size:13px;letter-spacing:2px;}.navbar>nav .navbar-left>*:not(:first-child){margin-right:10px;margin-left:10px;}.dropdown>.dropdown-menu{border-radius:0;background-color:#fff;text-align:center;}.dropdown-menu a{font-size:13px;}.dropdown-menu a:hover{color:#0948b3 !important;}#main{position:relative;top:50px;display:flex;}#main #mainContent{flex:1;}#main #mainContent #post\_detail{padding:50px 80px;background-color:#fff;box-shadow:2px 2px 10px #ddd;}#main #mainContent #post\_detail .postTitle{white-space:nowrap;font-size:23px;font-weight:bold;text-align:center;margin:20px 0;}#main #mainContent #post\_detail #blog\_post\_info\_block{position:absolute;top:140px;margin-top:0;background:#f9f9fa;width:calc(100% - 520px);padding:10px 20px;padding-bottom:25px;}#main #mainContent #post\_detail #blog\_post\_info\_block #author\_profile\_info,#author\_profile\_follow{display:none;}#main #mainContent #post\_detail #blog\_post\_info\_block *{color:#6b7486 !important;}#main #mainContent #post\_detail #blog\_post\_info\_block #BlogPostCategory{height:25px;line-height:25px;font-size:14px;margin-bottom:0;}#main #mainContent #post\_detail #blog\_post\_info\_block #BlogPostCategory a{display:inline-block;height:20px;line-height:20px;background:#efeff1;font-size:12px;padding:0 10px;margin:0 5px;}#main #mainContent #post\_detail #blog\_post\_info\_block #EntryTag{height:25px;line-height:25px;font-size:14px;}#main #mainContent #post\_detail #blog\_post\_info\_block #EntryTag a{display:inline-block;height:20px;line-height:20px;background:#efeff1;font-size:12px;padding:0 10px;margin:0 5px;}#main #mainContent #post\_detail #blog\_post\_info\_block #EntryTag *{font-size:14px;}#main #mainContent #post\_detail .postDesc{position:absolute;top:200px;padding-left:20px;height:25px;line-height:25px;color:#6b7486 !important;font-size:14px;}#main #mainContent #post\_detail .postDesc *{color:#6b7486 !important;font-size:14px;}#main #mainContent #post\_detail #green\_channel{position:fixed;margin-left:-180px;}#green\_channel{border:none;width:0;}#green\_channel a,#green\_channel span{display:block;width:50px;height:50px;margin-bottom:20px;background:none;margin-right:0;font-weight:normal;border-radius:50%;padding:0;box-shadow:2px 2px 10px #ddd;}#green\_channel #green\_channel\_digg{background:url(https://images.cnblogs.com/cnblogs\_com/blogs/758864/galleries/2184671/t\_220708095714\_ping.png) no-repeat center;background-size:20px;}#green\_channel #green\_channel\_follow{background:url(https://images.cnblogs.com/cnblogs\_com/blogs/758864/galleries/2184671/t\_220708095708\_follow.png) no-repeat center;background-size:20px;}#green\_channel #green\_channel\_favorite{background:url(https://images.cnblogs.com/cnblogs\_com/blogs/758864/galleries/2184671/t\_220708095702\_add.png) no-repeat center;background-size:20px;}#green\_channel #green\_channel\_weibo,#green\_channel #green\_channel\_wechat{height:20px;width:20px;padding:15px;box-shadow:2px 2px 10px #ddd;}#green\_channel #green\_channel\_weibo{background:url(https://images.cnblogs.com/cnblogs\_com/blogs/758864/galleries/2184671/t\_220708100106\_weibo.png) no-repeat center;background-size:20px;}#green\_channel #green\_channel\_wechat{background:url(https://images.cnblogs.com/cnblogs\_com/blogs/758864/galleries/2184671/t\_220708104001\_%E5%BE%AE%E4%BF%A1.png) no-repeat center;background-size:20px;}#green\_channel #green\_channel\_weibo img,#green\_channel #green\_channel\_wechat img{display:none;}#main #mainContent #post\_detail #cnblogs\_post\_body{margin-top:170px;}#main #mainContent #post\_detail #div\_digg{display:none;position:fixed;left:0;}#cnblogs\_post\_body h2{line-height:40px;margin:100px 0 30px 0;background-color:#0948b3;letter-spacing:2px;font-size:18px;color:#fff !important;text-align:center;}#cnblogs\_post\_body p{margin:0;line-height:30px;word-spacing:0.05rem;font-size:14px;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;}#cnblogs\_post\_body ol,#cnblogs\_post\_body ul{margin-top:0;margin-bottom:0;line-height:30px;}#cnblogs\_post\_body ol li,#cnblogs\_post\_body ul li{font-size:14px;line-height:30px;}#cnblogs\_post\_body p img{padding:20px 10px;max-width:1000px !important;margin:10px 0 0 0;}#cnblogs\_post\_body p img[title="border"]{border:1px dashed #ddd;}#cnblogs\_post\_body p img[title="bg-black"]{background-color:#000;}#cnblogs\_post\_body .table-wrapper{margin:10px 0 !important;}#cnblogs\_post\_body table{border-collapse:collapse;margin:0 auto;text-align:left;width:100%;}#cnblogs\_post\_body table td,#cnblogs\_post\_body table th{border:1px solid #fff;padding:8px 15px;font-size:13px !important;line-height:18px;}#cnblogs\_post\_body table thead th{background-color:#ddd;}#cnblogs\_post\_body table tr:nth-child(odd){background:#f0f0f0;}#cnblogs\_post\_body table tr:nth-child(even){background:#f9f9fa;}.cnblogs-markdown:not(pre,div,td)>code,.blogpost-body:not(pre,div,td)>code{color:#c82333 !important;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;}p strong{line-height:50px;height:50px;}blockquote{margin:10px 0 !important;color:#819198 !important;border-left:0.2rem solid #4285f4 !important;background:#f2f5f9 !important;padding:.8rem 1.2rem !important;}pre{margin:10px 0 !important;padding:15px !important;max-width:990px;}.code-fullscreen-overlay pre{max-width:100%;}pre[class*="language-"]{padding:0;margin:0;border:none;background:none;border-radius:0;}pre.prismjs-lines-highlighted,pre.prismjs-lines-highlighted[class*='language-'],pre.prismjs-lines-highlighted.line-numbers{padding:0;}pre code{background-color:#272822 !important;color:#ffffff !important;line-height:20px !important;font-size:13px !important;}pre code *{font-size:13px;line-height:20px !important;}.token{color:#fff !important;}.token.function{color:#f92772 !important;}.token.delimiter,.token.boolean,.token.keyword,.token.selector,.token.important,.token.atrule{color:#A6E22E !important;}.token.operator,.token.punctuation,.token.attr-name{color:#fff !important;}.token.string,.token.char{color:#E6DB74 !important;}.token.comment,.token.prolog,.token.cdata{color:#75715E !important;}.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#AE81FF !important;}.token.assign-left{color:#66D9EF !important;}.token.operator{color:#E6DB74 !important;}.token.entity{color:#CC6633 !important;}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#FFF !important;}.token.shebang{color:#75715E !important;}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#AE81FF !important;}pre.prismjs-lines-highlighted,pre.prismjs-lines-highlighted[class*='language-'],pre.prismjs-lines-highlighted.line-numbers{background:#272822 !important;}span.cnb-code-toolbar-item{background:#0948b3;color:#fff !important;border-radius:0;padding:2px 5px !important;}.cnb-over-length-code-block-toggler{display:none;}span.cnb-code-toolbar-item *{color:#fff !important;}#blog-comments-placeholder{background-color:#fff;margin:20px 0;padding:30px;padding-top:12px;box-shadow:2px 2px 10px #ddd;}#blog-comments-placeholder *{font-size:13px;}#blog-comments-placeholder .feedback\_area\_title{border-bottom:1px dashed #ddd;padding-bottom:10px;margin-bottom:20px;font-weight:bold;letter-spacing:2px;font-size:16px;}#blog-comments-placeholder .feedbackManage{float:right;}#blog-comments-placeholder .feedbackManage .comment\_actions a{color:#339966 !important;}#blog-comments-placeholder .feedbackListSubtitle{margin-left:-35px;color:#f9f9fa !important;}#blog-comments-placeholder .feedbackItem{margin:15px 0;background:#f9f9fa;padding:20px 30px;}#blog-comments-placeholder .layer{position:relative;text-align:center;background-color:#0948b3;color:#fff !important;letter-spacing:2px;padding:2px 8px;}#blog-comments-placeholder .feedbackCon p{margin:0;line-height:30px;}#blog-comments-placeholder .feedbackCon{margin-top:15px;}#blog-comments-placeholder .louzhu{font-weight:bold;}.new-comment-block{background-color:#fff;margin:10px 0;padding:30px;box-shadow:2px 2px 10px #ddd;}.new-comment-block *{font-size:13px;font-weight:normal;}.new-comment-block p,.bq\_post\_comment p{line-height:30px;font-size:13px;margin:0;}#comment\_nav{display:none;}#comment\_form\_container{background-color:#fff;margin:10px 0;padding:30px;box-shadow:2px 2px 10px #ddd;}#comment\_form\_container *{font-size:13px;}#commentform\_title{font-size:16px;font-weight:bold;background:none;padding:0;margin-bottom:15px;}.comment\_textarea{padding:10px 15px;width:100%;border-radius:0;margin-bottom:15px;}.comment\_textarea *{font-size:13px;}#tip\_comment{margin-bottom:10px;display:block;}#commentbox\_opt .comment\_btn{height:30px;width:100%;display:block;border:none;line-height:30px;margin-bottom:10px;color:#fff !important;background-color:#0948b3;}#commentbox\_opt .comment\_btn:hover{cursor:pointer;}#commentbox\_opt a{padding-left:0;}#under\_post\_card1,#under\_post\_card2{display:none;}#main #sideBar{width:300px;margin-left:20px;}.ezops-box{padding:40px 10px 20px 10px;background-color:#fff;width:280px;box-shadow:2px 2px 10px #ddd;}.ezops-avatar{text-align:center;}.ezops-avatar img{width:70px;height:70px;border-radius:70px;}.ezops-name{text-align:center;padding:10px 0;}.ezops-name span{font-size:16px;height:22px;line-height:22px;font-weight:bold;}.ezops-info-ul{line-height:1;display:inline-block;padding:15px 0 5px 0;width:100%;list-style:none;margin:0 0 10px 0;}.ezops-info-ul li{list-style:none;font-size:14px;float:left;text-align:center;width:25%;}.ezops-info-ul li .ezops-num{color:#17233f;font-size:16px;padding-bottom:8px;font-family:fontDIN-medium;}.ezops-info-ul li .ezops-label-name,.ezops-info-ul li .ezops-label-name a{color:#9399a6 !important;font-size:12px;line-height:1;}.ezops-lines{margin:0 10px;border-top:1px solid #eee;}.ezops-follow-btn{text-align:center;}.ezops-follow-btn button{display:inline-block;width:110px;height:35px;line-height:35px;border:1px solid #3e71f6;border-radius:0 !important;background-color:#fff;background-image:none !important;padding:0;cursor:pointer;margin:10px 0;}.ezops-follow-btn button a{color:#3e71f6;}#blog-news{overflow:inherit;}#sidebar\_news .catListTitle{display:none;}.ezops-sider-title{margin:0;padding:10px 20px;background-color:#f9f9f9;font-size:14px;letter-spacing:2px;}.ezops-sider-content{padding:15px 20px;text-align:center;}#p\_b\_follow a{height:30px;line-height:30px;background:#0948b3;color:#fff !important;display:block;font-size:13px;margin:0 10px;}#profile\_block{display:none;}.sidebar-block{background-color:#fff;width:300px;margin-top:20px;font-size:13px;box-shadow:2px 2px 10px #ddd;}h3.catListTitle{margin:0;padding:10px 20px;background-color:#f9f9f9;font-size:14px;letter-spacing:2px;}h3.catListTitle *{font-size:14px;letter-spacing:2px;}.sidebar-block ul{list-style:none;padding-inline-start:0;padding:0 20px 15px 20px;}.sidebar-block li{height:25px;line-height:25px;}#sidebar\_scorerank{display:none;}.div\_my\_zzk{padding:15px 20px;}.input\_my\_zzk{background-color:#f4f4f4;width:175px;border:none;padding:5px 10px;border-radius:0;}input.btn\_my\_zzk{vertical-align:middle;height:30px;line-height:30px;font-size:12px;padding-left:10px;padding-right:10px;border:none;background-color:#0948b3;color:#fff !important;border-radius:0;cursor:pointer;}.cnblogs-toc-button::before{background-color:#fff;}.cnblogs-toc>.cnblogs-toc-title{font-weight:bold;border-radius:0;}.cnblogs-toc-item[data-level="0"]{font-weight:normal;font-size:13px;}.cnblogs-toc-item[data-level="1"]{font-weight:normal;font-size:13px;}#post\_next\_prev{display:none;}.day{position:relative;padding:30px;margin:0 0 20px 0;box-shadow:0px 0px 10px #ddd;overflow:hidden;background-color:#fff;}.day .dayTitle{position:absolute;background-color:#CC0033;width:130px;text-align:center;padding:0 10px 3px 10px !important;top:30px;right:-35px;transform:rotate(45deg);}.day .dayTitle a{font-size:12px;color:#fff !important;}.day>.postTitle{font-size:16px;font-weight:bold;letter-spacing:2px;margin-bottom:15px;border-left:5px solid #CC0033;padding-left:15px;height:20px;line-height:20px;}.c\_b\_p\_desc{font-size:13px;letter-spacing:2px;opacity:0.8;overflow:hidden;text-overflow:ellipsis;margin-bottom:15px;line-height:25px;}.day .postDesc{font-size:13px;opacity:0.8;text-align:right;}.day .postSeparator{margin:30px 0 !important;border-bottom:2px solid #eee;box-shadow:0px 0px 10px #ddd;}#footer{margin-top:100px;text-align:center;font-size:14px;letter-spacing:2px;margin-bottom:20px;}.entrylistItem{padding:30px;margin:0 0 20px 0;box-shadow:0px 0px 10px #ddd;overflow:hidden;background-color:#fff;}.entrylistPosttitle{font-size:16px;font-weight:bold;letter-spacing:2px;margin-bottom:15px;border-left:5px solid #CC0033;padding-left:15px;height:20px;line-height:20px;}.entrylistItemPostDesc{font-size:13px;opacity:0.8;text-align:right;}.entrylistTitle{font-size:20px;text-align:center;}
折叠 注意：
侧边栏的小图标实在 css 中设置的，可以根据自己的需求修改。修改方法为：将想要的图片上传到自己博客园的相册，然后复制它的链接替换掉 CSS 的中的链接即可。
- 博客侧边栏公告：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F380M9qm-1657559824427)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181631184-459059257.png "border")]
具体代码：
<div>
<div class="ezops-box">
<a href="https://github.com/KU4NG" target="\_blank" class="github-corner" aria-label="View source on Github">
<svg viewBox="0 0 250 250" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm">path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">path>
svg>
a>
<div class="ezops-avatar">
<img id="idAvatarImg" src="https://pic.cnblogs.com/avatar/824941/20220710132813.png" alt="">
div>
<div class="ezops-name">
<span id="idNewsUserName">不知名换皮工程师span>
div>
<div class="ezops-info">
<ul class="ezops-info-ul">
<li>
<div class="ezops-num" id="idSuibiNum">0div>
<div class="ezops-label-name" id="idSuibiName">随笔div>
li>
<li>
<div class="ezops-num" id="idArticleNum">0div>
<div class="ezops-label-name" id="idArticleName">文章div>
li>
<li>
<div class="ezops-num" id="idScoreNum">0div>
<div class="ezops-label-name" id="idScoreName">积分div>
li>
<li>
<div class="ezops-num" id="idRankNum">0div>
<div class="ezops-label-name" id="idRankName">排名div>
li>
ul>
div>
<div class="ezops-lines">div>
<div class="ezops-info">
<ul class="ezops-info-ul">
<li>
<div class="ezops-num" id="idFollowerNum">0div>
<div class="ezops-label-name">粉丝div>
li>
<li>
<div class="ezops-num" id="idFollowNum">0div>
<div class="ezops-label-name" id="idFollowName">关注div>
li>
<li>
<div class="ezops-num" id="idCommentNum">0div>
<div class="ezops-label-name" id="idCommentName">评论div>
li>
<li>
<div class="ezops-num" id="idReadNum">0div>
<div class="ezops-label-name" id="idReadName">人气div>
li>
ul>
div>
<div class="ezops-follow-btn" id="idFollowBtn">div>
div>
<div id="sidebar\_wechat" class="sidebar-block">
<h3 class="ezops-sider-title">微信公众号h3>
<div class="ezops-sider-content">
<img src="https://images.cnblogs.com/cnblogs\_com/blogs/758864/galleries/2184671/o\_220711082754\_20220711162716385.png" alt="">
div>
div>
<div id="sidebar\_qq" class="sidebar-block">
<h3 class="ezops-sider-title">技术交流群h3>
<div class="ezops-sider-content">
<img src="https://images.cnblogs.com/cnblogs\_com/blogs/758864/galleries/2184671/o\_220711073831\_qq.png" alt="">
div>
div>
div>
折叠 注意：
我自己对博客侧边栏进行了重新设计，新增了用户信息，Github 链接，公众号，QQ 群等模块，用户可以根据需求修改。也可以保留我的，帮我博客做个宣传。
- 页脚HTML代码（JS 代码）：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fIzhy4zO-1657559824428)(https://img2022.cnblogs.com/blog/824941/202207/824941-20220711181652606-1829323350.png "border")]
JS 代码：
<script>
setTimeout(function () {
// 好文要顶
var diggEle = document.getElementById("green\_channel\_digg")
var diggText = diggEle.text
diggEle.title = diggText
diggEle.text = ""
// 关注
var followEle = document.getElementById("green\_channel\_follow")
var followText = followEle.text
followEle.title = followText
followEle.text = ""
// 收藏
var favoriteEle = document.getElementById("green\_channel\_favorite")
var favoriteText = favoriteEle.text
favoriteEle.title = favoriteText
favoriteEle.text = ""
// 文字替换
var infoEle = document.getElementsByClassName("postDesc")[0]
var infoHtml = infoEle.innerHTML
infoEle.innerHTML = infoHtml.replace("posted @", "发布于")
}, 100);
setTimeout(function () {
// 关注按钮
$("#idFollowBtn").append($("#p\_b\_follow"));
}, 100);
setTimeout(function () {
// 随笔
var suibiNum = $("#stats\_post\_count").text().replace(/[^0-9]/g, '');
// 文章
var articleNum = $("#stats\_article\_count").text().replace(/[^0-9]/g, '');
// 评论
var commentNum = $("#stats-comment\_count").text().replace(/[^0-9]/g, '');
// 阅读
var readNum = $("#stats-total-view-count").text().replace(/[^0-9]/g, '');
if (readNum > 10000) {
readNum = parseInt(rankNum / 10000) + "万"
}
// 积分
var scoreNum = $(".liScore").text().replace(/[^0-9]/g, '');
// 排名
var rankNum = $(".liRank").text().replace(/[^0-9]/g, '');
if (rankNum > 10000) {
rankNum = parseInt(rankNum / 10000) + "万"
}
// 粉丝
var followerNum = $("a.follower-count").text().replace(/[^0-9]/g, '');
// 关注
var folowingNum = $("a.folowing-count").text().replace(/[^0-9]/g, '');
// 替换数据
$("#idSuibiNum").text(suibiNum);
$("#idArticleNum").text(articleNum);
$("#idFollowerNum").text(followerNum);
$("#idFollowNum").text(folowingNum);
$("#idCommentNum").text(commentNum);
$("#idScoreNum").text(scoreNum);
$("#idRankNum").text(rankNum);
$("#idReadNum").text(readNum);
}, 100);
script>
折叠 注意：
该代码主要用于实现个人信息模块的数据展示。
博客特殊用法
个人建议使用 Typora 作为 Markdown 编写工具用于编写博客，写完后复制到博客园进行发布。
- 标题用法，该主题标题兼容的是 h2，所以需要下面的写法：
## 这是一个标题
- 图片用法，默认图片会有 10px 的 padding，提供了两个参数：
- border：给图片加上边框。
- bg-black：给图片加上大黑边，常用于黑背景的截图。
- 其它组件如表格，列表都做了美化，直接使用就行。
- 每个博客都需要分类和标签，否则详情页头部展示会有缺失，影响美观。
特别说明
如果在使用过程中又遇到什么问题，可以扫描右边的二维码，加群直接联系我。
设计整理不易，希望大家在使用的时候能够在自己的页面上还能找到我的痕迹。
转载请注明：xuhss » 博客园主题美化（仅兼容 Markdown）