好的博客主題不僅美觀大方，而且能促進主人書寫的願望，博主也是個喜歡折騰的人，前前後後對自己現在的博客整容過很多次，動過很多次刀，很多人看我博客都說“博主，你的主題666”。其實我很抱歉啊，因爲這主題並不是我原創的。我當時也是逛博客園突然發現了該款主題，然後自己就套用了下，研究了下 js，最後再進行重新編輯定製了些功能，添加了一些博主自己喜歡的內容，如代碼高亮等等。

博主是名 Java 開發工程師，剛剛開始工作的時候，那時候還不是很流行現在的微服務以及前後端分離的項目架構。博主記得第一年面試的時候還被面試官問到 Jquery 的選擇器，Ajax，以及 CSS 的盒子模型等相關的前端技術。而且第一份工作也是前後端都寫，因爲 java 的 jsp 技術也有寫頁面的能力，所以公司裏面沒有前端，只有一個美工(不知道美工屬不屬於前端，因爲之前有人和我爭論過，說美工不屬於前端)，美工給我們製作下靜態頁面就可以了，我們再填充靜態頁面。

說了這麼多，其實，我只是想解釋下我的 JS 和 CSS 只是菜鳥級別的，我只是博客主題的搬運工，我的這篇隨筆不是想教各位大神如何定製主題，而是給大家推薦一些好的現存的 Code 和案例。

定製代碼

雖然 CSDN -自稱全球最大的中文 IT 社區，而且也確實做的比博客園大，因爲 CSDN 的商業化做的更好，但也是因爲這樣，CSND 的博客頁面廣告覆蓋率特別大，不說我們平時寫技術的人看着難受，每次閱讀起來也很難受，而且主題樣式我個人認爲及其醜陋。博客園也有廣告，但是我們可以定製代碼，書寫自己的主題。前端技術能力強的 Coder 完全可以做到博客主題大變身，看起來像是個人博客一樣，一點博客園的影子都沒有。廣告之類的我們也可以自己通過樣式代碼去掉，可以使得博客界面簡介大方，雖然這樣可能不好，但是博客園也沒有強制拒絕你這樣做。

如何定製？我們可以通過【設置】中定製自己的 CSS 代碼，當然是先要申請，並通過審覈的。
我們原始的主題一般都選擇的是 SimpleMemory 主題，因爲這款主題純白簡潔。

禁用模板默認CSS

勾選上【禁用模板默認 CSS 】，填上自己整理的 CSS 代碼，如下：

博客側邊欄公告

這裏面可以定製自己的主頁面 HTML 和一些 JS 功能，如下：

小時鐘

推薦一個時鐘的小掛件：博客小時鐘，可以下載下來上傳到博客園文件中，也可以直接引用

<html>
<embed height="200" type="application/x-shockwave-flash" width="200" src="http://www.blogclock.cn/swf/S1000746cf11489-9.swf" wmode="transparent" quality="high">
</html>

頁首Html代碼

支持js，可以添加讚賞，返回文章頂部等功能。

頁腳Html代碼

支持js，可添加音樂播放器等功能。

可以參考：明志健致遠

博客園Markdown語法

程序員寫博客，我推薦用 Markdown，因爲用 Markdown 寫文章就像寫代碼的感覺一樣。博客園大概是2014年將 markdown 語法引進來的。參考：新功能發佈！Markdown寫博客！。

Markdown的語法，不同的平臺大致一樣。博客園稍微有點區別，例如圖片的應用，其他編輯器通過@會將描述顯示在圖片下方，而博客園不支持。博客園的 Markdown 語法詳情可以自行網絡學習。

編輯器的話就不要用博客園自己的了，你寫的時候會急死，不多說你親身體會下就知道了。可以先在其他編輯器上寫好，再 Copy 過去就可以了。前提是你先要設置它的默認編輯器爲 Markdown，可在【設置】-【選項】中修改，如下：

這裏推薦幾款Markdown編輯器，

馬克飛象
印象筆記的產品，本人目前在用，有網頁版和客戶端版，可免費可付費，影響的只是是否你需要同步到雲上印象筆記，我喜歡它的原因是因爲它的高亮代碼是在太漂亮了，而且可以免費導出到本地，類型可以是 Markdown，HTML，PDF 等格式，關鍵是並保留高亮的樣式。截個圖你體驗下：

唯一的缺點是我公司禁用這些筆記類工具。大公司都有這樣的安全規定。想哭。
Sublime Text3
Sublime Text3 不多說了，程序員最熟悉的小夥伴了，輕量、簡潔、高效、跨平臺的編輯器，只不過用它寫markdown之前需要一翻折騰，具體怎麼折騰法我就不詳細說了，網上的教程很多，也很詳細。
Cmd Markdown
我爲什麼推薦它？因爲它是我們公司的漏網之魚，噓，請不要聲張，哈哈。博主在公司項目不忙的時候就偷偷的在上面寫寫文章，聯網自動同步，也是可免費可收費的，但是免費的不支持圖片。
Md2All
如果你是公衆號維護者，這個工具可以將Markdown格式完美的適配到微信公衆號裏面，包括代碼的高亮，而且還有多種樣式可以做選擇。

當然還有其他很多各種各樣的編輯器，如有道筆記等等，在這裏就不一一介紹了，根據個人的使用習慣和愛好選擇吧。

博客園支持的幾個特殊的 Markdown 語法：

1、文字顏色：

<font color=#7CCD7C>綠色</font>
<font color=#FFD700>黃色</font>
<font color=#EE4000>紅色</font>

效果參考：綠色，黃色，紅色。

2、文字字體

<font face="黑體">我是黑體字</font>

效果參考：我是黑體字

代碼高亮

這裏推薦兩款高亮的 CSS，當然這是針對 Markdown 類文章的。

第一款 CSS 代碼

.cnblogs-markdown pre {
	white-space: pre!important
}

.cnblogs-markdown .hljs {
	display: block!important;
	overflow-x: auto!important;
	padding: 1em!important;
	background: #282c34!important;
	border: 1px solid #fff!important;
	border-radius: 5px!important;
	font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;
	font-size: 15px!important
}

.hljs,.hljs-subst,.hljs-tag {
	color: #f8f8f2!important
}

.hljs-emphasis,.hljs-strong {
	color: #a8a8a2!important
}

.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote {
	color: #ae81ff!important
}

.hljs-meta,.hljs-regexp {
	color: #fd971f!important
}

.hljs-built_in,.hljs-builtin-name,.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title {
	color: #a6e22e!important
}

.hljs-strong {
	font-weight: 700
}

.hljs-emphasis {
	font-style: italic!important
}

.hljs-attr,.hljs-name,.hljs-selector-tag,.hljs-symbol {
	color: #f74449!important
}

.hljs-attribute,.hljs-keyword {
	color: #66d9ef!important
}

.hljs-class .hljs-title,.hljs-params {
	color: #f8f8f2!important
}

.hljs-addition,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable {
	color: #e6db74!important
}

.hljs-comment,.hljs-deletion {
	color: #999!important
}

效果如下：

第二款 CSS 代碼

pre {
    white-space: pre;
    word-wrap: normal
}

div.postBody {
    color: #666;
    text-shadow: 0 0px rgba(0, 0, 0, 0.05);
}
.cnblogs-markdown .hljs{
  display: block;
  overflow-x: auto;
  padding: 0.5em !important;
  background: #23241f !important;
  font-size: 14px !important;
 /* font-weight:bold !important;*/

}

.cnblogs-markdown .hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.cnblogs-markdown .hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}

效果如下：就是博主最開始在用的

其他高亮的代碼

如果以上兩種都不是你喜歡的高亮類型，那麼我們還可以通過另一種方式獲得更多種高亮的代碼，不過需要讀者自己處理下，它就是 >>highlight.js，它支持185中代碼語言，共有85個高亮代碼。

我們可以在>>這裏選擇預覽自己想要的高亮類型。如果你看到自己中意的高亮類型，先記住它的 Styles 的名稱，例如：Agate。

之後我們需要先在>>這裏下載highlight.js的代碼，選擇支持的代碼語言，一般常用的 Common 中是全部默認選中的，已經包括 Java，Html，CSS，PHP，JS，Python等常用的語言了。

下載完成之後，解壓到本地文件夾，解壓後的文件夾中有 /styles 文件夾，該文件夾裏面就是我們之前看到的所有高亮代碼，我們找到我們之前選中喜歡的CSS文件，例如：agate.css。將它用Notepad++或者 Sublime text文本編輯器打開，裏面就是我們需要的高亮代碼，以 agate.css 爲例，代碼如下：

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #333;
  color: white;
}

.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-code,
.hljs-emphasis {
  font-style: italic;
}

.hljs-tag {
  color: #62c8f3;
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
  color: #ade5fc;
}

.hljs-string,
.hljs-bullet {
  color: #a2fca2;
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
  color: #ffa;
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: #d36363;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
  color: #fcc28c;
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
  color: #888;
}

.hljs-regexp,
.hljs-link {
  color: #c6b4f0;
}

.hljs-meta {
  color: #fc9b9b;
}

.hljs-deletion {
  background-color: #fc9b9b;
  color: #333;
}

.hljs-addition {
  background-color: #a2fca2;
  color: #333;
}

.hljs a {
  color: inherit;
}

.hljs a:focus,
.hljs a:hover {
  color: inherit;
  text-decoration: underline;
}

但是這種我們是不能直接 Copy 到博客園的頁面定製CSS代碼中使用的，你會發現它不起作用，由於博客園的原因它不能識別，我們需要在前面加上 .cnblogs-markdown，修改後的代碼如下(注意第一行的區別)：

.cnblogs-markdown .hljs {
	display: block;
	overflow-x: auto;
	padding: .5em!important;
	background: #333!important;
	color: #white!important;
}

.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-code,
.hljs-emphasis {
  font-style: italic;
}

.hljs-tag {
  color: #62c8f3;
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
  color: #ade5fc;
}

.hljs-string,
.hljs-bullet {
  color: #a2fca2;
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
  color: #ffa;
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: #d36363;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
  color: #fcc28c;
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
  color: #888;
}

.hljs-regexp,
.hljs-link {
  color: #c6b4f0;
}

.hljs-meta {
  color: #fc9b9b;
}

.hljs-deletion {
  background-color: #fc9b9b;
  color: #333;
}

.hljs-addition {
  background-color: #a2fca2;
  color: #333;
}

.hljs a {
  color: inherit;
}

.hljs a:focus,
.hljs a:hover {
  color: inherit;
  text-decoration: underline;
}

其實主要區別就是在第一行，需要將.hljs 改爲 .cnblogs-markdown .hljs，但是博客園自己是有一套高亮的Markdown的語法的，所以我們有時候需要在自己的 CSS 代碼後加個 !important,以提高自己 CSS 的優先級。

通過以上的介紹，我們可定製的高亮代碼可就是太多了，應該能滿足大部分讀者的審美口味了。如果還是沒有，那可能你確實太挑了，我也愛莫能助了啊。

文章目錄

隨筆如果書寫的內容很多，這時候有個文章目錄的話，是很方便讀者閱讀的，而且也能快速瞭解文章的總體內容。我看到過很多種類型的目錄，有的是直接內嵌在文章裏面的，這種肯定不好，因爲太佔空間了，如果標題過多，那麼讀者開始文章簡介還沒看到，先閱讀了一串又臭又長的目錄，瞬間心情就不好了。最好的目錄還是懸浮在頁面上的，能隱藏能展開。

這裏推薦一款，懸浮目錄，大家平時逛百度百科的時候，不知道你們有沒有注意到它的目錄，和這款很類似。隨筆起始的時候默認隱藏，當向下閱讀到一定長度之後，目錄自動顯示出來，也可以點擊圖標按鈕進行收縮，很智能人性化。

如果想要更多的目錄樣式，請看這裏，更多目錄。

看板娘·小蘿莉

小蘿莉即 L2D網頁動畫人物，是L2Dwidget.js的功能，效果靜態圖如下。

只需要在【頁首html代碼】中引入L2Dwidget.js即可。

<!-- 右下角live2d效果 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/[email protected]/assets/shizuku.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

<!--
其他可選的模型：
黑貓：https://unpkg.com/[email protected]/assets/hijiki.model.json
萌娘：https://unpkg.com/[email protected]/assets/shizuku.model.json
白貓：https://unpkg.com/[email protected]/assets/tororo.model.json
狗狗：https://unpkg.com/[email protected]/assets/wanko.model.json
小可愛：https://unpkg.com/[email protected]/assets/z16.model.json
小可愛：https://unpkg.com/[email protected]/assets/koharu.model.json
-->

如果想修改蘿莉的css樣式，頁面具體HTML元素ID是 live2dcanvas，如下圖，點擊圖片放大。根據這個元素ID可以自定義重寫CSS樣式。

鼠標點擊煙花效果

同樣在【頁首html代碼】中引入如下即可

<!-- 鼠標點擊效果 -->
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>

圖片放大效果

很多時候圖片比較小，圖片文字在博文中不是很清楚，這時候如果可以點擊放大就很好了，推薦一個實現該功能的代碼，放在【頁腳Html代碼】中，具體的代碼如下：

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/jajian/img.enlarge.js"></script>
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;
    width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
    <img id="bigimg" style="height: auto;width: 65%;border: 5px solid #7e8c8d; 
        margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>

小老鼠遊戲控件

【側邊欄公告】添加如下代碼：

<!-- 小老鼠遊戲控件 -->
<div className="sidebarMouse">
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque">
</object>
</div>

人體時鐘控件

【側邊欄公告】添加如下代碼：

<embed wmode="transparent"
src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" 
quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" 
align="middle" allowscriptaccess="always" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">

Github絲帶鏈接

【頁首HTML】代碼中填入如下內容：

<a href="https://github.com/you">
<img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1" style="cursor: pointer;position: fixed;top: 0;right: 0;border: 0;z-index: 9999;">
</a>

更多絲帶可以參考：github-ribbons

GitHub Corners

另外一款 Github鏈接，是角邊型的，更多可以參考：GitHub Corners

主題推薦

Silence
首先感謝主題主人 esofar 的無私分享，該主題簡潔時尚，很適合程序員，代碼支持高亮，代碼開源。
具體的操作步驟見：一款專注於閱讀的博客園主題
cnblogs-theme-simpcode
一款簡單幹淨的專屬程序員的博客園主題，代碼 Github 地址：cnblog-theme-simpcode，示例博客：noobgod。
Bili2.0
響應式佈局，首頁全屏背景logo，個性定製，首頁公告消息。
make_cnblogs_better
示例博客：夏日淺笑、，代碼地址：Summertime-Wu，優化地址。
BNDong
這個主題就是博主現在用的原作，第一感覺就是美觀，但是應用到的組件太多了，而且元素存放在Github上，所以如果網絡不好的話，打開比較費力。博主這個是在原著的基礎上自己做了一些定製化的修改。

後續

暫時先添加這麼多，後期博主看到了更多的有趣的再在此基礎上添加。如果喜歡請推薦支持。

美化你的博客 | 來看這篇教程