Witaj, świecie!
Plik README opisuje proces zbudowania projektu.
Ta podstrona korzysta z frontmatter (informacje w formacie YAML na górze plików *.md pomiędzy “—” a “—”), gdzie jest zdefiniowana m.in. nazwa strony do menu.
Oprócz tego, wspólne informacje dla folderu trzymane są w pliku JSON o nazwie folderu. Oznacza to, że plik src.json zawiera informacje, które są dzielone przez wszystkie pliki w folderze; w tym wypadku layout.
Layouty są zrealizowane w Nunjuncks (*.njk) w folderze includes/layouts.
Strona jest stylizowana za pomocą SCSS w pliku includes/scss/style.scss, gdzie zaimportowane są podstawowe style dla strony (normalize, trochę klas, mixinów i zmiennych).
Do zarządzania responsywnością zalecamy użycie mixin @device(phone, tablet, desktop) { … }, który ogranicza style do wybranej platformy.
Kolory i czcionki są zdefiniowane w pliku data/colors.json oraz data/fonts.json. Kolory są dostępne pod zmienną o nazwie klucza np. “primary-color” -> var(--primary-color), a czcionki są automatycznie ładowane z Google Fonts i aplikowane na opisany selektor. Można w tych plikach dodawać nowe i usuwać stare wpisy.
Pliki danych są zawarte w folderze src/data i są one w formacie JSON.
Jeżeli tworzymy layout i style, a nie wdrażamy strony na serwerze, pliki inne niż colors.json i fonts.json nie powinny być modyfikowane w folderze data. Możemy natomiast dodawać nowe pliki i używać istniejących do odczytu.
Jeżeli chcemy odczytać nazwę firmy w szablonach (jest ona zapisana w company.json -> name), to możemy to odczytać przez: Nazwa firmy (tutaj podmieni się nazwa, proszę zobaczyć kod źródłowy pliku index.md).
Analogicznie działa każdy inny plik JSON, np. nazwa strony (company.json) => Nazwa strony
Pliki typu obrazki, PDFy, filmy powinny być umieszone w folderze /uploads na płasko, bez podfolderów.
Pliki niemodyfikowalne, np. dodatkowe CSS, powinny być includowane przez użycie w ich w style.scss, ale jeżeli istnieje potrzeba dodania dodatkowych CSS/JS, to można zdefiniować to w frontmatter (jak w pliku includes/layouts/example-layout.njk)
Szablony powinny zawierać tylko to, co jest w body, bez całej otoczki HTML (html, head, itd.). Tag head i reszta jest dziedziona z szablonu page (jak w pliku includes/layouts/example-layout.njk)
Przykładowa podstona z wstawianymi fragmentami Markdown, layoutem podstrony w NJK i menu