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

╰半夏微凉° 2021-12-01 10:27 314阅读 0赞

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

具体内容就是说：博客一般通过富文本或者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链接的缩进量，实现永远是最大标题无缩进量对齐的效果。