{"id":4657,"date":"2024-10-24T13:46:12","date_gmt":"2024-10-24T13:46:12","guid":{"rendered":"https:\/\/howtogeek.blog\/pt\/?p=4657"},"modified":"2024-10-24T13:46:12","modified_gmt":"2024-10-24T13:46:12","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/pt\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Adicionando um \u00edndice (TOC) ao seu tema Ghost: um guia passo a passo"},"content":{"rendered":"<p>Incorporar um \u00edndice (TOC) no seu blog Ghost melhora significativamente a experi\u00eancia do leitor ao facilitar a navega\u00e7\u00e3o sem interrup\u00e7\u00f5es por artigos mais longos. Este tutorial guiar\u00e1 voc\u00ea pelo processo de adicionar um TOC a qualquer tema Ghost usando TOCBOT, um plugin JavaScript que gera automaticamente um TOC a partir dos t\u00edtulos presentes em suas postagens.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">Integrando TOCBOT no Ghost<\/h2>\n<p>O TOCBOT constr\u00f3i eficientemente um TOC a partir dos t\u00edtulos de seus posts. Siga estes passos simples para instala\u00e7\u00e3o:<\/p>\n<ul>\n<li>Entre no seu painel de administra\u00e7\u00e3o do Ghost e v\u00e1 para <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>Na <code>Site Header<\/code>\u00e1rea, insira o script TOCBOT e a folha de estilo necess\u00e1rios:<\/li>\n<\/ul>\n<p> <code> <code>&lt;script type=\"text\/javascript\"src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tocbot\/4.21.0\/tocbot.min.js\"&gt;&lt;\/script&gt;<br \/>\n&lt;link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tocbot\/4.21.0\/tocbot.css\"rel=\"stylesheet\"&gt;<\/code><\/code><\/p>\n<ul>\n<li>Em seguida, na <code>Site Footer<\/code>se\u00e7\u00e3o, inicialize o TOCBOT usando o seguinte script:<\/li>\n<\/ul>\n<p> <code> <code>&lt;script&gt;<br \/>\n  document.addEventListener('DOMContentLoaded', function() {<br \/>\n    tocbot.init({<br \/>\n      tocSelector: '.toc',<br \/>\n      contentSelector: '.post-content',<br \/>\n      headingSelector: 'h1, h2, h3, h4',<br \/>\n      scrollSmooth: true<br \/>\n    });<br \/>\n  });<br \/>\n&lt;\/script&gt;<\/code><\/code><\/p>\n<p>Certifique-se de que o <code>contentSelector<\/code>se alinha com a classe designada em seu tema para o conte\u00fado do post. As classes comumente usadas incluem <code>.post-content<\/code>, <code>.gh-content<\/code>, ou <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Por fim, salve suas altera\u00e7\u00f5es nas <code>Code injection<\/code>configura\u00e7\u00f5es.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">Inserindo o espa\u00e7o reservado do TOC em postagens<\/h2>\n<p>Para exibir o TOC em seus artigos, voc\u00ea precisar\u00e1 colocar um espa\u00e7o reservado no local desejado:<\/p>\n<ul>\n<li>Edite uma postagem onde voc\u00ea deseja incluir o TOC.<\/li>\n<li>Adicione um cart\u00e3o HTML no local de sua prefer\u00eancia digitando <code>\/html<\/code>no editor.<\/li>\n<li>Inclua o seguinte c\u00f3digo no cart\u00e3o HTML:<\/li>\n<\/ul>\n<p> <code> <code>&lt;div class=\"toc\"&gt;&lt;\/div&gt;<\/code><\/code><\/p>\n<figure class=\"wp-block-image\"><img alt=\"\" class=\"wp-image\" decoding=\"async\" height=\"479\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2024\/10\/image-507.webp\" title=\"\" width=\"1135\"\/><\/figure>\n<p>Este peda\u00e7o de c\u00f3digo estabelece um espa\u00e7o para o TOC. Uma vez que o post \u00e9 acessado, o TOCBOT preencher\u00e1 este espa\u00e7o com o TOC gerado dinamicamente derivado dos seus t\u00edtulos de conte\u00fado.<\/p>\n<h2 id=\"styling-the-toc\">Personalizando a apar\u00eancia do TOC<\/h2>\n<p>Voc\u00ea pode personalizar a apar\u00eancia do TOC para melhor alinh\u00e1-lo ao design do seu tema:<\/p>\n<ul>\n<li>Em <code>Site Header<\/code>baixo <code>Settings &gt; Code injection<\/code>, adicione estilos CSS personalizados inclu\u00eddos em uma <code>&lt;style&gt;<\/code>tag:<\/li>\n<\/ul>\n<p> <code> <code>&lt;style&gt;<br \/>\n . toc {<br \/>\n    padding: 20px;<br \/>\n    border: 1px solid #e0e0e0;<br \/>\n    background-color: #f9f9f9;<br \/>\n    border-radius: 5px;<br \/>\n  }<br \/>\n . toc a {<br \/>\n    text-decoration: none;<br \/>\n    color: #333;<br \/>\n  }<br \/>\n . toc a:hover {<br \/>\n    text-decoration: underline;<br \/>\n  }<br \/>\n&lt;\/style&gt;<\/code><\/code><\/p>\n<p>Sinta-se \u00e0 vontade para ajustar esses estilos de acordo com suas prefer\u00eancias.<\/p>\n<h2 id=\"adjusting-for-different-themes\">Modificando para v\u00e1rios temas<\/h2>\n<p>Como os temas podem usar nomes de classe diferentes para se\u00e7\u00f5es de conte\u00fado, certifique-se de que <code>contentSelector<\/code>na configura\u00e7\u00e3o do TOCBOT corresponda \u00e0 classe de conte\u00fado do seu tema:<\/p>\n<ul>\n<li>Inspecione seu tema come\u00e7ando com qualquer postagem aberta.<\/li>\n<li>Clique com o bot\u00e3o direito do mouse no conte\u00fado da postagem e escolha <code>Inspect<\/code>acessar as ferramentas de desenvolvedor do seu navegador.<\/li>\n<li>Encontre o nome da classe associado ao elemento que cont\u00e9m o conte\u00fado da sua postagem, como <code>.post-content<\/code>.<\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img alt=\"\" class=\"wp-image\" decoding=\"async\" height=\"420\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2024\/10\/image-506.webp\" title=\"\" width=\"942\"\/><\/figure>\n<ul>\n<li>Certifique-se de atualizar o <code>contentSelector<\/code>script TOCBOT com base no que voc\u00ea encontrar.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Criando um TOC Fixo<\/h2>\n<p>Para manter o TOC vis\u00edvel enquanto seus leitores rolam, voc\u00ea pode configur\u00e1-lo para ser fixo:<\/p>\n<ul>\n<li>No <code>Site Header<\/code>, adicione este CSS dentro de uma <code>&lt;style&gt;<\/code>tag:<\/li>\n<\/ul>\n<p> <code> <code>&lt;style&gt;<br \/>\n . toc {<br \/>\n    position: sticky; top: 20px;<br \/>\n  }<br \/>\n&lt;\/style&gt;<\/code><\/code><\/p>\n<p>Isso posicionar\u00e1 o TOC em rela\u00e7\u00e3o \u00e0 janela de visualiza\u00e7\u00e3o, garantindo que ele permane\u00e7a vis\u00edvel enquanto os usu\u00e1rios percorrem a postagem.<\/p>\n<p>Ao implementar essas instru\u00e7\u00f5es, voc\u00ea pode enriquecer seu blog Ghost com um \u00edndice funcional, melhorando assim a navega\u00e7\u00e3o e a intera\u00e7\u00e3o do leitor em suas postagens.<\/p>\n<p><a class=\"xiaomi\" href=\"https:\/\/allthings.how\/how-to-add-table-of-contents-toc-to-any-ghost-theme\/\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">Fonte<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Incorporar um \u00edndice (TOC) no seu blog Ghost melhora significativamente a experi\u00eancia do leitor ao facilitar a navega\u00e7\u00e3o sem interrup\u00e7\u00f5es por artigos mais longos. Este tutorial guiar\u00e1 voc\u00ea pelo processo de adicionar um TOC a qualquer tema Ghost usando TOCBOT, um plugin JavaScript que gera automaticamente um TOC a partir dos t\u00edtulos presentes em suas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[130],"class_list":["post-4657","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/posts\/4657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/comments?post=4657"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/posts\/4657\/revisions"}],"predecessor-version":[{"id":4658,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/posts\/4657\/revisions\/4658"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/media?parent=4657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/categories?post=4657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/tags?post=4657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}