cnblog优化指南

 

 

为什么要优化

cnblog用了一段时间，发现好多问题

• 编辑器功能不足，影响编辑效率
• 美化不足，影响视觉体验

功能优化

自动添加目录

根据h2,h3标签自动生成目录，点击目录的指定条目可以跳转的指定类容，每个内容小标题上都有回到顶部目录按钮。

我只做了两级目录，只有h2存在时才生成目录，且存在h3时，h3是h2的子目录，代码如下：

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
    var jquery_h23_list = $('#cnblogs_post_body h2,#cnblogs_post_body h3');//h2和h3为章节的子母标题
    var go_top = false;
    for(var i =0;i<jquery_h23_list.length;i++)
    {
        if(jquery_h23_list[i].tagName == 'H2')
        {
            go_top = true;
            break;
        }
    }

    if((jquery_h23_list.length>0) && (go_top == true))
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
        content    += '<ul>';
        var big_section = '';

        for(var i =0;i<jquery_h23_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h23_list[i]).before(go_to_top);
            if(jquery_h23_list[i].tagName == 'H2')
            {
                if(big_section != '')
                {
                    big_section += '</ul></li>';
                    content += big_section;
                }
                big_section = '<li><a href="#_label' + i + '"><strong>' + $(jquery_h23_list[i]).text() + '</strong></a><ul>';
            }
            else if(jquery_h23_list[i].tagName == 'H3')
            {
                if(big_section != '')
                {
                    big_section += '<li><a href="#_label' + i + '">' + $(jquery_h23_list[i]).text() + '</a></li>';
                }
            }
        }
        if(big_section != '')
        {
            big_section += '</ul></li>';
            content += big_section;
        }


        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0) 
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }    
}
GenerateContentList();
</script>

将以上代码copy到管理 -> 设置 -> 页脚Html代码保存即可

我的h2,h3 CSS风格是：

#cnblogs_post_body h2 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
    background-color: #5f4935;
    padding: 4px;
    color: #ffffff;
    font-family: "Trebuchet MS";
}
#cnblogs_post_body h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
    background-color:#f1e1c5;
    padding: 4px;
    font-family: "Trebuchet MS";
}

 

自定义风格

有时候需要添加html标签，自定义风格。应为cnblog除了插入代码，就是一个风格，重点就很难突出，层次也不鲜明。

比如有时程序运行日志，命令，txt文本，提示信息需要展示，它不属于代码，难道就用纯文本展示吗，我的方法是也给它一个代码块

然后将class替换成自己的风格。

例：

redis-benchmark -n 10000 -t set -k 1

 

比如在说一段话的时候要突出某个词，我的方法用<code>content</code>表示突出显示的词，给code定制对应css风格，

但是cnblog编辑器菜单没插入code对应的按钮，可以编辑html页面，效率比较低，后面介绍高效率的方法。

我以上两个css风格分别是：

.ply_style_code_01 {
    padding: 8px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    font-family: Courier New;
}

code {
    white-space: nowrap;
    max-width: 100%;
    background: #fff;
    border: solid 1px #e1e4e5;
    font-size: 75%;
    padding: 0 5px;
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
    color: #E74C3C;
    overflow-x: auto;
    margin-left: 3px;
    margin-right: 3px;
}

HTML替换

要想自定义风格生效，就需要改html代码（或者改cnblog的原始风格）。

对于插入HTML标签，我是这么做的：

{%text%}  		　　　　====>    <code>text</code>
{tag%text%}  		　　　　====>    <tag>text</tag>
{tag attr=value%text%}      　 ====>    <tag attr='value'>text</tag>

也就是我需要写一个高亮的单词可以这么写，{%我们不一样%}，正则匹配替换后：<code>我们不一样</code>，

我也可以自行写个H1标签，{h1%我是h1标签%}，正则匹配替换后：<h1>我是h1标签</h1>

或者可选样式的一段话{p class=style1%想是啥样就是啥样%}，正则匹配替换后：<p class="style1">想是啥样就是啥样</p>

需要替换的样式：

<pre class="brush:vbnet;gutter:false;">	
<pre class="brush:vbnet;gutter:true;">		=====>		<pre class="ply_style_code_01">

<pre class="brush:scala;gutter:false;">
<pre class="brush:scala;gutter:true;">		=====>		<pre class="ply_style_code_02">

在博客编写完需要提交前，编辑HTML代码，将HTML代码剪切到剪切板，快捷键运行python程序，从剪切板读取HTML代码，

完成上述规则的替换，将替换后的HTML代码写到剪切板（python 程序），ctrl + v到HTML编辑器

python程序：

#pip install pyperclip
import pyperclip as pc
import re

#将指定格式内容转换为HTML标签
#{%text%}                              ====>    <code>text</code>
#{tag%text%}                          ====>    <tag>text</tag>
#{tag attr=value%text%}              ====>    <tag attr='value'>text</tag>

#替换指定样式
#<pre class="brush:vbnet;gutter:false;">    
#<pre class="brush:vbnet;gutter:true;">        =====>        <pre class="ply_style_code_01">

#<pre class="brush:scala;gutter:false;">
#<pre class="brush:scala;gutter:true;">        =====>        <pre class="ply_style_code_02">

#1.获取剪切板内容
content = pc.paste()

#2.将指定格式内容转换为HTML标签
def parse(arg):
    taget = arg.group()
    para = re.findall('{%(.+?)%}|{(\w+)%(.+?)%}|{(\w+) +(\w+)=(\w+)%(.+?)%}',taget,flags=re.DOTALL)
    text1,tag2,text2,tag3,attr3,value3,text3 = para[0]
    if text1:
        return '<code>{0}</code>'.format(text1)
    elif text2:
        return '<{0}>{1}</{2}>'.format(tag2,text2,tag2)
    elif text3:
        return '<{0} {1}={2}>{3}</{4}>'.format(tag3,attr3,value3,text3,tag3)
content = re.sub('{%(.+?)%}|{(\w+)%(.+?)%}|{(\w+) +(\w+)=(\w+)%(.+?)%}',parse,content,flags=re.DOTALL)


#3.替换指定样式
content = re.sub('<pre class="brush:vbnet;gutter:false;">|<pre class="brush:vbnet;gutter:true;">',
                 '<pre class="ply_style_code_01">',content)
content = re.sub('<pre class="brush:scala;gutter:false;">|<pre class="brush:scala;gutter:true;">',
                 '<pre class="ply_style_code_02">',content)

#4.将修改过的HTML代码放到剪切板
pc.copy(content)

将该程序添加到快捷键启动的方式（前提.py文件能直接运行，若不能运行看python有没有添加到环境变量）：

右键发送到->桌面快捷方式，在右键快捷方式属性，选中快捷键按上自己想要的快捷键。