Tworzenie statycznej witryny z komponentami za pomocą Nunjucks
Opublikowany: 2022-03-10W dzisiejszych czasach jest dość popularny i ośmielę się powiedzieć, że jest to cholernie dobry pomysł, aby budować witryny z komponentami. Zamiast tworzyć całe strony jedna po drugiej, budujemy system komponentów (pomyśl: formularz wyszukiwania, kartę artykułu, menu, stopkę), a następnie składamy witrynę z tymi komponentami.
Frameworki JavaScript, takie jak React i Vue, mocno podkreślają tę ideę. Ale nawet jeśli w ogóle nie używasz JavaScriptu po stronie klienta do budowy witryny, nie oznacza to, że musisz zrezygnować z idei budowania z komponentami! Korzystając z preprocesora HTML, możemy zbudować statyczną witrynę i nadal czerpać wszystkie korzyści z wyodrębnienia naszej witryny i jej zawartości w składniki, które można ponownie wykorzystać.
Statyczne witryny są obecnie modne i słusznie, ponieważ są szybkie, bezpieczne i niedrogie w obsłudze. Nawet Smashing Magazine to strona statyczna, wierzcie lub nie!
Przejrzyjmy witrynę, którą niedawno zbudowałem przy użyciu tej techniki. Do jej zbudowania użyłem CodePen Projects, który oferuje Nunjucks jako preprocesor, który idealnie się do tego nadawał.
Czterostronicowa witryna ze spójnym nagłówkiem, nawigacją i stopką
To jest mikrowitryna. Nie potrzebuje pełnego CMS do obsługi setek stron. Nie wymaga JavaScript do obsługi interaktywności. Ale potrzebuje kilku stron, które mają ten sam układ.
Sam HTML nie ma na to dobrego rozwiązania. Potrzebujemy importu . Języki takie jak PHP ułatwiają to za pomocą rzeczy takich jak <?php include "header.php"; ?> <?php include "header.php"; ?> , ale hosty plików statycznych nie uruchamiają PHP (celowo), a sam HTML nie jest pomocny. Na szczęście możemy wstępnie przetworzyć dołączenia za pomocą Nunjucks.
W tym przypadku bardzo sensowne jest utworzenie układu , w tym fragmentów kodu HTML reprezentujących nagłówek, nawigację i stopkę. Szablony Nunjucks opierają się na koncepcji bloków, które pozwalają nam umieścić treść w tym miejscu, gdy używamy układu.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Power of Serverless</title> <link rel="stylesheet" href="/styles/style.processed.css"> </head> <body> {% include "./template-parts/_header.njk" %} {% include "./template-parts/_nav.njk" %} {% block content %} {% endblock %} {% include "./template-parts/_footer.njk" %} </body> Zwróć uwagę, że dołączone pliki mają nazwy takie jak _file.njk . To nie jest konieczne. Może to być header.html lub icons.svg , ale są one nazywane w ten sposób, ponieważ 1) pliki, które zaczynają się od podkreśleń, są trochę standardowym sposobem powiedzenia, że są częściowe. W CodePen Projects oznacza to, że nie będą próbowały zostać skompilowane samodzielnie. 2) Nazywając go .njk , moglibyśmy użyć tam więcej elementów Nunjucks, jeśli chcemy.
Żaden z tych kawałków nie ma w sobie nic szczególnego. To tylko małe fragmenty kodu HTML przeznaczone do użycia na każdej z naszych czterech stron.
<footer> <p>Just a no-surprises footer, people. Nothing to see here.<p> </footer>W ten sposób możemy wprowadzić jedną zmianę i odzwierciedlić ją na wszystkich czterech stronach.
Korzystanie z układu dla czterech stron
Teraz każda z naszych czterech stron może być plikiem. Zacznijmy jednak od index.njk , który w CodePen Projects będzie automatycznie przetwarzany i tworzy plik index.html za każdym razem, gdy zapisujesz.
Oto, co możemy umieścić w index.njk , aby użyć układu i upuścić trochę treści w tym bloku:
{% extends "_layout.njk" %} {% block content %} <h1>Hello, World!</h1> {% endblock %}To zapewni nam w pełni funkcjonalną stronę główną! Miły! Każda z czterech stron może zrobić dokładnie to samo, ale umieszczając w bloku inną treść, a my sami mamy małą czterostronicową witrynę, którą łatwo zarządzać.
Dla przypomnienia, nie jestem pewien, czy nazwałbym te małe fragmenty, których ponownie używamy komponentów . Po prostu jesteśmy wydajni i dzielimy układ na kawałki. Myślę o komponencie bardziej jak fragmencie wielokrotnego użytku, który akceptuje dane i wyświetla swoją unikalną wersję z tymi danymi. Dojdziemy do tego.
Tworzenie aktywnej nawigacji
Teraz, gdy powtórzyliśmy identyczny fragment kodu HTML na czterech stronach, czy możliwe jest zastosowanie unikalnego kodu CSS do poszczególnych elementów nawigacji w celu zidentyfikowania bieżącej strony? Moglibyśmy z JavaScript i patrząc na window.location i tym podobne, ale możemy to zrobić bez JavaScript. Sztuczka polega na umieszczeniu class w <body> unikalnej dla każdej strony i użyciu jej w CSS.
W naszym _layout.njk mamy ciało wyprowadzające nazwę klasy jako zmienną:
<body class="{{ body_class }}">Następnie zanim wywołamy ten układ na pojedynczej stronie, ustawiamy tę zmienną:
{% set body_class = "home" %} {% extends "_layout.njk" %}Załóżmy, że nasza nawigacja miała strukturę
<nav class="site-nav"> <ul> <li class="nav-home"> <a href="/"> Home </a> ...Teraz możemy skierować ten link i zastosować specjalną stylizację zgodnie z potrzebami, wykonując:
body.home .nav-home a, body.services .nav-services a { /* continue matching classes for all pages... */ /* unique active state styling */ } 
Aha, a te ikony? To tylko pojedyncze pliki .svg , które umieściłem w folderze i dołączyłem jak
{% include "../icons/cloud.svg" %}A to pozwala mi stylizować je w następujący sposób:
svg { fill: white; } Zakładając, że elementy SVG w środku nie mają już atrybutów fill .
Tworzenie treści w Markdown
Strona główna mojej mikrowitryny zawiera dużo treści. Z pewnością mógłbym to napisać i utrzymać w samym HTML, ale czasami fajnie jest zostawić tego typu rzeczy Markdownowi. Markdown wydaje się czystszy do pisania i być może nieco łatwiejszy do oglądania, gdy jest dużo kopii.
W CodePen Projects jest to bardzo proste. Zrobiłem plik, który kończy się na .md , który zostanie automatycznie przetworzony na HTML, a następnie umieściłem go w pliku index.njk .
{% block content %} <main class="centered-text-column"> {% include "content/about.html" %} </main> {% endblock %}Budowanie rzeczywistych komponentów
Rozważmy komponenty jako powtarzalne moduły, które zostały przekazane w danych, aby same się utworzyć. W frameworkach, takich jak Vue, będziesz pracować z komponentami pojedynczego pliku, które są wyizolowanymi fragmentami szablonu HTML, CSS o określonym zakresie i JavaScript specyficznym dla komponentu. To super, ale nasza mikrowitryna nie potrzebuje niczego tak wymyślnego.
Musimy stworzyć kilka „kart” opartych na prostym szablonie, abyśmy mogli budować takie rzeczy:
Budowanie powtarzalnego komponentu, takiego jak ten w Nunjucks, wymaga użycia tego, co nazywają makrami. Makra są cudownie proste. Są tak , jakby HTML miał funkcje !
{% macro card(title, content) %} <div class="card"> <h2>{{ title }}</h2> <p>{{ content }}</p> </div> {% endmacro %}Następnie nazywasz to w razie potrzeby:
{{ card('My Module', 'Lorem ipsum whatever.') }}Cały pomysł polega na tym, aby oddzielić dane i znaczniki . Daje nam to pewne jasne i namacalne korzyści:
- Jeśli potrzebujemy dokonać zmiany w HTML, możemy to zmienić w makrze i zostanie to zmienione wszędzie, gdzie używa tego makra.
- Dane nie są zaplątane w znaczniki
- Dane mogą pochodzić z dowolnego miejsca! Kodujemy dane bezpośrednio w wywołaniach makr, tak jak to zrobiliśmy powyżej. Lub możemy odwołać się do niektórych danych JSON i wykonać pętlę nad nimi. Jestem pewien, że możesz nawet wyobrazić sobie konfigurację, w której dane JSON pochodzą z bezgłowego CMS, procesu kompilacji, funkcji bezserwerowej, zadania cron lub czegokolwiek.
Teraz mamy te powtarzalne karty, które łączą dane i znaczniki, dokładnie to, czego potrzebujemy:
Zrób tyle komponentów, ile chcesz
Możesz wziąć ten pomysł i pobiec z nim. Na przykład wyobraź sobie, że Bootstrap jest w istocie zbiorem CSS, którego używasz zgodnie ze wzorcami HTML. Możesz uczynić każdy z tych wzorców makro i wywołać je w razie potrzeby, zasadniczo komponując strukturę.
Jeśli chcesz, możesz zagnieżdżać komponenty, stosując pewien rodzaj filozofii projektowania atomowego. Nunjucks oferuje również logikę, co oznacza, że możesz tworzyć komponenty warunkowe i wariacje, po prostu przekazując różne dane.
W prostej witrynie, którą stworzyłem, stworzyłem inne makro dla sekcji pomysłów na stronie, ponieważ dotyczyło to nieco innych danych i nieco innego projektu karty.
Szybka sprawa przeciwko statycznym witrynom
Mógłbym argumentować, że większość witryn korzysta z architektury opartej na komponentach, ale tylko niektóre witryny nadają się do statyki. Pracuję na wielu stronach, w których posiadanie języków zaplecza jest właściwe i przydatne.
Jedna z moich stron, CSS-Tricks, ma takie rzeczy jak logowanie użytkownika z nieco skomplikowanym systemem uprawnień: fora, komentarze, eCommerce. Chociaż żadna z tych rzeczy nie powstrzymuje całkowicie idei pracy statycznej, często cieszę się, że mam bazę danych i języki zaplecza do pracy. Pomaga mi budować to, czego potrzebuję i trzyma wszystko pod jednym dachem.
Idź naprzód i ogarnij statyczne życie!
Pamiętaj, że jedną z korzyści budowania w sposób, który zrobiliśmy w tym artykule, jest to, że końcowy rezultat to tylko kilka statycznych plików. Łatwy do hostowania, szybki i bezpieczny. Nie musieliśmy jednak rezygnować z pracy w sposób przyjazny dla programistów. Ta witryna będzie łatwa do aktualizowania i dodawania w przyszłości.
- Ostatnim projektem jest mikrowitryna The Power of Serverless dla Front-End Developers (https://thepowerofserverless.info/).
- Hosting plików statycznych, jeśli mnie pytasz, jest częścią ruchu bezserwerowego.
- Możesz zobaczyć cały kod (a nawet rozwidlić kopię dla siebie) bezpośrednio na CodePen. Jest zbudowany, utrzymywany i hostowany w całości w CodePen przy użyciu CodePen Projects.
- CodePen Projects zajmuje się wszystkimi rzeczami z Nunjucks, o których tutaj mówiliśmy, a także takimi rzeczami, jak przetwarzanie Sass i hosting obrazów, z których skorzystałem na stronie. Możesz replikować to samo za pomocą, powiedzmy, procesu kompilacji opartego na Gulp lub Grunt lokalnie. Oto taki szablonowy projekt, który możesz rozkręcić.