JavaScript-Creates an article directory with titles in markdown format, like the SF article directory. How to create?

Source: Internet
Author: User
However, the content title of this makdown format conversion process is converted to the H2 label, and there is no ID.
A format like this:

标题1

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

标题2

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

标题3

......

So we can not use the anchor point to achieve.
Is there any way to implement this directory without an anchor point?

Reply content:

However, the content title of this makdown format conversion process is converted to the H2 label, and there is no ID.
A format like this:

标题1

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

标题2

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

标题3

......

So we can not use the anchor point to achieve.
Is there any way to implement this directory without an anchor point?

No ID can be inserted with JS ID.
This is how the SF article directory is implemented.

The front end extracts all h1,h2,h3 from the article after page rendering is complete to determine the directory structure, and then adds a similar ID to each title articleHeader1 .

Part of the code:

Generate Indexfunction Articleindex () {var $article = $ ('. Article ');    var $header = $article. Find (' H1, H2, H3 '); var _html = ' directory structure
  
  
    '; $ ('. Side '). Append (_html); $ ('. Widget-outline '). css {' width ': $ ('. Side '). Width () + +,//' Left ': $ ('. side '). Offset (). Left + 15,}); var _taglevel = 1; The initial level var _$wrap = $ (' #articleIndex '); The initial wrap $header. Each (function (index) {if ($ (). Text (). Trim () = = = ") {//null title return; } $ (this). attr (' id ', ' articleheader ' + index); Plus id var _tl = parseint ($ (this) [0].tagname.slice (1)); The current taglevel var _$li = null; if (index = = = 0 | | _tl = = = _taglevel) {//first or the same as the previous _$li = $ ('
  • ' + $ (this). Text () + '
  • '); _$wrap.append (_$li); } else if (_tl > _taglevel) {//current is greater than the last _$li = $ ('
      • ' + $ (this). Text () + '
    '); _$wrap.append (_$li); _$wrap = _$li; } else if (_tl < _taglevel) {//current is less than the last _$li = $ ('
  • ' + $ (this). Text () + '
  • '); if (_tl = = = 1) {$ (' #articleIndex '). Append (_$li); _$wrap = $ (' #articleIndex '); } else {_$wrap.parent (' ul '). Append (_$li); _$wrap = _$wrap.parent (' ul '); }} _taglevel = _tl; });}
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.