博客园Cnblog为文章添加目录

纸上得来终觉浅,绝知此事要躬行

  先看了博客园美化这篇文章,然后开始实践,发现始终无法实现,太坑爹了,至少在2016年7月,博客园Cnblog后台"首页HTML代码"(见截图)默认是不允许保存javascript脚本的, 好多相关文章里都没有提到这一点,所以决心自己记一笔.

   当发现原因后,就给博客园Cnblog发了一封请求开通后台javascript编辑保存的Email, 好在博客园Cnblog回复得很快,第2天就帮我开通了,非常感谢办事的高效.

 

Review人家是代码,噢知道了实现原理,有收获.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
//生成目录索引列表
//实现在<div id="cnblogs_post_body">下插入我们拼接的动态目录html内容
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h3');//查找div id="cnblogs_post_body"下所有的h3节点
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>'; //锚(#_labelTop):回到目录,
        content += '<div id="navCategory">';     
        content += '<p style="font-size:16px"><b>阅读目录</b></p>';
        content += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            //功能1
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到目录</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);//在每个h3节点封装jQuery对象,然后在前面插入新生成的"回到目录"html
            //功能2
            var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
        }
        content += '</ul>';
        content += '</div>';
        if($('#cnblogs_post_body').length != 0 )//验证$('#cnblogs_post_body')取到jQuery对象
        {
            $($('#cnblogs_post_body')[0]).prepend(content);//推测:$('#cnblogs_post_body')[0]取到html元素,在封装成jQuery对象
        }                                                  //在div id="cnblogs_post_body"下插入动态生成html     
    }    
}
GenerateContentList();

</script>

 

其它Cnblog原生式样

<p class="postTitle"><a href="http://xxx.html" target="_blank">jQuery创建动态按钮事件</a></p>