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>
点击【保存】，页面的效果如下。
没有办法在head里添加JS引用 对于CSS引用，虽然无法将文件添加到head里，但是通过[管理 ->选项 ->配置 ->通过CSS定制页面]可以自己写CSS代码，这里的代码会添加到head中一个CSS的文件引用中 , 如果不限制head里的话，倒是可以通过“页脚Html代码”和“页首Html代码”来添加到页首或页尾 一般，对于CSS，可以使用上面我说的那个地方去定制CSS，而JS，可以添加到页尾，一方面添加到页首可能会影响到doctype声明，另一方面添加到页尾也有利于页面的性能(performance)
