CnBlogs自定义博客样式

系统管理员 2022-01-05 21:11 280阅读 0赞

> 文章有一个好的排版，将能够增加阅读者对其内容的兴趣。本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添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】这个复选框不要勾选，因为我们仅仅只自定义了文章标题，其他的标签要靠默认的样式才行。上面的这段定义文章标题样式的代码是从这位[数据之巅][Link 1]大牛的博客页面中趴下来的。点击【保存】，然后刷新一下博客文章页面，文章的标题就进行美化了，效果如下。

![2016\_10\_a10697e8-37b1-4ddd-b02d-aa6424ce0d84][2016_10_a10697e8-37b1-4ddd-b02d-aa6424ce0d84]

### 2 完美显示Latex的数学公式 ###

默认的博客文章对Latex的数学公式是无法显示，想要在文章添加一些数学公式，都是采用截图的方式，比较麻烦。但是在网上找到一个解析Latex公式的利器`MathJax`，只需要在博客页面中添加`MathJax.js`就能完美的解析Latex格式的数学公式。

在博客设置页面中的【页首Html代码】框中输入如下js代码。

点击【保存】，再刷新一下页面，如果页面中包含Latex语法公式，那么就能够进行显示。如，在文章有如下的内容，其中含有Latex语法公式。

![2016\_10\_96294184-eec9-4bfd-99a5-df7221407946][2016_10_96294184-eec9-4bfd-99a5-df7221407946]

在页面中显示的效果如下：

![2016\_10\_9c655c77-42b9-45d5-a165-61524d1b4c22][2016_10_9c655c77-42b9-45d5-a165-61524d1b4c22]

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

增添目录索引和末尾的固定信息（如何声明版权）需要自定js和css样式，并且还要添加一个公共的`bootstrap.js`文件，地址为：[http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js][http_cdn.bootcss.com_bootstrap_3.2.0_js_bootstrap.min.js]。其中增添目录的索引的`mystyle.js`、 末尾固定信息的脚本`mycnblogs.js` 和一个样式文件`mystyle.css`，都已经从[数据之巅][Link 1]这里趴下来了，对文件中的部分代码进行修改，以便可以达到我的要求，下面列举文件中的修改地方。

**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**

在这个文件中，我只需要提取h2,h3,h4这三个标题作为目录就行了，因为我写文章一般没有设置h1标签，个人觉得它的字体太大了。

把相应的js和css文件趴下来进行修改，然后上传，随便上传到哪 ，只要能够被访问就行了。我直接上传到博客园的文件空间中，上传之后，在博客设置页面中的【页脚Html代码】框中输入如下js代码。

点击【保存】，页面的效果如下。

![2016\_10\_ca67ce9d-6e9d-4a70-854e-d41b15f1a0a0][2016_10_ca67ce9d-6e9d-4a70-854e-d41b15f1a0a0]

### 4 总结 ###

如果不需要对上述的样式进行再次定义，那么就不需要下载对应的js和css文件，只需要将本文上面【页面定制css代码】、【页首Html代码】和【页脚Html代码】中的代码复制到你相应的地方，即可以实现上面的效果。

### 5 参考资料 ###

数据之巅的博文[【分享】博客美化(2)自定义博客样式细节][2]  
ryan tu的博文[cnblog中添加数学公式支持][cnblog]

转载于:https://www.cnblogs.com/mingjiatang/p/5954352.html

[Link 1]: http://home.cnblogs.com/u/asxinyu/
[2016_10_a10697e8-37b1-4ddd-b02d-aa6424ce0d84]: /images/20211228/203eeaf488854d3a926fcf0e7edb90b4.png
[2016_10_96294184-eec9-4bfd-99a5-df7221407946]: /images/20211228/86f91e64375c429799f3ff5f14f1f258.png
[2016_10_9c655c77-42b9-45d5-a165-61524d1b4c22]: /images/20211228/63d4331ba0c2499b86d261aca516fe2f.png
[http_cdn.bootcss.com_bootstrap_3.2.0_js_bootstrap.min.js]: http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js
[2016_10_ca67ce9d-6e9d-4a70-854e-d41b15f1a0a0]: /images/20211228/5ed2960ddf4c4ff582e3b8e778904286.png
[2]: http://www.cnblogs.com/asxinyu/p/Bolg_Category_StyleSetting_2.html
[cnblog]: http://www.cnblogs.com/ryantu/p/3285057.html