Como criar um índice para o seu artigo

document.querySelectorAll('main h2(id), main h3(id), main h4(id)');

E agora retorna nossos cabeçalhos e nada mais.

Como criar o ToC no Markdown

Muitas plataformas de blog suportam Markdown, então será a primeira coisa que criaremos.

Primeiro, converteremos a lista de nós em um array. Podemos usar o operador de propagação:

(...document.querySelectorAll('main h2(id), main h3(id), main h4(id)'));

Em seguida, podemos mapear o array e criar os links Markdown que apontam para o cabeçalho fornecido.

const headers = (...document.querySelectorAll('main h2(id), main h3(id), main h4(id)'));

headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    const hash = node.getAttribute('id');
    const indent=" ".repeat(level * 2);
    return `({indent}* (){node.innerText})(#${hash})`;
});

A saída é semelhante a esta:

(4) ('* (Dev Tools)(#heading-dev-tools)', '* (JavaScript Console)(#heading-javascript-console)', '* (Understanding the DOM Structure)(#heading-understanding-the-dom-structure)', '* (What to do if I don’t have headers?)(#heading-what-to-do-if-i-dont-have-headers)')

Para obter o texto, podemos juntar o array com um caractere de nova linha e usar console.log para exibir a saída. Se não usarmos console.logele mostrará uma string com n personagens.

const headers = (...document.querySelectorAll('main h2(id), main h3(id), main h4(id)'));

console.log(headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    const hash = node.getAttribute('id');
    const indent=" ".repeat(level * 2);
    return `({indent}* (){node.innerText})(#${hash})`;
}).join('n'));

A saída deste artigo será semelhante a esta:

* (Dev Tools)(#heading-dev-tools)
* (JavaScript Console)(#heading-javascript-console)
* (Understanding the DOM Structure)(#heading-understanding-the-dom-structure)
* (Creating TOC in Markdown)(#heading-creating-toc-in-markdown)
  * (This is fake header)(#heading-this-is-fake-header)

Eu criei um subcabeçalho falso. As plataformas, mesmo quando não oferecem suporte ao Markdown ao escrever artigos, geralmente oferecem suporte ao Markdown quando copiadas e coladas. O ToC na parte superior do artigo foi criado copiando e colando o markdown gerado com o último snippet de JavaScript.

Como criar um ToC HTML

Se a sua plataforma não suporta Markdown (como o Medium), você pode criar HTML, visualizar esse HTML e copiar a saída para a área de transferência. Colá-lo no editor da plataforma que você está usando deve manter a formatação.

Para converter Markdown em HTML, você pode usar qualquer ferramenta online, mas verá como criá-la você mesmo no snippet. Será mais rápido depois de criar o código.

const headers = (...document.querySelectorAll('main h2(id), main h3(id), main h4(id)'))

function indent(state) {
    return ' '.repeat((state.level - 1) * 2);
}

function closeUlTags(state, targetLevel) {
    while (state.level > targetLevel) {
        state.level--;
        state.lines.push(`${indent(state)}`);
    }
}

function openUlTags(state, targetLevel) {
    while (state.level < targetLevel) {
        state.lines.push(`${indent(state)}
`);
        state.level++;
    }
}

const result = headers.reduce((state, node) => {
    const level = parseInt(node.nodeName.replace('H', ''));

    closeUlTags(state, level);
    openUlTags(state, level);
    
    const hash = node.getAttribute('id');
    state.lines.push(`({indent(state)}
${node.innerText}
`);
    return state;
}, { lines: (), level: 1 });

closeUlTags(result, 1);

console.log(result.lines.join('n'));

Esta é a saída do código neste artigo:

Adicionei alguns cabeçalhos no final, para que você possa ver que funcionará para qualquer nível de cabeçalhos aninhados. Observe que também temos o ToC como o primeiro elemento da lista.

Copie o código HTML para o editor

A maioria dos chamados WYSIWYG os editores usam HTML e você deve ser capaz de copiar a saída do código HTML com formatação e colá-la nesse editor. O mais fácil é simplesmente salvar em um arquivo, abrir esse arquivo e selecionar o texto:

O que fazer se eu não tiver cabeçalhos?

Você precisa encontrar algo que possa ser direcionado com CSS. Se eles são p tags com uma classe específica (como cabeçalho), você pode usar p.header em vez de h2.

Como criar um índice para DEV.to

Se você tiver uma estrutura DOM diferente, poderá usar métodos DOM diferentes para extrair o elemento necessário. Por exemplo, em DEV.to, os cabeçalhos são assim:

  
  
  Overview

Portanto, o seletor precisa ser apenas main h2. Mas quando você executa este código:

(...document.querySelectorAll('main h2, main h3, main h4'));

Você verá que há muito mais cabeçalhos do que conteúdo do documento. Felizmente, podemos usar um novo seletor em CSS :has(). O seletor final para um cabeçalho pode ser assim: main h2:has(a(name)).

Aqui está o código completo:

const selector="main h2:has(a(name)), main h3:has(a(name)), main h4:has(a(name))";
const headers = (...document.querySelectorAll(selector));

console.log(headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    // this is how you get the hash
    // you can also access href attribute and remove # from the output string
    const hash = node.querySelector('a').getAttribute('name');
    const indent=" ".repeat(level);
    return `({indent}* (){node.innerText})(#${hash})`;
}).join('n'));

Conclusão

Criar um índice pode ajudar seus leitores a digerir seu artigo. Como a maioria das pessoas não lê o artigo inteiro, elas apenas procuram o que precisam. Você também pode encontrar muitos artigos sobre seu impacto no SEO. Portanto, sempre vale a pena adicionar um se o artigo for mais longo.

E como você pode ver, criar um ToC não é tão difícil com um pouco de conhecimento em desenvolvimento web.

Se você gostou deste artigo, você pode me seguir nas redes sociais: (Twitter/X, GitHube/ou LinkedIn). Você também pode verificar meu site pessoal e meu novo blog.