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中添加数学公式支持