閱讀目錄

1.博客園后臺設置
2.自定義樣式的設置

　　博客園美化相關文章目錄：博客園博客美化相關文章目錄

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

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

本文原文地址：博客美化(1)基本后臺設置與樣式設置

回到目錄

1.博客園后臺設置

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

1.1博客標題與子標題

　　博客標題文字的設置在 “博客后臺管理”->“設置”中，如下圖，本文的設置：

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

1.2控制博客控件顯示

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

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

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

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

回到目錄

2.自定義樣式的設置

　　注意，自定義樣式要用到css和js文件，需要有js權限，如果沒有js權限，需要自己發郵件向管理員申請開通，郵箱：contact@cnblogs.com。介紹自定義樣式的細節，按照博客園后臺設置提供的“設置”細節先后順序來。

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>