CnBlogs自定義博客樣式

文章有一個好的排版，將能夠增加閱讀者對其內容的興趣。本文總結了如何美化博客園中文章的部分顯示樣式。美化文章標題的顯示樣式、增添LaTex數學公式的顯示、目錄索引的顯示、添加文章末尾的固定信息。

0 獲取權限

首先，在自定一個博客樣式之前，我們需要進入博客園自定義博客模板的頁面，向博客園管理團隊申請頁面運行js的權限。【博客園】->【設置】->【博客設置】，點擊頁面上的js權限申請，然后填寫申請的理由，耐心等幾分鍾，再刷新一下，頁面就會顯示**支持js代碼 **。

1 美化文章標題

在【博客設置】頁面中的【頁面定制css代碼】框中輸入下面的css代碼即可完成文章標題的美化的。

#cnblogs_post_body
{
    color: black;      
    font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 15px;
}
#cnblogs_post_body h1    {
    background: #333366;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2    {
    background: #006699;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3    {
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h4{
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

要注意的是，下面的 【禁止模板默認css】這個復選框不要勾選，因為我們僅僅只自定義了文章標題，其他的標簽要靠默認的樣式才行。上面的這段定義文章標題樣式的代碼是從這位數據之巔大牛的博客頁面中趴下來的。點擊【保存】，然后刷新一下博客文章頁面，文章的標題就進行美化了，效果如下。

2 完美顯示Latex的數學公式

默認的博客文章對Latex的數學公式是無法顯示，想要在文章添加一些數學公式，都是采用截圖的方式，比較麻煩。但是在網上找到一個解析Latex公式的利器MathJax，只需要在博客頁面中添加MathJax.js就能完美的解析Latex格式的數學公式。

在博客設置頁面中的【頁首Html代碼】框中輸入如下js代碼。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

點擊【保存】，再刷新一下頁面，如果頁面中包含Latex語法公式，那么就能夠進行顯示。如，在文章有如下的內容，其中含有Latex語法公式。

在頁面中顯示的效果如下：

3 增添目錄索引和末尾固定信息

增添目錄索引和末尾的固定信息（如何聲明版權）需要自定js和css樣式，並且還要添加一個公共的bootstrap.js文件，地址為：http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js。其中增添目錄的索引的mystyle.js、 末尾固定信息的腳本mycnblogs.js 和一個樣式文件mystyle.css，都已經從數據之巔這里趴下來了，對文件中的部分代碼進行修改，以便可以達到我的要求，下面列舉文件中的修改地方。

**mycnblogs.js **

$(document).ready(function(){
	$("<div id='toTop'style='zoom:0;'></div>").appendTo($("body")).bind("click", function(){
		$("body,html").animate({ scrollTop: 0 }, 150);
	});

	$('#cnblogs_post_body pre').find('>code').parent().css({'border':'dashed 1px #aaa','border-left':'solid 2px #6CE26C'});
    <!--修改的地方-->
	$("#cnblogs_post_body").append('<br /><hr /><pre>感謝您的閱讀，如果您覺得閱讀本文對您有幫助，請點一下“<b>推薦</b>”按鈕。本文歡迎各位轉載，但是轉載文章之后<b>必須在文章頁面中給出作者和原文連接</b>。</pre>');
});

這里只修改了我文章末尾需要添加的固定信息。

mystyle.js

var u = $(this),
    v = u[0];

var title=u.text();
var text=u.text();

u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
		
if (v.localName === 'h2') {
    l++;
    m = 0;
    if(text.length>30) text=text.substr(0,30)+"...";
        j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
} else if (v.localName === 'h3') {
    m++;
    n = 0;
    if(q){
	    if(text.length>28) text=text.substr(0,28)+"...";
	    j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
    }
}else if (v.localName === 'h4') {
    n++;
    if(r){
        j += '<li class="h3Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>';
    }
}

在這個文件中，我只需要提取h2,h3,h4這三個標題作為目錄就行了，因為我寫文章一般沒有設置h1標簽，個人覺得它的字體太大了。

把相應的js和css文件趴下來進行修改，然后上傳，隨便上傳到哪 ，只要能夠被訪問就行了。我直接上傳到博客園的文件空間中，上傳之后，在博客設置頁面中的【頁腳Html代碼】框中輸入如下js代碼。

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://files.cnblogs.com/files/mingjiatang/mystyle.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/mingjiatang/mycnblogs.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/mingjiatang/mystyle.js"></script>

點擊【保存】，頁面的效果如下。

4 總結

如果不需要對上述的樣式進行再次定義，那么就不需要下載對應的js和css文件，只需要將本文上面【頁面定制css代碼】、【頁首Html代碼】和【頁腳Html代碼】中的代碼復制到你相應的地方，即可以實現上面的效果。

5 參考資料

數據之巔的博文【分享】博客美化(2)自定義博客樣式細節
ryan tu的博文cnblog中添加數學公式支持