Dodawanie spisu treści (TOC) do motywu Ghost: przewodnik krok po kroku

Włączenie spisu treści (TOC) do bloga Ghost znacznie poprawia wrażenia czytelnika, ułatwiając płynną nawigację po dłuższych artykułach. Ten samouczek przeprowadzi Cię przez proces dodawania spisu treści do dowolnego motywu Ghost za pomocą TOCBOT, wtyczki JavaScript, która automatycznie generuje spis treści z nagłówków obecnych w Twoich postach.

Integracja TOCBOT w Ghost

TOCBOT sprawnie konstruuje spis treści z nagłówków postów. Wykonaj następujące proste kroki instalacji:

Zaloguj się do panelu administratora Ghost i przejdź do Settings > Code injection.
W tym Site Headerobszarze należy wstawić wymagany skrypt TOCBOT i arkusz stylów:

<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">

Następnie w tej Site Footersekcji zainicjuj TOCBOT za pomocą następującego skryptu:

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

Upewnij się, że jest contentSelectorzgodny z klasą określoną w Twoim motywie dla treści posta. Powszechnie używane klasy obejmują .post-content, .gh-content, lub .c-content.

Na koniec zapisz zmiany w Code injectionustawieniach.

Wstawianie symbolu zastępczego spisu treści do postów

Aby wyświetlić spis treści w swoich artykułach, musisz umieścić symbol zastępczy w wybranym miejscu:

Edytuj post, do którego chcesz dodać spis treści.
Dodaj kartę HTML w wybranym przez siebie miejscu, wpisując ją /htmlw edytorze.
Umieść poniższy kod na karcie HTML:

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

Ten fragment kodu tworzy przestrzeń dla spisu treści. Po uzyskaniu dostępu do wpisu TOCBOT wypełni tę przestrzeń dynamicznie generowanym spisem treści pochodzącym z nagłówków treści.

Dostosowywanie wyglądu spisu treści

Możesz spersonalizować wygląd spisu treści, aby lepiej dopasować go do projektu swojego motywu:

Poniżej Site Headerdodaj Settings > Code injectionniestandardowe style CSS zawarte w <style>znaczniku:

<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>

Możesz swobodnie dostosować te style do swoich preferencji.

Modyfikowanie dla różnych motywów

Ponieważ motywy mogą używać różnych nazw klas dla sekcji treści, upewnij się, że contentSelectorw konfiguracji TOCBOT nazwa odpowiada klasie treści Twojego motywu:

Zacznij od dowolnego otwartego wpisu i zapoznaj się ze swoim motywem.
Kliknij prawym przyciskiem myszy na treść wpisu i wybierz Inspectdostęp do narzędzi programistycznych w swojej przeglądarce.
Znajdź nazwę klasy skojarzoną z elementem zawierającym treść Twojego wpisu, np .post-content. .

Pamiętaj o aktualizacji contentSelectorskryptu TOCBOT na podstawie tego, co znajdziesz.

Tworzenie stałego spisu treści

Aby spis treści był widoczny podczas przewijania strony przez czytelników, możesz ustawić go jako przyklejony:

W Site Header, dodaj ten kod CSS w <style>znaczniku:

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

Spowoduje to umieszczenie spisu treści względem obszaru widoku, dzięki czemu pozostanie on widoczny, gdy użytkownicy będą przewijać wpis.

Wdrażając te instrukcje, możesz wzbogacić swojego bloga Ghost o funkcjonalny spis treści, usprawniając w ten sposób nawigację i interakcję z czytelnikami podczas przeglądania wpisów.

Źródło