扫码关注官方订阅号
不过这Makdown格式转换过程的内容标题转换为h2标签,并且没有id。 像这样的格式:
标题1 ...... .....内容.... ...... 标题2 ...... .....内容.... ...... 标题3 ......
所以用不了锚点来实现。 有什么办法可以不用锚点实现这个目录呢?
走同样的路,发现不同的人生
没有id可以用js插入id。 SF的文章目录就是这样实现的。
前端在页面渲染完成之后从文章中提取所有h1,h2,h3确定目录结构,然后给每个标题添加类似articleHeader1的id。
articleHeader1
部分代码:
// 生成index function articleIndex() { var $article = $('.article'); var $header = $article.find('h1, h2, h3'); var _html = '<p class="panel panel-default widget-outline"><p class="panel-heading" id="hideOutline">目录结构<span class="text-muted pull-right caret"></span></p><p class="panel-body"><ul id="articleIndex"></ul></p></p>'; $('.side').append(_html); $('.widget-outline').css({ 'width': $('.side').width() + 15, //'left': $('.side').offset().left + 15, }); var _tagLevel = 1; // 最初的level var _$wrap = $('#articleIndex'); // 最初的wrap $header.each(function(index) { if($(this).text().trim() === '') { // 空的title return; } $(this).attr('id', 'articleHeader' + index); // 加id var _tl = parseInt($(this)[0].tagName.slice(1)); // 当前的tagLevel var _$li = null; if(index === 0 || _tl === _tagLevel) { // 第一个或者是与上一个相同 _$li = $('<li><a href="#articleHeader'+ index +'">' + $(this).text() + '</a></li>'); _$wrap.append(_$li); } else if(_tl > _tagLevel) { // 当前的大于上次的 _$li = $('<ul><li><a href="#articleHeader' + index + '">' + $(this).text() + '</a></li></ul>'); _$wrap.append(_$li); _$wrap = _$li; } else if(_tl < _tagLevel) { // 当前的小于上次的 _$li = $('<li><a href="#articleHeader' + index + '">' + $(this).text() + '</a></li>'); if(_tl === 1) { $('#articleIndex').append(_$li); _$wrap = $('#articleIndex'); } else { _$wrap.parent('ul').append(_$li); _$wrap = _$wrap.parent('ul'); } } _tagLevel = _tl; }); }
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
没有id可以用js插入id。
SF的文章目录就是这样实现的。
前端在页面渲染完成之后从文章中提取所有h1,h2,h3确定目录结构,然后给每个标题添加类似
articleHeader1的id。部分代码: