博客逐步迁移至 极客兔兔的小站
1.写在前面
之前使用过有道云笔记和为知笔记,后来偶然喜欢上用Markdown写文档。被Markdown的简洁与大气所折服,因此抛弃了有道云,专心使用为知笔记,这样github上的文档和笔记都能统一起来了。最后索性把园子的编辑器改为Markdown了。
但是园子里的Markdown渲染效果和为知笔记、github上的比起来不够美观,因此决心改造园子的Markdown样式。
2.改造之路
2.1 修改CSS
- 在github上搜索到了针对园子的
CSS
,并且进行了修改,CSS
的修改方在此就不赘述了,右键->审查元素即可。
/*部分代码如下*/
.cnblogs-markdown a {
background: transparent;
}
.cnblogs-markdown a:active,
.cnblogs-markdown a:hover {
outline: 0;
}
2.2 支持代码行号显示
- 尝试书写一些内容后,发现虽然支持代码高亮,但是不支持行号显示。代码怎么能没有行号呢?
- 审查元素后发现,当使用Markdown编辑器后,代码被加上了很多html标签,园子自带的SyntaxHighlighter插件并不能完全发挥作用。因此考虑添加Javascript语句,重新渲染代码部分。
setCodeRow: function(){
// 代码行号显示
var pre = $("pre.sourceCode"); //选中需要更改的部分
if(pre && pre.length){
pre.each(function() {
var item = $(this);
var lang = item.attr("class").split(" ")[1]; //判断高亮的语言
item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉
item.removeClass().addClass(" " + lang +";"); //根据语言添加笔刷
SyntaxHighlighter.all();
})
}
}
2.3 自动生成版权信息与章节目录
setCopyright: function() {
/* 设置版权信息,转载出处自动根据页面url生成
* window.location.href:读取当前url
*/
var info_str = '<p>作者:<a>@geektutu</a><br>'+
'本文为作者原创,转载请注明出处:<a class="uri"></a></p><hr></hr>',
info = $(info_str),
info_a = info.find("a"),
url = window.location.href;
$(info_a[0]).attr("href","https://github.com/geektutu");
$(info_a[1]).attr("href",url).text(url);
$("#cnblogs_post_body").prepend(info);
},
setContent: function() {
// 根据h2、h3标签自动生成目录
var captions_ori = $("#cnblogs_post_body h2"),
captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
content = $("<blockquote><h4>目录</h4></blockquote>");
$("#cnblogs_post_body").prepend(content.append(captions));
var index = -1;
captions.replaceWith(function(){
var self = this;
if(self.tagName == "H2" || self.tagName == "h2"){
// 设置点击目录跳转
index += 1;
$('<a name="' + '_caption_' + index + '"></a>')
.insertBefore(captions_ori[index]);
return '<a href="#_caption_' + index + '"><strong>' +
self.innerHTML + '</strong></a><br>';
} else {
return self.innerHTML + "<br>";
}
});
},
2.4 方法封装与执行
- 2016/02/12:这篇随笔刚发布时,仅实现了代码行号显示,谢谢关注留言的朋友
- 2016/03/13:增加了自动生成版权信息与章节目录
- 考虑到以后将不断更新,因此将方法封装,方便扩展,同时方便各位博客园的朋友选择性地使用,在
runAll()
中删去不需要的方法即可
var setMyBlog = {
setCopyright: function() {
// 设置版权信息,转载出处自动根据页面url生成
// ...
},
setCodeRow: function(){
// 代码行号显示
// ...
},
setAtarget: function() {
// 博客内的链接在新窗口打开
// ...
},
setContent: function() {
// 根据h2、h3标签自动生成目录
// ...
},
runAll: function() {
// 运行所有方法
this.setAtarget();
this.setContent();
this.setCopyright();
this.setCodeRow();
}
}
setMyBlog.runAll();
2.5 下载完整源码
- 源码已经上传至 github,后期不断优化、更新,欢迎关注留言。
- 如果本文对你有用,不妨右下角点个推荐~