美化你的部落格 | 來看這篇指導教程

摘要： 前言 好的部落格主題不僅美觀大方，而且能促進主人書寫的願望，博主也是個喜歡折騰的人，前前後後對自己現在的部落格整容過很多次，動過很多次刀，很多人看我部落格都說“博主，你的主題666”。其實我很抱歉啊，因為這主題並不是我原創的。我當時也是逛部落格園突然發現了該款主題，然後自己就套用...

前言

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

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

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

定製程式碼

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

可以參考：明志健致遠

部落格園Markdown語法

程式員寫部落格，我推薦用Markdown，因為用Markdown寫文章就像寫程式碼的感覺一樣。部落格園大概是2014年將markdown語法引進來的。參考： ofollow,noindex" target="_blank">新功能釋出！Markdown寫部落格！ 。Markdown的語法，不同的平臺大致一樣。部落格園稍微有點區別，例如圖片的應用，其他編輯器通過@會將描述顯示在圖片下方，而部落格園不支援。部落格園的Markdown語法詳情可以參考 markdown在部落格園的使用 。

這裡推薦幾款Markdown編輯器，

• 馬克飛象

  馬克飛象

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

  

唯一的缺點是我公司禁用這些筆記類工具。大公司都有這樣的安全規定。想哭。

• Sublime Text3
  Sublime Text3不多說了，程式設計師最熟悉的小夥伴了，輕量、簡潔、高效、跨平臺的編輯器，只不過用它寫markdown之前需要一翻折騰，具體怎麼折騰法我就不詳細說了，網上的教程很多，也很詳細。
• Cmd Markdown
  我為什麼推薦它？因為它是我們公司的漏網之魚，噓，請不要聲張，哈哈。博主在公司專案不忙的時候就偷偷的在上面寫寫文章，聯網自動同步，也是可免費可收費的，但是免費的不支援圖片。

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

程式碼高亮

這裡推薦兩款高亮的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
}

.cnblogs-markdown .hljs {
display: block;
overflow-x: auto;
padding: .5em;
background: #23241f!important;
color: #FFF;
white-space: pre;
word-break: normal
}

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

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

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

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

.hljs-strong {
font-weight: 700
}

.hljs-emphasis {
font-style: italic
}

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

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

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

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

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

.cnblogs-markdown code,.cnblogs-post-body code {
display: inline-block;
padding: 2px 4px;
font-size: 90%!important;
color: #c7254e;
background-color: #f9f2f4!important;
border-radius: 4px;
border: none!important
}

.cnblogs-markdown .hljs,.cnblogs-post-body .hljs {
font-family: "Courier New",sans-serif!important;
font-size: 13px!important;
line-height: 1.5!important;
padding: 5px!important
}

文章目錄

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