一直都拜膜那些部落格園的面板設計高手，由於本人對前端研究甚少，所以js,css這種東西只能看得懂最基本的，會簡單改改。然後一直對自己的部落格面板不滿意，也找不到好的文章例子來對應修改。部落格園雖然有一些文章，但不全面，沒辦法，只能自己慢慢鑽研。上週，部落格園官方團隊又釋出了一款新的面板：SimpleMemory ，作者是sevennight。這款面板個人感覺非常高大上，而且一掃本人心中的疑惑，以前很多不能實現或者想要實現的，都滿足了，所以果斷將自己的部落格模版切換到了SimpleMemory模版(也就是你當前看到的部落格頁面)，但同時也碰到了很多問題，所以一起記錄下載，並蒐集了相關資料，一起分享給大家，同時也是自己折騰的一個總結，以後忘記了也可以翻出來學習學習。接下來將循序漸進，介紹部落格園後臺設定與樣式設定的相關內容。

　　進入主題之前，先感謝部落格園團隊，sevennight，marvin，博皮小組以及@Newlife群-長沙老豬，以及其他部落格園關於樣式設計製作文章的作者，沒有一一列出，也記不清了。本文是在很多文章和現有部落格模版的基礎上，自己磕磕碰碰，總結下來的。

1.部落格園後臺設定

　　在設定樣式之前，其實還是瞭解一下部落格園後臺的相關設定比較好，畢竟後臺設定裡面提供了很多功能，可以解決問題。本人之前使用的是SimpleBlue模版，所以當初不會自定義css，也只能從後臺設定找一些辦法了。 

1.1部落格標題與子標題

　　部落格標題文字的設定在 “部落格後臺管理”->“設定”中，如下圖，本文的設定：

效果就是本部落格頂部的效果，而至於標題的格式如大小，顏色可以在自定義的css中修改，將在後面介紹。

1.2控制部落格控制元件顯示

　　部落格園的部落格是按照功能分為很多個部件（子控制元件）的，例如 公告欄，日曆，收藏夾，隨筆分類，閱讀排行榜等等，具體你可以看看本文當前頁面右側的部件，很豐富這些控制元件非常多，根據個人需要，可以自定義進行顯示或者不顯示。同時訂閱部落格的條數，以及部落格首頁顯示的部落格數目等等都可以進行設定。這樣就可以顯示重點內容，重點文章給讀者。具體設定頁面在： “部落格後臺管理”->“選項”頁面中，如下圖所示：

　　看看上圖的一些功能，很直觀，如可以選擇預設的編輯器，可以設定列表的數量，一起其他一些附加設定，如評論等等還是比較有用。特別是首頁，經過合理的設定，首頁就可以簡單一些，而不是一眼看來，多，雜，亂。下面也是這個頁面的設定，可以對部件的顯示進行設定：

如上圖所示，本部落格就將一些部件去掉了，如收藏夾，相簿等等。這樣空間就多了，也讓人感覺好一點。

　　特別要提示的是，每個部落格的預設頁面上的 “導航欄”，並且基本都會有“首頁”，“訂閱”，“聯絡”等欄目。這幾個欄目是可以在這裡通過設定而不顯示的，只有一個欄目比較特殊 ：“管理”，無法直接設定取消，需要自定義css，或者js來移除。這裡也是郵件諮詢了“部落格園團隊”，順便贊一個，部落格園團隊的回覆速度很快，也很耐心。這個移除方法我在後面的樣式設定裡面介紹。 

2.自定義樣式的設定

　　注意，自定義樣式要用到css和js檔案，需要有js許可權，如果沒有js許可權，需要自己發郵件向管理員申請開通，郵箱：[email protected]。介紹自定義樣式的細節，按照部落格園後臺設定提供的“設定”細節先後順序來。

2.1 頁面定製CSS程式碼

　　頁面定製就是用來修改當前頁面的，當然可以基於當前頁面，你也可以完全的自己編寫。如下圖我的部落格後臺“頁面定製CSS程式碼”的介面：

　　上面的CSS程式碼主要是設定正文的 標題的樣式的，也就是你現在看到的 h1,h2標題的格式。注意如果你點選了“禁用模版預設CSS”的話，那就要求你自己編寫或者借鑑其他人編寫一個符合部落格園規範的CSS檔案，否則會亂碼。當然也支援通過檔案的方式新增。你可以把你的CSS檔案上傳到“檔案”中，這樣可以直接通過上傳檔案的地址來引用對應的CSS檔案。這樣更方便。如我的後臺就就很多這樣的CSS和js檔案：

　　這裡就是設定CSS樣式的主要地方，當然具體的設定方法還是沒有講到，參考下一篇的內容。

 2.2 公告欄設定

　　公告欄如本部落格右上方所示，可以在後臺的“設定”中的“部落格側邊欄公告（支援HTML程式碼）”進行設定，公告欄的格式可以在CSS進行，這裡只需要輸入文字和簡單的連結就夠了，例如，本文就將 “管理”，“訂閱”等選單欄目移到了 “公告欄”，同時增加了部落格統計的程式碼(統計程式碼需要自己去http://histats.com/網站申請帳號，自己獲取自己部落格的程式碼)：

至於內容的顯示和統計按鈕的情況，大家可以對照當前頁面右上角的公告欄目。特別是 聯絡，訂閱 和管理 3個欄目，其實就是3個連結而已。

2.3 頁首Html程式碼

　　這裡可以自定義一些頁首的Html程式碼，例如引入外部功能的js,Css檔案等。也可以新增一些自定義的JS程式碼，當然要對JS比較精通啊，像我就不懂JS，為了刪除個元素還是請人遠端解決的。呵呵，不過沒關係，人生在於折騰，折騰來折騰去，也折騰得差不多了。我的頁首主要是載入了一個外部分享的js和自定義的CSS檔案，在模版CSS的基礎上對格式進行了簡單的修改。更加符合我的品味吧，不過大家有啥意見，也可以提出來。如下圖所示：

其中bootstrap.min.js和marvin.nav.my1502.css是一個自動生成目錄的css檔案，要感謝部落格園@marvin，當初除錯這個生成目錄的功能也花了1天時間，在修改為現在的模版後，出現了一點問題，還沒來得及去修改，暫時搞不清楚到底問題在哪裡。

2.4 頁尾Html程式碼

　　由於很多外部功能需要等待在頁面最後才能引入或者才能執行，所以部分的js和css檔案需要在這裡引入。例如上面提到的，我把“管理”欄目去掉了，就是通過在頁尾新增js程式碼刪掉的(部落格園團隊給的方法是設定#MyLinks1_Admin{display: none;})。然後手動通過js添加了幾個本部落格的自定義欄目，相當於一個目錄，就是頁面頂部大家看到的：

用的程式碼如下：

<script>
$(function(){
$("a").remove("#MyLinks1_Admin");/*刪除管理欄目*/
$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/asxinyu/">本站首頁</a></li>');
$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/asxinyu/p/4329642.html">彩票研究</a></li>');
$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/asxinyu/p/4329755.html">.NET開源</a></li>');
$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/asxinyu/p/4329742.html">Infer.NET</a></li>');
$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/asxinyu/p/4329742.html">機器學習</a></li>');
$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/asxinyu/p/4329747.html">X元件使用</a></li>');
$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/asxinyu/p/4329737.html">Math.NET</a></li>');
$("#navList").append('<li><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/asxinyu/p/4329753.html">Matlab</a></li>');
    //載入圖片
    var ponum1 = $(".postTitle").length;
    var ponum2 = $(".entrylistPosttitle").length;
    if(ponum1!=0)articleimg(ponum1);
    if(ponum2!=0)entrylistarticleimg(ponum2);
});
</script>

 當然還可以生成目錄等其他功能，也可以在這裡新增對應的程式碼或者檔案，來完成你要的功能。由於自定義樣式的內容比較多，特意放到了下一篇文章，將於近期釋出。請關注或收藏本部落格。下一篇文章網址：【分享】部落格美化(2)自定義部落格樣式細節 ，3.20-3.21釋出，敬請關注。