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中添加數學公式支持