寫在前面
本次博客主題定制，主要參考了以下幾位大佬的博客，在此表示衷心的感謝！
主題特色
本博客定制的主題，采取禁用 CSS 樣式的方式，全面修改博客園默認樣式，結合 JS 腳本實現元素的增刪修改等，制作時間一共耗時三天。下面展示主題定制的主要內容：
整體風格
主題的整體風格為亮色，背景設為灰白色，板塊之間統一間隔為20px，使得網頁布局清晰明了，閱讀體驗感更舒適。
頂部導航欄
頂部的導航欄采取和通常導航欄樣式，即左右兩邊空出，主要寬度與內容寬度一致。在導航欄里，我還將搜索框移動到了里面，方便查詢一些博客。
首頁輪播
首頁輪播是我在其他網頁素材網站找到的 demo 修改而成的，主要放置一些我想分享給園友的內容。比如視頻解析、我喜歡的動漫、實用工具等等。
側邊板塊
側邊的板塊，我主要修改了公告部分，將個人信息整合到一起，看起來更直觀。此外，根據我的個人喜好，添加了教學日歷（其實也沒上課了，就是想看下時間，懶得翻教務處的教學周），以及聯系方式。
首頁博文摘要
這里主要適配了兩種樣式，即帶圖的和不帶圖的。之前做的主題用 js 調整圖片文字位置，導致如果博文沒有文字時，圖片就會被挪錯位置，這樣很不好！因為畢竟不是每一篇博文都想插個圖。
頁腳
頁腳基本沒改，但是加了一個站長工具，這個用來統計訪問的。
博文正文
博文正文的風格定制樣式為 Github 樣式，看起來十分舒服。其中我還修復了表格不能居中滾動的問題。
博文代碼復制
由於之前設計了 MATLAB 語法高亮 導致代碼不能復制，這里我重新設計了代碼復制的功能以及布局。現在既可以復制用markdown格式寫的代碼，又可以復制用 <pre> 標簽包裹的 MATLAB 定制的代碼。
博文支持與反對
之前的主題可以捐贈和收藏，在這里我就沒有弄了，好像也沒有人捐贈，用不着，來了留個言就可以的。
博客評論
評論的樣式和之前的代碼一樣，樣式沒有變。
博客目錄
感覺這次最大的改進就是博客目錄了，當前章節會隨着頁面滾動高亮，並且下滑時，直接置頂固定，閱讀體驗十分舒服。
主題配置
主題完全開源，但是很多東西都是我一點點往上加的，所以不具有那種全局性。具體要修改的地方你可以根據效果手動調整（主要是那些資源鏈接）。
頁面定制CSS代碼
粘貼代碼，然后禁用主題。點擊查看代碼
博客側邊欄公告
<style>
.myprofile {
margin: 20px 0 0 0;
/*display: table;*/
/*width:100%;*/
height: auto;
}
.myprofile-bottom {
padding: 20px 0;
border-top: 1px solid #F4F4F4;
}
.myprofile-top {
display: inline-flex;
margin: 0px auto 20px auto;
*/
}
.avatar {
width: 80px;
float: left;
}
.avatar img {
width: 100%;
/*height: 100%;*/
border: 1px solid #ddd;
border-radius: 50%;
}
.profile-info {
float: left;
margin-left: 20px;
}
.nickname {
font-size: 20px;
line-height: 30px;
font-weight: 600;
}
#mywords {
line-height: 20px;
}
.myprofile ul {
columns: 3;
}
.myprofile ul li {
text-align: center;
list-style-type: none;
line-height: 20px;
}
</style>
<script type="text/javascript">
$('#navigator').append($('#widget_my_zzk'));
$('#sidebar_search').remove();
$("#profile_block a").each(function(idx) {
if (idx == 1) {
$('#myyear').html('園齡<br>' + $(this).context.innerText);
}
if (idx == 2) {
$('#myfollower').html('粉絲<br>' + $(this).context.innerText);
}
if (idx == 3) {
$('#myfollowee').html('關注<br>' + $(this).context.innerText);
}
});
$('#profile_block').css('display', 'none');
$('#mywords').html('Stay hungry，Stay foolish .');
$('#mypost').html($('#stats_post_count').text().replace(/\-/g, "<br>"));
$('#myarticle').html($('#stats_article_count').text().replace(/\-/g, "<br>"));
$('#mycomment').html($('#stats-comment_count').text().replace(/\-/g, "<br>"));
</script>
<div class="myprofile">
<div class="myprofile-top">
<a class="avatar" href="https://home.cnblogs.com/u/gshang/">
<img src="https://pic.cnblogs.com/avatar/1489774/20190708183140.png" alt="240">
</a>
<div class="profile-info">
<a class="nickname" href="https://home.cnblogs.com/u/gshang/">
GShang
</a>
<p id="mywords"></p>
</div>
</div>
<div class="myprofile-bottom">
<ul>
<li><a href="https://home.cnblogs.com/u/gshang/" id="myyear">
</a>
</li>
<li><a href="https://home.cnblogs.com/u/gshang/followers/" id="myfollower">
</a>
</li>
<li><a href="https://home.cnblogs.com/u/gshang/followees/" id="myfollowee">
</a>
</li>
</ul>
</div>
<div class="myprofile-bottom">
<ul>
<li id="mypost">
</li>
<li id="myarticle">
</li>
<li id="mycomment">
</li>
</ul>
</div>
</div>
頁腳Html代碼
<!--主題腳本-->
<script src="https://gitee.com/j-x/home/raw/master/Theme.js"></script>
<!--代碼復制-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!--文章目錄-->
<script src="http://files.cnblogs.com/files/ctxsdhy/scrollspy.js"></script>
<script src="http://files.cnblogs.com/files/ctxsdhy/stickUp.min.js"></script>
<script src="http://files.cnblogs.com/files/jackson0714/Comments.js"></script>
<!--符號-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<!--語法高亮-->
<!--<script src="https://blog-static.cnblogs.com/files/gshang/highlight.pack.js"></script>
<script> hljs.initHighlightingOnLoad(); </script> -->
<script src="https://blog-static.cnblogs.com/files/gshang/matlab-highlight.js"></script>
<script>
highlightMATLABCode();
</script>
<!--自定義語法-->
<script src="https://gitee.com/j-x/home/raw/master/mymd.js"></script>
<!--放大圖片-->
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);z-index:999999999;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" src="" />
</div>
</div>
<!--頁腳站長工具-->
<div id="page_end_html">
站長工具：<script src="https://js.users.51.la/20325957.js"></script>
</div>
寫在最后
前端開發是一件十分有意思的事情，按照自己的喜好去實現個性化定制，這感覺太棒了！但是，話說回來，比起第一位大佬，我的這個主題太小兒科了，很多東西都是東拼西湊的，不夠簡潔，不夠全局化，希望后期能慢慢改進把！