博客逐步迁移至 极客兔兔的小站

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("brush: " + 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,后期不断优化、更新,欢迎关注留言。
  • 如果本文对你有用,不妨右下角点个推荐~

3.使用方法

内容来源于网络如有侵权请私信删除