設計背景
關於個人筆記，每個人有每個的方案，就我而言大致經歷了以下幾個階段：
-
筆記軟體，比如
印象筆記，有道筆記等。- 優點：隱私性強，跨終端。
- 缺點：個人用起來不是很舒服，可定製化程度低。
-
開放部落格，用作技術分享，比如某DN，某CTO，某書等等。
- 優點：使用方便。
- 缺點：廣告多，可定製化程度低，部落格的樣式主題不滿意。
-
自研部落格，用 Python + Django 寫了一個。
- 優點：樣式好看了。
- 缺點：由於水平有限，使用起來就不那麼友好。
-
自建部落格，使用市面上開源的服務搭建一個，比如 Wordpress，Hexo 等。個人推薦： docsify。
- 優點：定製化程度高，效能也可以。
- 缺點：伺服器需要費用。
-
改部落格園主題。
其實我很早之前就有改部落格園主題，但是以前都沒使用 Markdown，所以部落格的相容性不強。在使用 docsify 之後，就準備將以前的一些內容做個重構。為此專門開了這個賬號，算是一個全新的開始，溫故而知新。
如果你對重寫的 docsify 感興趣，可以看我的個人網站：
如果你是對舊的主題感興趣，可以檢視我之前的賬號：
主題預覽
部落格園主題主要包含4個頁面：首頁，分類頁，歸檔頁，詳情頁，具體效果如下圖所示。
主頁
分類頁
歸檔頁
詳情頁
配置方法
想要配置該主題，需要進行如下一些強制配置：
- 選項設定（儘可能和我保持一致，否則可能出現未知 BUG）
- 基本設定：
- 頁面定製 CSS（必須勾選
禁用模板預設 CSS）：
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:30px;}#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:30px;line-height:30px;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:30px;line-height:30px;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:210px;padding-left:20px;height:30px;line-height:30px;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;top:200px;}#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 #idUserTheme{background:url(https://images.cnblogs.com/cnblogs_com/blogs/758864/galleries/2184671/o_220712022520_1111.png) no-repeat center;background-size:30px;}#green_channel #idUserTheme{height:30px;width:30px;padding:10px;box-shadow:2px 2px 10px #ddd;}#green_channel #green_channel_weibo img,#green_channel #green_channel_wechat img{display:none;}#main #mainContent #post_detail #cnblogs_post_body{margin-top:200px;}#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;}#sideBar li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.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 的中的連結即可。
- 部落格側邊欄公告：
具體程式碼：
<div>
<div class="ezops-box">
<!-- GitHUB -->
<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>
<!-- 資訊1 -->
<div class="ezops-info">
<ul class="ezops-info-ul">
<li>
<div class="ezops-num" id="idSuibiNum">0</div>
<div class="ezops-label-name" id="idSuibiName">隨筆</div>
</li>
<li>
<div class="ezops-num" id="idArticleNum">0</div>
<div class="ezops-label-name" id="idArticleName">文章</div>
</li>
<li>
<div class="ezops-num" id="idScoreNum">0</div>
<div class="ezops-label-name" id="idScoreName">積分</div>
</li>
<li>
<div class="ezops-num" id="idRankNum">0</div>
<div class="ezops-label-name" id="idRankName">排名</div>
</li>
</ul>
</div>
<!-- 分割線 -->
<div class="ezops-lines"></div>
<!-- 資訊2 -->
<div class="ezops-info">
<ul class="ezops-info-ul">
<li>
<div class="ezops-num"><a href="" target="_blank" id="idFollowerNum">0</a></div>
<div class="ezops-label-name">粉絲</div>
</li>
<li>
<div class="ezops-num"><a href="" target="_blank" id="idFollowNum">0</a></div>
<div class="ezops-label-name" id="idFollowName">關注</div>
</li>
<li>
<div class="ezops-num" id="idCommentNum">0</div>
<div class="ezops-label-name" id="idCommentName">評論</div>
</li>
<li>
<div class="ezops-num" id="idReadNum">0</div>
<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>
<!-- QQ -->
<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 程式碼）：
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 @", "釋出於")
// 新增主題配置
$("#green_channel").append('<a href="https://www.cnblogs.com/ezops/p/16467415.html" target="_blank" id="idUserTheme" title="使用該主題"></a>');
}, 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 followerUrl = $("a.follower-count").attr("href");
// 關注
var folowingNum = $("a.folowing-count").text().replace(/[^0-9]/g, '');
var folowingUrl = $("a.folowing-count").attr("href");
// 替換資料
$("#idSuibiNum").text(suibiNum);
$("#idArticleNum").text(articleNum);
$("#idFollowerNum").text(followerNum);
$("#idFollowerNum").attr("href", followerUrl);
$("#idFollowNum").text(folowingNum);
$("#idFollowNum").attr("href", folowingUrl);
$("#idCommentNum").text(commentNum);
$("#idScoreNum").text(scoreNum);
$("#idRankNum").text(rankNum);
$("#idReadNum").text(readNum);
}, 100);
</script>
注意：
該程式碼主要用於實現個人資訊模組的資料展示。
部落格特殊用法
個人建議使用 Typora 作為 Markdown 編寫工具用於編寫部落格，寫完後複製到部落格園進行釋出。
- 標題用法，該主題標題相容的是 h2，所以需要下面的寫法：
## 這是一個標題
- 圖片用法，預設圖片會有 10px 的 padding，提供了兩個引數：
- border：給圖片加上邊框。
- bg-black：給圖片加上大黑邊，常用於黑背景的截圖。
- 其它元件如表格，列表都做了美化，直接使用就行。
- 每個部落格都需要分類和標籤，否則詳情頁頭部展示會有缺失，影響美觀。
特別說明
如果在使用過程中又遇到什麼問題，可以掃描右邊的二維碼，加群直接聯絡我。
設計整理不易，希望大家在使用的時候能夠在自己的頁面上加上本文的地址。
由於該主題還處於不停完善中，可能會不定期更新樣式，修復 BUG，具體版本參考文章末尾的更新時間，及時獲取最新配置。
更新資訊如下：
更新時間：2022-07-12 10:25
更新內容：
- 優化詳情頁頭部行距
- 新增側邊欄粉絲，關注可點選
- 修復側邊欄標題長度溢位問題
- 新增主題按鈕