有沒有辦法使用HTML5輪廓算法和CSS（可能還有JS）來生成文檔導航？

Question

有沒有辦法使用HTML5大綱算法和CSS（可能是JS）來生成文檔導航，就像TeX可以生成目錄一樣？

編輯：有沒有一種方法來顯示HTML文檔的鏈接大綱，而不明確寫它？我在想TeX中的\tableofcontents。例如，一個空的<nav>標籤將填充頁面中各節段的無序列表鏈接。

Answer 1

對於將從文檔大綱創建自動toc的JavaScript，您必須現在開發自己的toc。 [我發現沒有複製粘貼的解決方案實際上]

研究這個：

• http://code.google.com/p/h5o/
• http://code.google.com/p/h5o/downloads/detail?name=outliner.0.5.0.62.js&can=2&q=
• https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo
• https://developer.mozilla.org/en-US/docs/HTML/Sections_and_Outlines_of_an_HTML5_document?redirectlocale=en-US&redirectslug=Sections_and_Outlines_of_an_HTML5_document

這

• http://blog.tremily.us/posts/HTML5_outlines/
• http://projects.jga.me/toc/（jQuery插件，你可能要適應）

[ADDON]

建議從用戶@unor閱讀：github.com/DylanFM/outliner把我送到這個jsFiddle那裏是另一個JavaScript啓動。

的Javascript

// See http://html5doctor.com/document-outlines/ 
// That article begins with info on HTML4 document outlines 
// This doesn't do that yet, it just handles the HTML5 stuff beneath in the article 
// I'm sure there are problems with handling that HTML5 stuff tho 

var headingElements = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'], 
sectioningElements = ['SECTION', 'ARTICLE', 'NAV', 'ASIDE']; 

function makeOutline(root) { 
var ar = [], 
    el = root.firstChild, 
    nested, hg; 
while(el) { 
    // If it's a sectioning element, create a new level in the outline 
    if(sectioningElements.indexOf(el.tagName) > -1) { 
     nested = makeOutline(el); 
     if(nested.every(function(i){ return typeof i !== 'string'; })) { 
      nested.unshift('Untitled ' + el.tagName.toLowerCase()); 
     } 
     ar.push(nested); 
    } else if(headingElements.indexOf(el.tagName) > -1) { 
     ar.push(el.textContent); 
    } else if(el.tagName === 'HGROUP') { 
     hg = undefined; 
     // Find the highest heading element within 
     // Use its text, otherwhise it's untitled 
     try { 
      headingElements.forEach(function(t) { 
       els = el.getElementsByTagName(t); 
       if(els.length) { 
        hg = els[0].textContent; 
        throw BreakException; 
       } 
      }); 
     } catch(e) {} 
     if(!hg) { 
      hg = 'Untitled hgroup'; 
     } 
     ar.push(hg); 
    } 
    el = el.nextSibling; 
} 
return ar; 
}; 

var outline = makeOutline(document.body); 

// This is just used for displaying the outline. 
// Inspect the outline variable to see the generated array: 
// console.log(outline); 

function describeOutline(outline) { 
var indentForDepth = function(depth) { 
    var str = ''; 
    for(i=depth;i>0;i--) { 
     str += '\t'; 
    } 
    return str; 
}, 
childrenAreStrings = function(ar, depth) { 
    var depth = (depth && (depth + 1)) || 1; 
    return ar.map(function(item) { 
     if({}.toString.call(item)=='[object Array]') { 
      return childrenAreStrings(item, depth).join('\n'); 
     } else { 
      return indentForDepth(depth) + '- ' + String(item); 
     } 
    }); 
}; 
// Make sure all items in ar are strings 
return childrenAreStrings(outline).join('\n');  
} 

(document.getElementsByTagName('pre')[0]).textContent = describeOutline(outline);