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

標籤：就是   tor   splay   微服務   前端技術   使用   菜鳥   ring   人性化   

前言

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

博主是名Java開發工程師，也工作了5年左右了，剛剛開始工作的時候，那時候還不是很流行現在的微服務以及前後端分離的項目架構。博主記得第一年面試的時候還被面試官問到Jquery的選取器，Ajax，以及CSS的盒子模型等相關的前端技術。而且第一份工作也是前後端都寫，因為java的jsp技術也有寫頁面的能力，所以公司裡面沒有前端，只有一個美工(不知道美工屬不屬於前端，因為之前有人和我爭論過，說美工不屬於前端)，美工給我們製作下靜態頁面就可以了，我們再填充靜態頁面。
說了這麼多，其實，我只是想解釋下我的JS和CSS只是菜鳥層級的，我只是部落客題的搬運工，我的這篇隨筆不是想教各位大神如何定製主題，而是給大家推薦一些好的現存的Code和案例。

定製代碼

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

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

然後勾選上【禁用模板預設CSS】，填上自己整理的CSS代碼，如下：

接下來就是【部落格側邊欄公告】，這裡面可以定製自己的首頁面HTML和一些JS功能，如下：

頁首Html代碼，支援js，可以添加讚賞，返迴文章頂部等功能。

頁尾Html代碼，支援js，可添加音樂播放器等功能。

可以參考：明志健致遠

部落格園Markdown文法

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

編輯器的話就不要用部落格園自己的了，你寫的時候會急死，不多說你親身體會下就知道了。可以先在其他編輯器上寫好，再Copy過去就可以了。前提是你先要設定它的預設編輯器為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}

效果如下：

文章目錄

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

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

主題推薦

• Silence
  首先感謝主題主人esofar的無私分享，該主題簡潔時尚，很適合程式員，代碼支援高亮，代碼開源。
  具體的操作步驟見：一款專註於閱讀的部落格園主題

後續

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

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