博客中后台写博客是用的markdown,最终有个问题就是将写完的博客从数据库加载到页面上的时候,需要对markdown格式进行进行转换,这个时候关于TOC的展示怎么实现,自己碰到了一些问题,下面进行整理

效果图

最终我想要的效果是:

这里先说一下关于Golang后端支持markdown的包:

github.com/microcosm-cc/bluemonday
github.com/russross/blackfriday

我是通过上面两个包组合实现的, github.com/russross/blackfriday 是Go实现的对Markdown处理一个包,也是现在用的比较多的

github.com/microcosm-cc/bluemonday 是Go中实现的HTML清理程序,可以将不受信任的用户生成的内容做为输入,并将返回针对批准的HTML元素和属性的白名单进行清理之后的HTML,以便可以安全的将其包含在网页中

这里需要说一下关于github.com/russross/blackfriday 现在是已经是v2版本了,但是我在使用v2的时候碰到了一些问题,当你把markdown格式转换为html在页面上展示的时候和v1的时候是有区别的,我们先看一下v1版本的时候的效果

但是,我用v2的时候生成的结果是:

我搜索了issues,发现有人也问过这个问题,具体可以看:

https://github.com/russross/blackfriday/issues/551

关于v2的使用经过多次修改还是没有调整好,最后还是选择了v1版本,下面是我后端返回前端的代码内容:

    policy := bluemonday.UGCPolicy()
    render := blackfriday.HtmlRenderer(commonHtmlFlags,"","")
    unsafe := blackfriday.Markdown([]byte(content),render,commonExtensions)
    contentHtml:=template.HTML(policy.Sanitize(string(unsafe)))

关于toc的展示

blackfriday 也实现了toc的功能,但是需要自己去定制样式,最后通过前端js的方式实现:

<script type="text/javascript">
    $(document).ready(function(){
        $("h2,h3").each(function(i,item){
            var tag = $(item).get(0).localName;
            $(item).attr("id","wow"+i);
            $(".toc-article").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
            $(".newh2").css("margin-left",0);
            $(".newh3").css("margin-left",20);
        });
    });
</script>

当然如果你非常擅长前端,也可以通过前端来用后端生成toc,然后自己调整符合自己的样式