Como gerar automaticamente o índice com slots HTML
Índice pode melhorar muito a experiência do usuário de muitos sites, por exemplo sites de documentação ou enciclopédias online como a Wikipedia. Um índice bem projetado dá uma visão geral da página e ajuda os usuários a navegar rapidamente para a seção em que estão interessados.
Tradicionalmente, você pode criar índices de conteúdo em HTML ou com JavaScript, mas os slots HTML padronizados recentemente fornecem meio caminho entre os dois. Slot HTML é um padrão da web que permite que você adicionar espaços reservados a uma página da web e depois preenchê-lo com conteúdo dinamicamente.
Quando usar o
Você pode colocar
Com essa técnica, você precisa criar o código-fonte HTML do sumário manualmente. O JavaScript só gera automaticamente o conteúdo de texto do índice, com base nos títulos ou subtítulos na página.
Se você não quiser um índice para estar presente no HTML, você precisa gerar tanto o layout quanto o conteúdo com JavaScript.
1. Crie o HTML
O código fonte HTML para o TOC (índice) será dentro de um tag. O código dentro não é renderizado até ser adicionado ao documento por JavaScript. Nosso TOC terá placeholders, realizada em
o nome atributo de cada ranhura atributo em seus títulos e subtítulos correspondentes no documento.
Abaixo, você pode ver um amostra de HTML Velociraptor (que significa "swift seizer" em latim) é um… Velociraptor era um dromeossaurídeo de tamanho médio, com adultos… Fósseis de dromaeossaurídeos mais primitivos que… Durante uma expedição ao Museu Americano de História Natural ... Velociraptor é um membro do grupo Eudromaeosauria, um subgrupo derivado de… O espécime "Fighting Dinosaurs", encontrado em 1971, preserva um… Em 2010, Hone e seus colegas publicaram um artigo sobre… Velociraptor era de sangue quente em algum grau, pois exigia um… Um crânio Velociratoptor mongoliensis tem dois paralelos… Como você pode ver, cada título é dado um único E aqui está o Código HTML do TOC, dentro de um Nos dois trechos de código acima, observe o Coincidindo Antes de examinar o código JavaScript que adicionará o TOC do Certifique-se de que Agora, adicionamos o script que insere o TOC acima do O trecho de código acima cria uma cópia de Então, o clonado Se redefinirmos o contador de CSS no Aqui está a captura de tela da saída: Se você quiser ligar os títulos TOC aos seus respectivos títulos e subtítulos adicionando Velociraptor (que significa "swift seizer" em latim) é um… Velociraptor era um dromeossaurídeo de tamanho médio, com adultos… Fósseis de dromaeossaurídeos mais primitivos que… Como você pode ver acima, o E a títulos dentro do índice estão ancorados: Na linha extra acima, todos Veja a captura de tela do índice ligado abaixo: Você pode conferir, fazer o download ou comprar o código usado neste post do nosso Github Repo.. com alguns títulos e subtítulos. o
Descrição
Penas
História da descoberta
Classificação
Paleobiologia
Comportamento de eliminação
Metabolismo
Patologia
ranhura valor. tag.
ranhura e nome atributos dentro dos títulos e do 2. Numere os títulos
ao documento, vamos adicionar números de série para os títulos, usando contadores de CSS. artigo counter-reset: heading; artigo h2 :: before counter-increment: heading; conteúdo: «0'contador (título) ':';
redefinir o contador regra pertence ao elemento que é o pai imediato de todos os títulos que transportam o ranhura atributo (qual é o elemento em nosso código).3. Insira o TOC no documento
tag, dentro de recipiente. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (artigo); e anexa uma árvore de DOM Shadow a ele. Nós também adicione uma cópia de conteúdo para esta árvore Shadow DOM. é inserido no elemento é agora presente no TOC bem, no entanto, apenas os títulos e subtítulos que encontraram um espaço reservado dentro do TOC são visíveis. corpo ou html elemento em vez de artigo, o contador teria contado a lista de títulos dentro do TOC também. É por isso que você deveria redefinir os contadores no pai imediato dos títulos.
4. Adicione hiperlinks
identidade para os títulos e ancorando seu texto TOC correspondente, você terá que remova o repetitivo identidade valores do clonado artigo.
Descrição
Penas
identidade atributo é adicionado a todos os títulos e subtítulos do artigo.
identidade atributos são removido do artigo clonado antes anexando a árvore DOM Shadow a ele. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (modo: 'fechado'). appendChild (templateContent.cloneNode (true )); document.querySelector ('# toc'). appendChild (artigo); 
Demonstração do Github
