博客JS生成侧边小标题导航

我们终究会走上个人博客这条道路，毕竟可以自己去书写自己博客页面，让自己的页面可自由变换更加美观，今天和朋友一起做了一个叫做侧边导航的东西，在这里做一个小小的记录。

具体内容就是说：博客一般通过富文本或者Markdown去实现的嘛，会自动生成相应的标签，而对于文章中的小标题来说一般都是h3、h4等一些标签，具体要做的就是通过不同的标签，判断这个是几级的标题，然后在旁边生成相应的链接，然后连接对应到文章标题相应的位置。

这一次是通过jquery去实现的。

 $(document).ready(function(e) {//在页面加载完毕后再执行

    	$("#content").children().each(function(index, element) {//对存放所有标题元素的
//所有子元素进行遍历

    		var tagName=$(this).get(0).tagName;//获取到相应的标签名称  typeof（tagName）=String

    		if(tagName.substr(0,1).toUpperCase()=="H"){  //拿到所有的标题

    			var contentH=$(this).text(); //获取标题的文本内容

    			var markid="mark-"+tagName+"-"+index.toString(); //为准备添加的元素设置
//相应的对应Id，方便跳转，也可以说是获取相应标题的Id

				console.log(markid); //自己打印着玩的，可以检测Id对应不

    			$(this).attr("id",markid); //为标题追加上该Id

    			$(".menu").append("<a href='#"+markid+"'>"+contentH+"</a>"); //下面就是
//为存放侧边导航的块，一个一个的追加相应的链接了

    		}  
    	});
    });

这样的话它的基本更能算是实现了，但是呢，相应的侧边导航的样式貌似不是很美观，其实想要实现样式的改变其实就在原来的基础上，添加标签的判断就行了，因为tagName获取的标签名称是字符型的数据。

同样，可以优化Id的对应方式，就是添加一个全局变量，这样的一个好处是不用再一个一个的为元素添加相应的Id了，直接用自身的Id就可以实现，因为博客的Id说到底是递增的。

 $(document).ready(function(e) {//在页面加载完毕后再执行

        var titleNumber = 0；

    	$("#content").children().each(function(index, element) {//对存放所有标题元素的
//所有子元素进行遍历

    		var tagName=$(this).get(0).tagName;//获取到相应的标签名称  typeof（tagName）=String

    		if(tagName.substr(0,1).toUpperCase()=="H"){  //拿到所有的标题

                if(tagName=='H2'){
                
                    var contentH=$(this).text(); //获取标题的文本内容

    			    var markid="mark-"+tagName+"-"+titleNumber; //为准备添加的
//元素设置（改用自定义数字）相应的对应Id，方便跳转，也可以说是获取相应标题的Id

				console.log(markid); //自己打印着玩的，可以检测Id对应不

    			//(不再设置Id)$(this).attr("id",markid); //为标题追加上该Id

    			$(".menu").append("<a class=‘STYLE’ href='#"+markid+"'>"+contentH+"</a>");
//下面就是为存放侧边导航的块，一个一个的追加相应的链接了
//（相应的添加class，设置不同标题的不同样式，关键还是低一级标题的缩进）

                }else if(tagName=='H3'){
                    //......
                }else if(tagName=='H4'){
                    //......
                }

                titleNumber++;//递增相应的全局变量，直接对应Id

    		}  
    	});
    });

我们这次做的，只有h3和h4，所以没用到最大标题无缩进量的东西，其实可以再加一个全局的变量，判断最大的标题，对应的为全局变量赋值，最后再判断最大标题是哪个的同时，改变不同的a链接的缩进量，实现永远是最大标题无缩进量对齐的效果。