javascript - 有没有办法使用 HTML5 大纲算法和 CSS（可能还有 JS）生成文档导航？

Question

有没有办法使用 HTML5 大纲算法和 CSS（可能还有 JS）生成文档导航，比如 TeX 可以生成目录？

编辑：有没有办法在不明确编写的情况下显示 HTML 文档的链接大纲？我正在考虑类似\tableofcontentsTeX 的东西。因此，例如，一个空<nav>标签将填充到页面中各个部分的链接的无序列表。

Answer 1

对于将从文档大纲创建自动目录的 javascript，您目前必须开发自己的目录。[我实际上没有找到复制粘贴解决方案]

研究这个 ：

• 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 插件）

[附加]

来自用户@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);