当前位置:  首页  >  PHP教程  >  PHP 应用  >  代码收藏

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

不过这Makdown格式转换过程的内容标题转换为h2标签,并且没有id。像这样的格式:{代码...}所以用不了锚点来实现。有什么办法可以不用锚点实现这个目录呢?
不过这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 = $(''); _$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; }); }
    吐了个 "CAO" !
    扫码关注 PHP1 官方微信号
    PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有