Głębokie zanurzenie się w jedenastu statycznych generatorach stron

Ale najpierw — szybko przeanalizujmy, co oznacza „strona statyczna”, a następnie, co zapewnia generator. Witryna statyczna składa się ze statycznej zawartości — na przykład kod HTML, CSS, zasoby i cała zawartość są już skompilowane przed przesłaniem do hosta witryny. Różni się to od dynamicznej witryny, która kompiluje te rzeczy na podstawie zapytań do bazy danych w czasie wykonywania (np. WordPress) lub pobiera zawartość z interfejsów API po stronie klienta (np. frameworki JavaScript bez renderowania po stronie serwera).

Generator witryn statycznych to środowisko i procesor kompilacji do kompilowania treści do statycznego kodu HTML. Zwykle oferują pomocników, którzy zapewniają elastyczność w pisaniu treści (np. Wspierają Markdown) i zawierają metody tworzenia szablonów. Więc zamiast pisać strony HTML jedna po drugiej i kopiować i wklejać powtarzające się części, generator będzie wspierał dzielenie tych rzeczy na komponenty za pomocą określonego języka szablonów. Następnie proces kompilacji generatora połączy wszystko i wygeneruje ostateczny kod HTML, który można przesłać do hosta internetowego, aby służył jako Twoja witryna. W zależności od używanego hosta internetowego ten proces kompilacji może nawet wykonać host.

Dostępnych jest wiele generatorów witryn statycznych. Być może słyszałeś lub nawet używałeś takich jak Jekyll, Hugo, Gatsby, Next i Nuxt. Pełna lista jest dostępna na Jamstack.org.

Co sprawia, że ​​Eleveny różni się od innych generatorów stron statycznych?

Eleveny działa wyjątkowo szybko zarówno podczas kompilacji, jak i w przeglądarce. Dzieje się tak głównie dzięki temu, że nie wymaga ładowania pakietu JavaScript po stronie klienta w celu obsługi treści (w porównaniu z czymś takim jak Gatsby). Renderowanie po stronie serwera nie jest tu nawet problemem, ponieważ tworzenie stron systemu plików domyślnie stanowi statyczny HTML.

To, co naprawdę czyni Eleventy wyjątkowym, to możliwość wyboru i mieszania nawet dziesięciu różnych języków szablonów:

Mieszanie języków może mieć miejsce w tym samym pliku lub między układami. Na przykład często piszę moją główną treść za pomocą Markdown, która zasila układ Nunjucks. W niektórych projektach przydaje się możliwość zapętlenia niektórych danych za pomocą Nunjucks w pliku Markdown. Ta umiejętność łączenia języków jest bardzo potężna i pozwala zaprojektować przepływ pracy pisania i kompilowania, który najlepiej pasuje do Ciebie i Twojego projektu.

Eleveny zawiera flagę --serve , która używa BrowserSync, aby umożliwić lokalną obsługę witryny i ponowne ładowanie na gorąco po zmianach plików. Jest to duża wygoda i warto o niej pamiętać, jeśli nie szukasz statycznego generatora witryn, ale być może uaktualnienia z narzędzi do budowania, takich jak Gulp.

W ramach zerowej konfiguracji wszystkie pliki witryny mogą znajdować się w katalogu głównym projektu. Aby zmienić katalogi wejściowe i wyjściowe, możesz utworzyć konfigurację Eleventy, która ma być plikiem głównym o nazwie .eleventy.js . Oto krótki fragment pokazujący, jak dokonać tej modyfikacji:

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

Jak wspomniano wcześniej, domyślnym zachowaniem jest tworzenie stron systemu plików, co jest generalnie bardzo przydatne, szczególnie w przypadku szybkiego rozpoczęcia pracy. Można to łatwo zmienić, przypisując niestandardowy permalink bezpośredni i można to zrobić dla pliku, dla całego katalogu lub dynamicznie dla zestawu danych. Permalinki oferują również kolejną supermoc, którą za chwilę odkryjemy!

Wyjątkowo, podczas kompilacji, możesz przygotować treść, dane i transformacje tych treści i danych, używając JavaScript i wykorzystując filtry i skróty (omówimy je później). Ponownie, wszystko to dzieje się bez dodawania pakietu JavaScript po stronie klienta, jednocześnie umożliwiając korzystanie z JavaScript jako języka szablonów.

Ważna uwaga : możesz z powodzeniem korzystać z Eleveny bez znajomości języka JavaScript lub z małą znajomością tego języka.

W przeciwieństwie do innych SSG, takich jak Gatsby, lub środowisk, takich jak WordPress, większość witryn Eleventy nie wymaga żadnych wtyczek. Dostępnych jest kilka wtyczek, ale nie są one niezbędne do podstawowej funkcjonalności.

Budując za pomocą Eleventy, możesz dodawać funkcje zgodnie z potrzebami. W rzeczywistości możesz po prostu używać HTML i nigdy nie pracować z żadnym innym językiem szablonów. Jedenaście jest tak złożone, jak wymaga tego Twój projekt!

Zrozumienie podstawowych jedenastu pojęć

Przyjrzyjmy się kilku fragmentom terminologii i pojęć, które pomogą Ci odnieść sukces w tworzeniu projektów Eleveny.

Układy i szablony

Możesz myśleć o tych terminach jako wymiennych, ale w kontekście Jedenastu mają one kontekstowe znaczenie:

• Szablon to ogólny termin dla wszystkich plików treści.
• Układy to specjalne szablony, które otaczają inną zawartość.

Na przykład szablon odnosi się do wszystkich plików Markdown, podczas gdy układ może być plikiem Nunjucks, który zawiera szablon HTML5 i miejsce na treść szablonu. Dowiemy się, jak to działa, w sekcji o rozpoczęciu.

Filtry i skróty

Są to dodatkowe sposoby modyfikowania treści wyjściowych i tworzenia części szablonu wielokrotnego użytku. Są dostępne do użytku z szablonami Nunjucks, Liquid, Handlebars i JavaScript. Filtry i skróty są zdefiniowane w .eleventy.js .

Poza zmiennymi i operatorami dostępnymi w wybranym przez Ciebie języku szablonów, Eleveny ujednolicło koncepcję filtrów we wcześniej wymienionych językach. Filtry przekształcają zawartość w pewien sposób specyficzny dla typu zawartości. Na przykład możesz utworzyć filtr przeznaczony dla ciągów, aby je pisać wielkimi literami. Lub możesz mieć filtr przeznaczony do użycia w tablicach, aby zmienić to, co jest zwracane, na przykład wybierając losowy element. Niektóre filtry są dostarczane przez Eleveny, z których kilka wykorzystamy w samouczku wprowadzającym.

Skróty umożliwiają tworzenie części szablonu wielokrotnego użytku i są w stanie zaakceptować argumenty. Mogą być samodzielne lub sparowane, co oznacza, że ​​otaczają zawartość tagiem początkowym i końcowym.

Jednym z moich ulubionych skrótów jest renderowanie bieżącego roku — co oznacza koniec nieaktualnych lat praw autorskich w stopce! Oto jak utworzyć skrócony kod year :

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

Aby użyć go w szablonie Nunjucks lub Liquid, wygląda to tak: {% year %} .

Możesz przejrzeć dokumenty Eleveny, aby znaleźć przykłady sparowanych krótkich kodów.

Kolekcje

Kolekcje to grupy powiązanej treści, które zazwyczaj tworzy się w Frontmatter, definiując tags . Opcje składni znaczników obejmują pojedyncze ciągi, tablice jednowierszowe — ["tagA", "tagB"] — dla wielokrotności lub listy w stylu YAML do przypisywania wielu znaczników. Na przykład mogę utworzyć kolekcję „pages”, dodając następujący frontmatter do całej zawartości, którą chcę dołączyć do tej kolekcji:

 --- tags: pages ---

Po zdefiniowaniu kolekcji możesz uzyskać do niej dostęp za pomocą wybranego języka szablonów w ramach globalnego obiektu collections . Aby uzyskać dostęp do naszej kolekcji „stron”, wyglądałby jak collections.pages . Zwraca to tablicę danych z tej kolekcji, dzięki czemu można wykonywać operacje tablicowe, takie jak zapętlanie, takie jak tworzenie listy linków lub zwiastunów artykułów. Możesz nawet pominąć normalny plik wyjściowy i używać tylko kolekcji do zarządzania wyświetlaniem danych, co jest przydatne do zarządzania zawartością witryny zawierającej jedną stronę.

Dane niestandardowe

Do tej pory mówiliśmy o tworzeniu treści w postaci plików, ale Eleveny ułatwia również utrzymanie różnych źródeł danych. Nazywa się to „danymi niestandardowymi” i działa jako eksport modułu JavaScript lub pliki JSON w katalogu _data .

Dane niestandardowe mogą być wykorzystywane do:

• Zdefiniuj podstawową tablicę JSON.
• Zwróć wyniki operacji pobierania.
• Pobierz i ponownie sformatuj treść z bezgłowego CMS.

Jedenaście sprawia, że ​​wszystkie dane z _data są dostępne pod zmienną pasującą do nazwy pliku. Na przykład, jeśli utworzę posts.json , mogę uzyskać do niego dostęp w moich szablonach jako posts . Korzystając z Nunjucks, oto przykład pętli nad danymi posts :

 {% for post in posts %} {{ post.title }} {% endfor %}

Paginacja i tworzenie stron z danych

W jedenastu terminach paginacja odnosi się do iteracji zestawu danych i zdefiniowania szablonu dla wyjścia tego „fragmentu” danych. Odbywa się to za pomocą dedykowanego pliku, który definiuje paginację w ramach frontmatter. Plik zawiera również konfigurację zamierzonych danych wyjściowych, co oznacza, że ​​staje się również własnym szablonem. Możemy zdefiniować układ, do którego będzie wysyłana treść, a także dodać tagi, aby utworzyć kolekcję, aby ułatwić odwoływanie się i elastyczność danych wyjściowych.

Uwaga : jeśli używasz niestandardowych danych do pobierania treści z CMS, to paginacja jest jedną z metod, której szukasz, aby dynamicznie przekształcać te dane w strony.

Oto przykład odwoływania się do niestandardowych danych naszych posts , które, jak zakładamy, pobieramy z bezgłowego systemu CMS. Co ważne, size jest ustawiony na 1, co oznacza, że ​​każdy „fragment stronicowania” powinien generować jedną stronę wydruku. Następnie używamy alias do utworzenia odniesienia do bieżącego elementu w pętli stronicowania, a następnie używamy tego odniesienia w definicji permalink i treści szablonu.

Plik definiujący paginację może znajdować się w dowolnym miejscu w katalogu wejściowym. Moją preferencją organizacyjną jest utworzenie katalogu generate , a następnie nazwanie go tak samo, jak kolekcji, którą będzie tworzył. Rozważ następujące to src/generate/posts.njk :

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

W tym przypadku permalink bezpośredni przypisuje stronę do wyjścia bezpośrednio z katalogu głównego witryny. Możesz to zmienić, aby dodać przedrostek, taki jak /posts/{{ post.title | slug }} na przykład /posts/{{ post.title | slug }} .

Dodatkowo, jeśli chcesz, aby wszystkie wygenerowane strony były dostępne w kolekcji utworzonej przez tagi, musisz ustawić addAllPagesToCollections na true aby uwzględnić więcej niż pierwszy element.

Na koniec, jeśli Twoja treść pojawia się jako Markdown zamiast wstępnie skompilowanego kodu HTML, musisz użyć templateEngineOverride . W przykładowym fragmencie ustawiłem go na njk, md co oznacza, że ​​zawartość szablonu będzie musiała zostać przetworzona zarówno jako Nunjucks, aby przekonwertować zmienną, a następnie Markdown, aby skompilować zawartość zwróconą w zmiennej.

Jeśli zastanawiasz się, co oznacza safe , nauczymy się tego dalej!

Jak zacząć z Eleventy?

W porządku, więc jesteś gotowy do rozpoczęcia swojego pierwszego projektu Eleveny! Ten krótki samouczek pomoże Ci przygotować strukturę początkową, z której będziesz mógł kontynuować budowanie. Wykorzystamy koncepcje, o których już się dowiedzieliśmy, i dodamy też kilka nowych pomysłów.

Pierwszą ważną uwagą jest to, że Eleveny jest pakietem z zakresem, więc oto polecenie instalacji:

 npm install @11ty/eleventy

Następnie, wygodnym udogodnieniem, które lubię, jest dodanie następujących skryptów do mojego package.json :

 "scripts": { "start": "eleventy --serve", "build": "eleventy" }

Jak wspomniano wcześniej, flaga --serve włączy serwer lokalny przez BrowserSync.

Preferuję aktualizację katalogów wejściowych/wyjściowych, tak jak już to widzieliśmy, więc teraz nadszedł czas, aby utworzyć trochę zawartości w src lub w wybranym przez ciebie katalogu wejściowym.

Aby nasz projekt od początku był bardziej elastyczny i skalowalny, sugerowałbym stworzenie przynajmniej jednego layoutu zawierającego boilerplate HTML5. Układy muszą być zdefiniowane w bezpośrednio nazwanym _includes , który jest jednym z kilku oczekiwanych katalogów.

Konwencją często spotykaną wśród początkujących jest nazywanie tego układu base . Wolę, aby był to plik Nunjucks.

Oto przykładowy base.njk :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

Podwójne nawiasy klamrowe to składnia Nunjucks dla zmiennych. Tutaj przygotowaliśmy się na nadchodzącą zmienną title , która wkrótce zostanie dostarczona przez front Matter. Zmienna content jest dostarczana przez Eleveny i oznacza miejsce, w którym powinna znaleźć się cała przychodząca treść nie-frontowa. Co ważne, jest to używane w połączeniu z dostarczonym safe filtrem, który zapobiega unikaniu i renderowaniu skompilowanego kodu HTML.

Teraz nadszedł czas na utworzenie naszego indeksu witryny, który dodamy jako index.md :

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

Zauważ, że w przedniej materii dodaliśmy nasz tytuł, a także zdefiniowaliśmy układ.

W tym momencie możemy uruchomić nasz projekt z dodanym przez nas skryptem: npm start . Spowoduje to, że BrowserSync skonfiguruje localhost:8080 (jeśli jest dostępny), ale będziesz musiał ręcznie otworzyć go w przeglądarce. Sprawdź tę krótką wskazówkę, jeśli chcesz, aby przeglądarka otwierała się automatycznie.

Ostatnim krytycznym krokiem jest dodanie arkusza stylów. Obecnie CSS nie jest rozpoznawany jako automatycznie dołączany typ pliku, więc po utworzeniu arkusza stylów będziemy mieli jeden dodatkowy krok konfiguracyjny.

Możesz dodać plik CSS w dowolnym miejscu w katalogu wejściowym, takim jak css/style.css . Następnie otwórz .eleventy.js (lub utwórz go w katalogu głównym projektu, jeśli nie dostosowałeś wejścia/wyjścia) i dodaj:

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

Najpierw dodajemy katalog css jako „kopię przekazującą”, co oznacza, że ​​Eleveny powinno uwzględnić go w wypychaniu do katalogu wyjściowego. Następnie dodajemy go również jako „cel obserwacji”, aby po wprowadzeniu zmian w naszych stylach podczas start polecenia start Eleveny uruchomiło przebudowę, aby zaktualizować naszą lokalną witrynę.

Na koniec musimy pamiętać, aby dodać link do naszego arkusza stylów w naszym base układzie:

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

Kiedy definiujemy lokalizację arkusza stylów, przekazujemy go przez filtr url Eleveny, który dostosuje względną ścieżkę pliku zgodnie z potrzebami podczas kompilacji.

Następnie utwórzmy typ postu „strony”, aby nieco więcej eksplorować przy użyciu kolekcji i układów. Aby to zrobić, dodaj katalog pages i utwórz jeden lub dwa pliki Markdown, w tym klucz front-matter title , ale nie układ.

Tym razem użyjemy nieco innej metody do zdefiniowania układu — plik katalogu danych . Ten plik jest ogólnie sformatowany jako JSON i umożliwia nam dodawanie danych, które należy zastosować do wszystkich plików w katalogu, co zapobiega konieczności duplikowania go w różnych plikach. Plik musi mieć taką samą nazwę jak katalog, w którym będzie używany, więc utwórz plik pages.json i dodaj następującą zawartość:

 { "layout": "page.njk", "tags": "pages" }

Poszliśmy również naprzód i zdefiniowaliśmy tagi w celu stworzenia kolekcji „strony”. Ale zdefiniowany przez nas układ jeszcze nie istnieje, więc utwórz _includes/page.njk i dodaj:

 --- layout: base.njk --- <article> {{ content | safe }} </article>

Tutaj używamy koncepcji Eleventy tworzenia łańcuchów układów , aby móc ponownie użyć naszego szablonu base , ale także dodać unikalny element do układu naszej page , którym jest <article> . Oznacza to, że cała zawartość naszych stron będzie wykorzystywała zarówno układ page , jak i układ base .

Łączenie układów ogranicza powielanie, umożliwiając ponowne wykorzystanie szablonów i podstawowych struktur układu witryny.

Teraz, gdy utworzyliśmy zawartość dla typu zawartości pages i zdefiniowaliśmy ją jako kolekcję „pages” za pomocą tagów, zobaczmy, jak możemy uzyskać dostęp do tej kolekcji. Tutaj użyjemy Nunjucks, aby zapętlić kolekcję i wyświetlić listę linków do każdej strony. Ta pętla zostanie dodana w naszym pliku index.md .

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

Zrobiliśmy jednak coś wyjątkowego, a mianowicie, że wnętrze pętli faktycznie przełącza się z powrotem do Markdown, aby renderować łącza. Nie jest to wymagany sposób obsługi tego scenariusza, ale może być bardzo przydatny! Czasami, w zależności od złożoności, może to nie działać. Prawdziwym powodem jest to, że renderer Markdown domyślnie używa języka szablonów Liquid , więc jeśli używasz funkcji Nunjucks poza podstawowymi pętlami, będziesz musiał poinformować Eleveny, jak przetworzyć plik.

We wcześniejszej części poświęconej paginacji przyjrzeliśmy się już rozwiązaniu tego problemu. I to jest wykorzystanie templateEngineOverride do wskazania, że ​​plik powinien być przetwarzany zarówno jako Nunjucks, jak i Markdown. W przedniej części szablonu należy umieścić następujące pełne rozwiązanie: templateEngineOverride: njk, md .

W tym momencie stworzyłeś podstawową wielostronicową witrynę! Jeśli potrzebujesz skorzystać z danych zewnętrznych, wróć do sekcji poświęconej paginacji.

Inne sposoby na rozpoczęcie projektu Jedenaście

Podczas gdy niektóre inne statyczne generatory witryn i środowiska, takie jak WordPress, wykorzystują koncepcję „motywów”, Eleveny używa terminu „starter”. Istnieje rosnąca kolekcja do wyboru, a wiele z nich można znaleźć na liście w jedenastu dokumentach.

Preferuję używanie Sassa z moimi projektami Eleveny i mam dostępny starter Sassa, jeśli chcesz zobaczyć, jak dodać go do swojego procesu budowania. Inni mogą zdecydować się na dodanie Gulp, jeśli są przyzwyczajeni do tego potoku kompilacji dla zasobów i przetwarzania.

Stworzyłem również minimalny starter, który zawiera funkcje omówione w tym artykule i dzieli podobieństwa z wynikiem samouczka. Zawiera również mały przykład pobierania danych zewnętrznych i pokazuje, jak dodać częściową nawigację w witrynie na podstawie kolekcji.

Rozwijanie podstaw

Po eksperymentowaniu z tworzeniem pierwszej witryny z podstawową zawartością i być może z danymi niestandardowymi warto poznać dodatkowe sposoby pracy z tą zawartością. Oto krótki przegląd kilku innych pojęć, o których należy pamiętać.

Zmiana typu pliku wyjściowego za pomocą permalinków

Wspomniałem wcześniej, że permalinki mają supermoc. A to oznacza, że ​​możesz ich użyć do wyprowadzania typów plików innych niż HTML.

Dwa przydatne przykłady to tworzenie kanału RSS i mapy witryny, które zwykle są plikami XML. Naprawdę potężne jest to, że możesz nadal używać wybranego języka szablonów, aby pomóc w generowaniu tych plików, dzięki czemu możesz na przykład zapętlić dane strony za pomocą Nunjucks, aby na przykład utrzymać świeży kanał RSS.

Dostosowywanie kolekcji

Czasami użycie tagów do tworzenia kolekcji może nie wystarczyć. Możesz też utworzyć filtrowane odmiany istniejącej kolekcji. Możemy zmieniać lub tworzyć kolekcje, korzystając z szeregu dostarczonych funkcji. Będą one znajdować się w pliku konfiguracyjnym .eleventy.js .

W tym przykładzie używamy funkcji addCollection do filtrowania elementów w istniejącej kolekcji. Nowa kolekcja będzie opierać się na istnieniu customKey w przedniej materii. Ten klucz jest zwracany z obiektu data , który jest dołączony do całej wygenerowanej zawartości Eleveny.

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

Możesz przejrzeć inne sposoby tworzenia, modyfikowania i używania kolekcji w dokumentacji Eleventy.

Praca z kaskadą danych

Jedenaście ma pełniejszą koncepcję tego, jak dane są kompilowane dla szablonu zwanego kaskadą danych , który dopiero zaczęliśmy zgłębiać w tym przewodniku. W pełni wykorzystasz Eleveny, jeśli przejrzysz, jak to działa, zaczynając od dokumentacji. Ben Myers ma również doskonały przewodnik po zrozumieniu kaskady danych.

Polecane jedenaście wtyczek

We wstępie krótko wspomniałem, że dostępne są wtyczki, ale nie zawsze są one potrzebne. Jest jednak kilka, których używam w większości projektów, w tym:

• @11ty/eleventy-plugin-rss Jeśli chcesz mieć kanał RSS, ta oficjalna wtyczka zapewnia kilka filtrów, które pomogą ci wygenerować kanał. Połączone repozytorium zawiera przykładowy plik danych, który możesz również znaleźć w niektórych starterach.
• @11ty/eleventy-plugin-syntaxhighlight Zamiast ładowania Prism jako skryptu do podświetlania kodu, ta wtyczka umożliwia zastosowanie tego przetwarzania jako części procesu budowania Eleveny. Oznacza to, że bloki kodu są przekształcane w celu uwzględnienia klas do zastosowania motywu Prism z wyprzedzeniem, więc wystarczy dodać wybrany motyw CSS Prism.
• @11tyrocks/eleventy-plugin-social-images Cechą, której szukałem na początku moich poszukiwań w Eleveny, była możliwość generowania obrazów udostępnianych w mediach społecznościowych. To skłoniło mnie do stworzenia wtyczki, która używa Puppeteer za kulisami do zrobienia migawki. Wtyczka zawiera gotowe szablony, a także opcje konfiguracji do zdefiniowania własnego pliku szablonu.

Polecam również zapoznanie się z resztą oficjalnych wtyczek Eleveny, ponieważ odpowiadają one na inne powszechne potrzeby, w tym nawigację i obsługę obrazów.

Decydowanie, czy jedenaście jest odpowiednie dla twojego projektu

Jedenaście, podobnie jak większość statycznych witryn, najlepiej sprawdza się w przypadku treści, które zazwyczaj nie muszą być udostępniane dynamicznie ani na żądanie. Nie oznacza to, że cała witryna musi być statyczna lub że nie ma sposobów, aby zawartość była dynamiczna. Nadal możesz ładować JavaScript, aby włączyć zawartość dynamiczną, taką jak pobieranie z interfejsów API lub tworzenie interaktywnych widżetów. Możesz również skorzystać z usług takich jak IFTTT lub Zapier, aby ułatwić odbudowę witryny, jeśli Twój host obsługuje tworzenie webhooków i masz części, które chcesz odświeżyć zgodnie z harmonogramem.

Dzięki niestandardowym danym i paginacji zauważyliśmy, że łatwo jest uwzględnić dane zewnętrzne, takie jak z bezgłowego CMS lub dowolnego innego interfejsu API. Więc chociaż będzie obsługiwany statycznie, nadal masz dużą elastyczność w tym, gdzie pobierasz treści i jak nimi zarządzasz.

Moją ulubioną rzeczą w Eleventy jest to, że nie narzuca wielu opinii na temat tego, jak powinienem ustrukturyzować swoją witrynę, poza kilkoma oczekiwanymi katalogami, o których mówiliśmy dla _includes i _data (możesz też zaktualizować ich konwencję nazewnictwa). Może to być również przydatne, jeśli chcesz przeprowadzić migrację witryny i mieć możliwość przeniesienia części istniejącej struktury plików. Jeśli jednak wolisz bardziej upartą architekturę, możesz poszukać innej opcji.

Podoba mi się również to, jak mogę uformować Eleveny, aby dopasować mój model mentalny do danego projektu, wykorzystując wiele języków szablonów, a także filtry, skróty i układy. Startery pomagają również wzmocnić, dzięki czemu możesz skupić się na tym, co naprawdę ważne: na treściach. Ogromną zaletą jest również wysoka wydajność czysto statycznej mocy wyjściowej.

Jeśli potrzebujesz nieco więcej w procesie budowania, możesz dodać inne znane narzędzia, takie jak Webpack, Gulp lub Parcel. Być może uda Ci się znaleźć starter, który już zawiera te rzeczy. Pamiętaj, że możesz również wykorzystać skrypty Node, które są już nieodłączne w procesie budowania Eleveny.

Eleveny bardzo dobrze radzi sobie z generowaniem dużej liczby stron. Był używany w niektórych dużych i złożonych witrynach, takich jak web.dev firmy Google i witryna marketingowa Netlify. Używałem również Eleveny do pewnych niekonwencjonalnych celów, takich jak generatory poczty e-mail i stron internetowych, a także kilka innych, które zostały opisane w tym przeglądzie.

Dodatkowe zasoby

Mam nadzieję, że ten przewodnik zarówno wzbudził Twoje zainteresowanie, jak i przygotował Cię do rozpoczęcia korzystania z Eleveny! Zawierał wiele punktów, które okazały się nieco trudne do odkrycia, kiedy tworzyłem z nim swój pierwszy projekt. Odkąd po raz pierwszy znalazłem Eleveny w kwietniu 2020 r., zbudowałem ponad 20 projektów Eleveny, w tym startery, wtyczki, projekty poboczne i materiały szkoleniowe. Wiele z nich można znaleźć na mojej stronie 11ty.Rocks, która zawiera również tutoriale i porady. Jedenaście to coś, o czym bardzo lubię dyskutować, więc zachęcam do kontaktu na Twitterze!

Poniżej znajduje się więcej zasobów, które pomogą Ci w Twojej podróży do nauki i jak najlepszego wykorzystania Eleveny:

• Andy Bell oferuje bardzo obszerny płatny kurs — „Ucz się jedenastu od podstaw”.
• Seria samouczków Tatiany Mac, zaczynająca się od „Przewodnika dla początkujących po Eleveny”, zawiera szczegółowe wyjaśnienia, które zakładają brak wcześniejszych doświadczeń z generatorami stron statycznych.
• Bryan Robinson oferuje kurs YouTube dotyczący konwersji bezpłatnego motywu HTML do witryny Eleveny.

Na koniec chcę zauważyć, że społeczność Eleveny jest mała, ale aktywna! Jeśli kiedykolwiek będziesz mieć trudności ze znalezieniem jakichś informacji, możesz tweetować swoje pytanie na oficjalne konto @eleven_ty. Twórca Eleveny, Zach Leatherman, szybko odpowie na pytania RT, aby pomóc Ci wrócić na drogę!