上周，部落格園官方團隊又釋出了一款新的皮膚：SimpleMemory ，作者是sevennight。這款皮膚個人感覺非常高大上，而且一掃本人心中的疑惑，以前很多不能實作或者想要實作的，都滿足了，是以果斷将自己的部落格模版切換到了SimpleMemory模版(也就是你目前看到的部落格頁面)，但同時也碰到了很多問題，是以一起記錄下載下傳，并搜集了相關資料，一起分享給大家，同時也是自己折騰的一個總結，以後忘記了也可以翻出來學習學習。
部落格園美化相關文章目錄：部落格園部落格美化相關文章目錄
一直都拜膜那些部落格園的皮膚設計高手，由于本人對前端研究甚少，是以js,css這種東西隻能看得懂最基本的，會簡單改改。然後一直對自己的部落格皮膚不滿意，也找不到好的文章例子來對應修改。部落格園雖然有一些文章，但不全面，沒辦法，隻能自己慢慢鑽研。上周，部落格園官方團隊又釋出了一款新的皮膚：SimpleMemory ，作者是sevennight。這款皮膚個人感覺非常高大上，而且一掃本人心中的疑惑，以前很多不能實作或者想要實作的，都滿足了，是以果斷将自己的部落格模版切換到了SimpleMemory模版(也就是你目前看到的部落格頁面)，但同時也碰到了很多問題，是以一起記錄下載下傳，并搜集了相關資料，一起分享給大家，同時也是自己折騰的一個總結，以後忘記了也可以翻出來學習學習。接下來将循序漸進，介紹部落格園背景設定與樣式設定的相關内容。
進入主題之前，先感謝部落格園團隊，sevennight，marvin，博皮小組以及@Newlife群-長沙老豬，以及其他部落格園關于樣式設計制作文章的作者，沒有一一列出，也記不清了。本文是在很多文章和現有部落格模版的基礎上，自己磕磕碰碰，總結下來的。
本文原文位址：部落格美化(1)基本背景設定與樣式設定
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釋出，敬請關注。
.NET資料挖掘與機器學習，作者部落格:
http://www.cnblogs.com/asxinyu
E-mail:[email protected]