当前位置:Gxlcms > PHP教程 > javascript-用markdown格式的内容以标题创建文章目录,像sf文章目录一样。怎样创建?

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

时间:2021-07-01 10:21:17 帮助过:16人阅读

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

标题1

...... .....内容.... ......

标题2

...... .....内容.... ......

标题3

......

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

回复内容:

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

标题1

...... .....内容.... ......

标题2

...... .....内容.... ......

标题3

......

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

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

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

部分代码:

// 生成index
function articleIndex() {
    var $article = $('.article');
    var $header = $article.find('h1, h2, h3');
    var _html = '目录结构
    '; $('.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 = $('
  • ' + $(this).text() + '
  • '); _$wrap.append(_$li); } else if(_tl > _tagLevel) { // 当前的大于上次的 _$li = $('
    • ' + $(this).text() + '
    '); _$wrap.append(_$li); _$wrap = _$li; } else if(_tl < _tagLevel) { // 当前的小于上次的 _$li = $('
  • ' + $(this).text() + '
  • '); if(_tl === 1) { $('#articleIndex').append(_$li); _$wrap = $('#articleIndex'); } else { _$wrap.parent('ul').append(_$li); _$wrap = _$wrap.parent('ul'); } } _tagLevel = _tl; }); }

    人气教程排行