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 HeaderbaixoSettings > 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.
Deixe um comentário