PWA

Jak stworzyć swój szablon do Cleaver?

• 2 minuty

Cleaver to narzędzia, które na podstawie pliku w formacie Markdown (*.md) tworzy slajdy w formacie HTML (po uprzednim zbudowaniu za pomocą polecania w terminalu).

Format Markdown to pewnego rodzaju standard w świecie programistycznym. I dobrze. Składnia jest prosta, ale nie uboga. Format ten daje duże możliwości w przygotowaniu dobrze sformatowanego tekstu.

Baner promujący artykuł

Jak stworzyć nowy temat?

Aby stworzyć własny szablon należy stworzyć 5 plików:

  • layout.mustache

    • Szablon głównej strony (w stylu index.html). Zawiera definicję strukturę strony.

    • Aby wyświetlić zawartość pliku template.mustache należy wykorzystać składnię (bez spacji między nawiasami): { { { slideshow } } }

      Uwaga: jeśli zamiast 3 nawiasów zostaną użyte tylko 2, to zawartość zmiennej zostanie po prostu zwrócona. 3 nawiasy powodują, że treść jest sparsowana do HTMLa.

    • Warto wykorzystać pola author oraz encoding aby wpisać odpowiednie metadane (znaczniki <meta>).

  • script.js

    • Obecnie jest to pusty plik. Można tutaj dołożyć jakieś dodatkowe feature-y do slajdów, np. zegarek.

  • settings.json

    • Konfiguracja projektu.

  • style.css

    • Wygląd slajdów.

  • template.mustache

    • Szablon listy slajdów.

Polecam stworzyć te pliku w osobnym katalogu, aby potem w pliku ze slajdami móc zdefiniować ścieżkę do katalogu z customowym tematem:

title: My Custom Theme
output: demo/slides.html
theme: ../my-custom-theme

Marna dokumentacja Cleaver-a

W źródłach projektu cleaver znajduje się plik cleaver/lib/index.js, w którym w okolicach 250 linijki jest stworzona zmienna layoutData, która to definiuje listę zmiennych. Będą one wstrzykiwane w szablon. Niestety nigdzie w dokumentacji nie ma informacji jakie pola można wykorzystać.

Stwierdziłem więc, że napiszę o tym post. Może komuś się przyda.

Slajdy

W pliku z definicją slajdów (plik z rozszerzeniem .md), na górze tego pliku można zdefiniować listę parametrów, które Cleaver rozumie.

Oto lista wspieranych pól:

  • author - login z Twitter-a autora slajdów
  • title - tytuł slajdów (domyślnie: Untitled)
  • encoding - kodowanie plików (domyślnie: utf-8)
  • script - ścieżka albo URL do pliku JavaScript

  • style - obecnie jest to ścieżka albo URL do pliku CSS.

    Stworzyłem Pull Request, gdzie dodałem wsparcie do osadzenia wielu plików.

  • slideshow - tutaj zostanie wstrzyknięta lista slajdów
  • options - nieznany obiekt (nie wiem jak można go wykorzystać)

Mój własny temat

Przedstawiam Wam prosty przykład szablonu mojego autorstwa:
https://github.com/piecioshka/my-cleaver-theme

Projekt dostępny jest w moim portfolio projektów na GitHubie.

  1. Projekt w katalogu theme/ zawiera 5 wymaganych plików.

    • layout.mustache
    • script.js
    • settings.json
    • style.css
    • template.mustache

  2. Natomiast w katalogu demo/ jest plik slides.md, która po wykonaniu polecenia npm run build zostanie wykorzystany do stworzenia pliku demo/slides.html.

Linki

Dokumentacja projektu:

Lista narzędzi, które podobnie jak Cleaver konwertują format Markdown do formatu HTMLa w formie slajdów: