背景
最近半年都沒顧得上寫博客，突然一上來，就覺得博客的皮膚很不耐看...
以前使用的這套皮膚是基於LessIsMore上參照別人的樣式做了部分調整，原始代碼 fork 自dunwu/fragment，而作者已經走上了自建blog的道路，於是決定換一套極簡風的樣式。
伸手黨的奮斗經歷
雖然博客園上有很多類似美化你的博客 | 來看這篇教程這種一步一步教你自定義皮膚的教程，但我相信絕大多數人都是和我一樣的伸手黨，所以以下就是我伸手的過程。
博客園頁面結構
首先需要了解博客園頁面設置自定義部分的一些基礎知識，博客園的 設置 中和頁面相關的有以下幾個部分：
- 博客皮膚
- 頁面定制 CSS 代碼
- 博客側邊欄公告
- 頁首 HTML 代碼
- 頁腳 HTML 代碼
博客皮膚其實就是一套主題，包含html、js以及css，博客皮膚是必選的，因此在自定義主題時盡量選擇樣式簡單的皮膚，這種皮膚對頁面的修改較少，不會有復雜的js和css，大大降低出問題的概率。
頁面定制 CSS 代碼、博客側邊欄公告、頁首 HTML 代碼、頁腳 HTML 代碼這4個模塊其實都是在頁面上添加HTML代碼，博客園的頁面結構大致如下：
<html>
<head>
<!-- meta/favicon/title -->
...
<!-- 全局公共CSS -->
<link rel="stylesheet" href="/css/blog-common.min.css?v=eJQE8raBiZQaXXSaPTciUQCLTIh6ozn6FTo1VIJimsY">
<!-- 頁面定制 CSS 代碼 -->
<link type="text/css" rel="stylesheet"
href="https://www.cnblogs.com/larva-zhh/custom.css?v=MwAxsYrQ+WS5UTS4SoGsve1W3qQ=">
<!-- 皮膚模板預定義的CSS和JS -->
...
</head>
<body>
<div id="page_begin_html">
<!-- 頁首 HTML 代碼 -->
</div>
<div id="home">
<div id="header">
<!-- 文章頂部標題欄、導航欄HTML -->
</div>
<div id="main">
<div id="mainContainer">
<div id="forFlow">
<div id="post_detail">
<div id="topics">
<div id="post">
<h1 class="postTitle">
<!-- 文章標題 -->
</h1>
<div class="clear"></div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
<!-- 實際發布的文章內容 -->
</div>
<div id="MySignature" style="display: block;">
<!-- 文章簽名 -->
</div>
<div class="clear"></div>
<div id="blog_post_info_block">
<div id="BlogPostCategory">
<!-- 分類鏈接 -->
</div>
<div id="EntryTag">
<!-- 標簽鏈接 -->
</div>
<div id="blog_post_info">
<div id="green_channel">
<!-- 分享和關注操作鏈接 -->
</div>
<div id="author_profile">
<!-- 作者信息，關注數等 -->
</div>
<div id="div_digg">
<!-- 推薦 -->
<div class="diggit" onclick="votePost(13546251,'Digg')">
<span class="diggnum" id="digg_count">0</span>
</div>
<!-- 反對 -->
<div class="buryit" onclick="votePost(13546251,'Bury')">
<span class="burynum" id="bury_count">0</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips">
</div>
</div>
...
</div>
<div class="clear"></div>
<div id="post_next_prev">
<!-- 上一篇和下一篇的鏈接 -->
</div>
</div>
</div>
<div class="postDesc">
<!-- 閱讀數、發布日期、收藏數等-->
</div>
</div>
</div>
</div>
<div id="comment_form" class="commentform">
<!-- 評論編輯框 -->
</div>
</div>
</div>
<div id="sideBar">
<!--側邊欄-->
</div>
</div>
<div id="footer">
<!--頁面底部 Copyright聲明等-->
</div>
</div>
<div id="page_end_html">
<!--頁腳 HTML 代碼 -->
</div>
...
</body>
</html>
篩選成品皮膚
作為博客園的用戶，其實大家都有使用github作為代碼倉庫的習慣，最不濟也會用gittee，所以只需要去github上搜索cnblog theme就會發現有很多倉庫。
剩下的就是慢慢篩選你喜歡的皮膚了，我個人推薦兩款極簡風的主題：
類似 BNDong 這種強調首屏大圖和炫酷背景的主題對閱讀的干擾太大了。
部署&微調
最終，我選擇了 cnblogs-theme-silence ，雖然我覺得 cnblogs-theme-next 的閱讀進度挺有意思的。
部署
部署方式參考 部署指南，作者寫的很詳細。
右側目錄微調
我選擇的是 silence 主題的默認樣式，這個樣式限制了目錄的最大高度為350px，所以如果標題較多的話就會出現縱向滾動條，不喜歡。因此通過瀏覽器的devTools定位到目錄列表，找到 ul 的樣式 class 名為 .esa-catalog-contents ul
然后只需在 設置 的 頁面定制CSS 中加上 .esa-catalog-contents ul{max-height:100%}即可。同時也需要將字體稍微放大一些，所以同時添加上 .esa-catalog-title{font-size:14px}.esa-catalog-contents{font-size:14px} 。
Table微調
首先是字體大小，Table內的字體只有12px，看得會很累，因此需要將字體稍微調大一點，在 設置 的 頁面定制CSS 中加上 #topics .postBody table{font-size:14px}即可。
再來是背景色，參考github的表格的隔行換背景色，只需在定制CSS中加上tr:nth-child(odd){background:#F5F8FA}。
禁用捐贈模塊
參考文檔設置 sponsor: { enable: false} 並未生效，猜測可能是 bug，不過沒關系，我們還可以通過CSS來控制。通過 devTools 定位到 sponsor 元素的class為esa-sponsor。
然后只需在 設置 的 博客側邊欄公告 中加上如下代碼：
<script type="text/javascript">
$('.esa-sponsor').attr('style','display:none;');
</script>
主題的CSS比頁面定制 CSS 代碼要更靠近元素，因此只能通過修改元素style來隱藏。