CnBlogs自定义博客样式

一、前言

一直觉得博客园自带的样式不够简介美观，所以想着使用CSS美化下，同时写篇博客总结下以供后人参考。本文中的全部代码在这：github

二、准备工作

2.1 申请js权限

首先，在自定义博客样式前，我们需要向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等待博客园管理团队通过申请，一般几个小时就会通过。然后再刷新一下，页面就会显示支持js代码 。

2.2 学会“借鉴”他人样式

如果看到别人的博客非常美观，可以适当“借鉴一下”。使用chrome浏览器，在其博客界面按F12查看页面CSS代码如下图所示，图中作为例子使用的是github的首页页面。点击图中红框内的查看按钮或者按下ctrl + shift + C查看蓝框中的元素，其CSS代码如绿框中所示。

另外可以直接修改其CSS代码，例如添加颜色属性：color:red，会发现页面中的文字颜色变为红色了：

三、改造之路

3.1 自定义博客主体部分

首先博客皮肤选择Custom，然后自定义博客主体部分的CSS，下面只是摘选出了很少一部分内容作为示例，全部内容可以去github查看。

body {
    background: #e0ebe8;
    color: #404244;
    font-family: Arial,Helvetica,sans-serif,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 
    font-size: 16px;
}

/* 段落 */
#cnblogs_post_body p {
    line-height: 1.4;
    font-size: 16px;
    margin-top: 10px;
}

/* h2标题 */
#cnblogs_post_body h2 {
    font-size: 28px;
    margin-top: 23px;
    padding: 2px 10px;
    margin-bottom: 17px;
    border-left: 7px green solid;
}

......

3.2 自定义代码高亮主题

之前写博客用的是博客园自带的TinyMCE编辑器，后来偶然喜欢上用Markdown写博客文档，索性把博客园的编辑器改为Markdown了。但是博客园的Markdown渲染效果不够美观，因此决心改造园子的Markdown样式。

博客园代码高亮使用的插件是 highlight.js，highlight.js是一款轻量级的Web代码语法高亮库。highlight官网提供了77种主题：https://highlightjs.org/static/demo/， 大家可以查看demo选择一款自己喜欢的，然后放到博客里面。

因为我比较常用的IDE是Qt Creator，所以选择了Qtcreator Light这款主题，如下所示：

下载highlight.js包，进入主题文件夹找到你想要的主题文件，然后复制里面的CSS代码，进入你的博客园主页，【管理】->【设置】，找到【页面定制CSS代码】，粘贴到最后。

由于直接将CSS代码加进来存在一些样式冲突，一般是背景色和字体颜色，还需要一些调整。现在贴出我调整后的CSS代码：

/* markdown代码高亮主题 begin */
/* makedown块代码样式 */
.cnblogs-markdown .hljs {
    font-size: 16px !important;
    font-family: "Source Code Pro","Consolas","Courier New",Courier,monospace!important;
    background: #e0ebe8!important; /* 背景色 */
    color: #000; /* 普通代码颜色为黑色 */
    border: 0!important; /* 框线宽度为0，则相当于隐藏框线*/
    padding: 13px; /* 内边距都为13px */
}

/* makedown行间代码样式 */
.cnblogs-markdown code {
    font-size: 1em !important;
    font-family: "Source Code Pro","Consolas","Courier New",Courier,monospace!important;
    background-color: #f9f2f4 !important;    
    color: #c7254e;
    border: none !important;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #000000;
}

.hljs-symbol, /* 符号 */
.hljs-attribute {
  color: #66d9ef; /* 淡蓝色 */
}

.hljs-bullet,  /* 布尔 */
.hljs-quote, /* 引用 */
.hljs-number, /* 数字 */
.hljs-regexp, /* 正则表达式 */ 
.hljs-literal, /* 字面量 */
.hljs-link { /* 链接 */
  color: #000080; /* 藏青色 */
}

.hljs-code,
.hljs-title, /*函数名*/
.hljs-section,
.hljs-selector-class {
  color: #008B8B; /* 深青色 */
}

.hljs-class .hljs-title { /* 类名称 */
  color: #EE30A7; /* 紫红色 */
}

.hljs-params {/* 函数参数 */
  color: #0055AF; /* 靛蓝色 */    
}    

.hljs-variable, /* 变量 */
.hljs-template-variable { /* 临时变量 */
  color: #FA8072 /* 橙红色 */
}    

.hljs-string, /* 字符串 */
.hljs-type, /* 类型 */
.hljs-built_in, /* 内置，例如string、cout等 */
.hljs-builtin-name, /* 内置名称 */
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition {
  color: #a31515; /* 暗红色 */
}

.hljs-keyword, /*关键字*/
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #808000; /* 淡褐色 */ 
}

.hljs-meta { /* 头文件、宏定义 */
  color: #20B2AA; /* 亮海蓝色 */    
}

.hljs-comment, /* 注释 */
.hljs-deletion {
  color: #008000; /* 绿色 */
}
/* markdown代码高亮主题 end */

3.3 侧边栏添加头像

将下面这段代码添加到【博客侧边栏公告】中，以添加头像：

<!-- 添加头像，并且点击头像跳转到博客园首页 -->
<div align="center">
<a href="https://home.cnblogs.com/u/linuxAndMcu/">
<img src="https://www.cnblogs.com/images/cnblogs_com/linuxAndMcu/1348721/o_o_misaka.jpg">
</a> 
</div>

3.4 美化页首

将下面这段代码添加到【页首Html代码】中：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<section id="top">
    <header id="home-top" class="nav-top nav-fixed nav-root">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <nav id="top-nav">
                        <ul class="nav-list transistion">
                            <li><a href="https://www.cnblogs.com/"><i class='fa fa-smile-o'></i>博客园</a></li>
                            <li><a href="[1]你的博客园首页网址"><i class='fa fa-home'></i>首页</a></li>
                            <li><a href="[2]你的博客园管理网址"><i class='fa fa-user'></i>管理</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <div class="fade-area">
        <div id="title">
            <div class="container">
                <div class="transistion cloud left-cloud"></div>
                <div class="transistion cloud right-cloud"></div>
                <div class="row">
                    <div class="col-md-12">
                        <div id="title-area" class="transistion">
                            <h2 class="llfc-blog">
                                <figure class="transistion">
                                    <img src="[3]主标题，一张图片">
                                </figure>
                            </h2>
                            <h2 class="blog-subtitle">
                                <figure class="transistion">
                                    <img src="[4]副标题，一张图片">
                                </figure>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

3.5 自动生成目录索引

将下面这段代码添加到【页脚Html代码】中：

<script language="javascript" type="text/javascript">

/* 自动生成目录索引 begin */
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory" style="color:#152e97;">';
        content += '<p style="font-size:18px;"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   
}
GenerateContentList();
/* 自动生成目录索引 end */
</script>

参考：

博客园主题分享——绿色

博客园页面定制CSS代码

如何自定义博客园代码高亮主题，同时分享自己使用的黑色主题