javascript - 用markdown格式的内容以标题创建文章目录，像sf文章目录一样。怎样创建？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 用markdown格式的内容以标题创建文章目录，像sf文章目录一样。怎样创建？

怪我咯 2017-04-10 14:51:07

[JavaScript讨论组]

663

不过这Makdown格式转换过程的内容标题转换为h2标签，并且没有id。
像这样的格式：

<h2>标题1<h2>
......
.....内容....
......
<h2>标题2<h2>
......
.....内容....
......
<h2>标题3<h2>
......

所以用不了锚点来实现。
有什么办法可以不用锚点实现这个目录呢？

怪我咯

走同样的路，发现不同的人生

全部回复(1)

大家讲道理2017-04-10 14:53:07 1楼

没有id可以用js插入id。
SF的文章目录就是这样实现的。

前端在页面渲染完成之后从文章中提取所有h1，h2，h3确定目录结构，然后给每个标题添加类似articleHeader1的id。

部分代码：

// 生成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;
    });
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>