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>

View Code

将以上代码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";
}

View Code

自定义风格

有时候需要添加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;
}

View Code

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)

View Code

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

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

转载于:https://www.cnblogs.com/plyonfly/p/11470709.html