Szablon Ghost zawiera statyczne pliki HTML, które korzystają z  helperów do wygenerowania danych dla Twojej strony oraz indywidualny plik CSS do stylizacji.

Struktura

Zalecaną strukturą plików dla szablonu Ghost jest:

.
├── /assets
|   └── /css
|       ├── screen.css
|   ├── /fonts
|   ├── /images
|   ├── /js
├── default.hbs
├── index.hbs [wymagany]
└── post.hbs [wymagany]
└── package.json [wymagany]


Opcjonalny katalog /partials pozwala na używanie częściowych szablonów w całej witrynie. Pozwala to na współdzielenie bloków HTML pomiędzy wieloma plikami szablonu i zmniejszenie duplikacji kodu.

.
├── /assets
    ├── /css
        ├── screen.css
    ├── /fonts
    ├── /images
    ├── /js
├── /partials
    ├── list-post.hbs
├── default.hbs
├── index.hbs [wymagany]
└── post.hbs [wymagany]
└── package.json [wymagany]


Szablony


Szablon Ghost wymaga 2 plików: index.hbs i post.hbs.  Wszystkie pozostałe pliki są opcjonalne.

Zaleca się użycie pliku default.hbs jako pliku zawierającego podstawowy układ dla Twojego szablonu.
Jeśli chcesz użyć różnych układów dla różnych stron, możesz użyć routingu dynamicznego lub użyć partials do wspólnych części motywu.

Szablony są hierarchiczne, więc jeden szablon może rozszerzyć inny. Zapobiega to powtarzaniu się bazowego kodu HTML. Oto kilka powszechnie stosowanych szablonów tematycznych i ich zastosowania:

default.hbs

default.hbs jest podstawowym plikiem, który zawiera standardowe bloki HTML, które istnieją na każdej stronie, takie jak <html>, <head> lub <body> , jak również wymagane {{ghost_head}}  i  {{ghost_foot}} oraz dowolny HTML dla nagłówka i stopki.

index.hbs

Jest to standardowy plik używany do wyświetlenia listy postów. Jest on również używany jeśli Twój szablon nie zawiera tag.hbs, author.hbs lub index.hbs.

index.hbs zazwyczaj rozszerza default.hbs i wyświetla listy postów za pomocą helpera {{#foreach}}.

home.hbs

Opcjonalny plik dostarczający specjalnej zawartości dla strony głównej. Szablon ten będzie używany tylko do renderowania /.

post.hbs

Plik wymagany do wyświetlenia widoku pojedynczego postu, który rozszerza default.hbs i używa helpera {{#post}} do wygenerowania szczegółów postu. Własne szablony dla poszczególnych postów mogą być tworzone przy użyciu post-:slug.hbs.

page.hbs

Opcjonalny plik dla stron statycznych. Jeśli nie zostanie on odnaleziony, zostanie użyty post.hbs. Niestandardowe szablony dla poszczególnych stron mogą być tworzone przy użyciu post-:slug.hbs.

custom-{{{nazwa szablonu}}.hbs

Opcjonalny plik, który może być wybrany w interfejsie administratora na zasadzie per-post. Może on być używany zarówno dla postów jak i stron.

tag.hbs

Opcjonalny plik zawierający szablon dla stron zawierających zbiory tagów. Jeśli nie zdefiniowano inaczej, używany jest szablon index.hbs. Niestandardowe szablony dla poszczególnych tagów mogą być tworzone za pomocą tag-:slug.

author.hbs

Opcjonalny szablon dla stron autorów. Jeśli nie określono innego, używany jest szablon index.hbs. Własne szablony dla poszczególnych autorów mogą być tworzone za pomocą polecenia author{{slug}}.

private.hbs

Opcjonalny plik zawierający formularz logowania używany na stronach chronionych hasłem.

error.hbs

Opcjonalny plik zawierający szablon dla błędów 404 lub 500, które nie są obsługiwane przez szablony specyficzne dla danego błędu lub klasy błędów. Jeśli żaden inny nie zostanie określony, Ghost będzie używał domyślnego szablonu.

error-{{klasa błędów}}xx.hbs

Opcjonalny szablon dla błędów należących do określonej klasy (np. error-4xx.hbs dla błędów klasy 400 ). Pasujący szablon klasy błędów ma wyższy priorytet niż error.hbs jak i domyślny szablon Ghost używany do renderowania strony błędów.

amp.hbs

Opcjonalny szablon tematyczny dla AMP (Accelerated Mobile Pages). Jeśli Twój motyw nie zawiera pliku amp.hbs, Ghost użyje domyślnego ustawienia.

robots.txt

Motywy mogą zawierać plik robots.txt, który zastąpi domyślny plik robots.txt używany przez Ghost.

Domyślny motyw Casper może być użyty do sprawdzenia jak działają motywy Ghost. Możesz również przebudować i dostosować Caspera do własnych potrzeb!

Helpers

Motywy Ghost cms zbudowane są ze znaczników HTML i Handlebars.

Aby motyw Ghost działał poprawnie musisz użyć następujących znaczników:

{{asset}}, {{body_class}}, {{post_class}}, {{ghost_head}}, {{ghost_foot}}.

Tutaj znajdziesz więcej szczegółów na temat znaczników Handlebars.

Contexts

Każda strona w motywie Ghost należy do kontekstu, który jest określony przez adres URL. Kontekst decyduje o tym, jaki szablon zostanie użyty, jakie dane będą dostępne i jakie będą dane wyjściowe w  {{body_class}} .

Stylizacja

Podczas tworzenia motywów ważne jest, aby wziąć pod uwagę zakres klas i identyfikatorów, aby uniknąć konfliktów między stylem głównym a stylem widoku postów. Identyfikatory są generowane automatycznie dla nagłówków i używane wewnątrz postu, więc najlepszą praktyką jest rozszerzenie zakresu na konkretną część strony.

Na przykład:

#themename-my-id

jest lepszy niż

#my-id.

Tryb deweloperski

Zaleca się korzystanie z trybu deweloperskiego instalacji lokalnej podczas tworzenia własnego motywu  - zapoznaj się z przewodnikiem - jak zainstalować ghost lokalnie .

W trybie produkcyjnym, pliki szablonów są ładowane i buforowane przez serwer. Aby zmiany dokonane w pliku hbs zostały odzwierciedlone w przeglądarce użyj komendy ghost restart.

Gdy będziesz uploadował swój szablon do panelu administratora, Ghost automatycznie sprawdzi czy nie zawiera on krytycznych błędów.

Aby uzyskać pełny raport walidacji podczas tworzenia, użyj narzędzia GScan.

Podsumowanie

Właśnie poznałeś podstawy budowy szablonu Ghost i ogólny zarys najważniejszych plików. Przed zanurzeniem się w specyfikę kontekstów, helpersów i dodatkowych funkcji, kolejnym krokiem powinno być zapoznanie się z plikiem package.json.