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 Header
obszarze 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 Footer
sekcji 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 contentSelector
zgodny 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 injection
ustawieniach.
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ą
/html
w 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 Header
dodajSettings > Code injection
niestandardowe 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 contentSelector
w 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
Inspect
dostę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
contentSelector
skryptu 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.
Dodaj komentarz