Adicionando um índice (TOC) ao seu tema Ghost: um guia passo a passo

Incorporar um índice (TOC) no seu blog Ghost melhora significativamente a experiência do leitor ao facilitar a navegação sem interrupções por artigos mais longos. Este tutorial guiará você pelo processo de adicionar um TOC a qualquer tema Ghost usando TOCBOT, um plugin JavaScript que gera automaticamente um TOC a partir dos títulos presentes em suas postagens.

Integrando TOCBOT no Ghost

O TOCBOT constrói eficientemente um TOC a partir dos títulos de seus posts. Siga estes passos simples para instalação:

Entre no seu painel de administração do Ghost e vá para Settings > Code injection.
Na Site Headerárea, insira o script TOCBOT e a folha de estilo necessários:

<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css"rel="stylesheet">

Em seguida, na Site Footerseção, inicialize o TOCBOT usando o seguinte script:

<script> document.addEventListener('DOMContentLoaded', function() { tocbot.init({ tocSelector: '.toc', contentSelector: '.post-content', headingSelector: 'h1, h2, h3, h4', scrollSmooth: true }); }); </script>

Certifique-se de que o contentSelectorse alinha com a classe designada em seu tema para o conteúdo do post. As classes comumente usadas incluem .post-content, .gh-content, ou .c-content.

Por fim, salve suas alterações nas Code injectionconfigurações.

Inserindo o espaço reservado do TOC em postagens

Para exibir o TOC em seus artigos, você precisará colocar um espaço reservado no local desejado:

Edite uma postagem onde você deseja incluir o TOC.
Adicione um cartão HTML no local de sua preferência digitando /htmlno editor.
Inclua o seguinte código no cartão HTML:

<div class="toc"></div>

Este pedaço de código estabelece um espaço para o TOC. Uma vez que o post é acessado, o TOCBOT preencherá este espaço com o TOC gerado dinamicamente derivado dos seus títulos de conteúdo.

Personalizando a aparência do TOC

Você pode personalizar a aparência do TOC para melhor alinhá-lo ao design do seu tema:

Em Site Headerbaixo Settings > Code injection, adicione estilos CSS personalizados incluídos em uma <style>tag:

<style> . toc { padding: 20px; border: 1px solid #e0e0e0; background-color: #f9f9f9; border-radius: 5px; } . toc a { text-decoration: none; color: #333; } . toc a:hover { text-decoration: underline; } </style>

Sinta-se à vontade para ajustar esses estilos de acordo com suas preferências.

Modificando para vários temas

Como os temas podem usar nomes de classe diferentes para seções de conteúdo, certifique-se de que contentSelectorna configuração do TOCBOT corresponda à classe de conteúdo do seu tema:

Inspecione seu tema começando com qualquer postagem aberta.
Clique com o botão direito do mouse no conteúdo da postagem e escolha Inspectacessar as ferramentas de desenvolvedor do seu navegador.
Encontre o nome da classe associado ao elemento que contém o conteúdo da sua postagem, como .post-content.

Certifique-se de atualizar o contentSelectorscript TOCBOT com base no que você encontrar.

Criando um TOC Fixo

Para manter o TOC visível enquanto seus leitores rolam, você pode configurá-lo para ser fixo:

No Site Header, adicione este CSS dentro de uma <style>tag:

<style> . toc { position: sticky; top: 20px; } </style>

Isso posicionará o TOC em relação à janela de visualização, garantindo que ele permaneça visível enquanto os usuários percorrem a postagem.

Ao implementar essas instruções, você pode enriquecer seu blog Ghost com um índice funcional, melhorando assim a navegação e a interação do leitor em suas postagens.

Fonte