O scufundare adâncă în generatorul de site static Eleventy

Dar mai întâi - să revizuim rapid ce înseamnă un „site static” și apoi ce oferă un generator. Un site static este compus din conținut static - ca în HTML, CSS, activele și tot conținutul sunt deja compilate împreună înainte de a fi trimise la o gazdă a site-ului web. Acest lucru este diferit de un site dinamic care compilează acele lucruri din interogarea unei baze de date în timpul rulării (cum ar fi WordPress) sau care extrage conținut din partea clientului API-urilor (cum ar fi cadrele JavaScript fără randare pe partea serverului).

Un generator de site static este un mediu și un procesor de compilare pentru a compila conținutul dvs. în HTML static. De obicei, oferă asistență pentru a oferi flexibilitate în scrierea conținutului dvs. (cum ar fi sprijinirea Markdown) și includ metode de șabloane. Deci, în loc să scrieți pagini HTML una câte una și să trebuiască să copiați și să lipiți părțile repetate, un generator va sprijini împărțirea acestor lucruri în componente printr-un anumit limbaj de șabloane. Apoi, procesul de construire al generatorului va aduce totul împreună și va scoate HTML-ul final care poate fi încărcat pe o gazdă web pentru a fi servit ca site web. În funcție de gazda web pe care o utilizați, acest proces de construire poate fi efectuat chiar de gazdă.

Există multe generatoare de site statice disponibile. Poate că ați auzit sau chiar ați folosit unele ca Jekyll, Hugo, Gatsby, Next și Nuxt. O listă cuprinzătoare este furnizată de Jamstack.org.

Ce face Eleventy diferit de alte generatoare statice de site?

Eleventy este excepțional de rapid atât în ​​timpul build-urilor, cât și în browser. Acest lucru se datorează în mare parte faptului că nu este necesară încărcarea unui pachet JavaScript la nivelul clientului pentru a difuza conținut (comparativ cu ceva de genul Gatsby). Redarea pe server nu este nici măcar o problemă aici, deoarece crearea paginii sistemului de fișiere este implicit HTML static.

Ceea ce face cu adevărat unic pe Eleventy este abilitatea de a selecta și de a amesteca până la zece limbi diferite de șabloane:

Intermixarea limbilor se poate întâmpla în același fișier sau între machete. De exemplu, îmi scriu adesea conținutul principal cu Markdown, care se alimentează într-un aspect Nunjucks. În unele proiecte, mi s-a părut util să pot parcurge unele date folosind Nunjucks în fișierul Markdown. Această capacitate de a combina limbi este foarte puternică și vă permite să proiectați un flux de lucru de scriere și creare care funcționează cel mai bine pentru dvs. și proiectul dvs.

Eleventy include un semnalizator --serve care utilizează BrowserSync pentru a permite difuzarea site-ului local și cu reîncărcare la cald la modificările fișierului. Aceasta este o comoditate excelentă și este bine de reținut dacă nu căutați un generator de site static, ci poate o actualizare de la instrumente de compilare precum Gulp.

Ca parte a configurării zero, toate fișierele site-ului dvs. ar putea locui în rădăcina proiectului. Pentru a modifica directoarele de intrare și de ieșire, puteți crea o configurație Eleventy, care se așteaptă să fie un fișier rădăcină numit .eleventy.js . Iată un fragment rapid care arată cum să faceți această modificare:

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

După cum sa menționat mai devreme, comportamentul implicit este crearea paginilor sistemului de fișiere, care este în general de mare beneficiu, mai ales pentru începerea rapidă. Acest lucru este ușor de suprascris prin alocarea unui permalink personalizat și care se poate face pe fișier, pentru un întreg director sau dinamic pentru un set de date. Permalink-urile oferă și o altă superputere pe care o vom explora în curând!

În mod unic, în timpul construcției, puteți pregăti conținut, date și transformări pe acel conținut și date utilizând JavaScript și utilizând filtre și coduri scurte (vom vorbi despre acestea mai târziu). Din nou, toate acestea se întâmplă fără a adăuga un pachet JavaScript la nivelul clientului, permițând totodată utilizarea JavaScript ca limbaj de șabloane.

Notă importantă : Puteți utiliza cu succes Eleventy fără cunoștințe JavaScript sau fără cunoștințe JavaScript.

Spre deosebire de alte SSG-uri precum Gatsby sau medii precum WordPress, majoritatea site-urilor Eleventy nu necesită pluginuri. Există unele pluginuri disponibile, dar nu sunt necesare pentru funcționalitatea esențială.

Când construiți cu Eleventy, puteți adăuga funcții după cum aveți nevoie de ele. De fapt, puteți folosi HTML și nu lucra niciodată cu niciunul dintre celelalte limbaje de șabloane. Eleventy este atât de complex cât necesită proiectul tău!

Înțelegerea conceptelor esențiale din Eleventy

Să trecem peste câteva fragmente de terminologie și concepte care vă vor ajuta să aveți succes în crearea proiectelor voastre Eleventy.

Aspecte și șabloane

Puteți crede că acești termeni sunt interschimbabili, dar în contextul lui Eleventy, ei au semnificații contextuale:

• Șablon este termenul generic pentru toate fișierele de conținut.
• Aspectele sunt șabloane speciale care înglobează alt conținut.

De exemplu, șablonul se referă la toate fișierele dvs. Markdown, în timp ce un aspect ar putea fi un fișier Nunjucks care conține standardul HTML5 și un slot pentru conținutul șablonului. Vom învăța cum să facem acest lucru în secțiunea despre început.

Filtre și coduri scurte

Acestea sunt modalități suplimentare de modificare a conținutului și de a crea părți de șablon reutilizabile. Sunt disponibile pentru utilizare cu Nunjucks, Liquid, Ghidon și șabloane JavaScript. Filtrele și codurile scurte sunt definite în .eleventy.js .

Dincolo de variabilele și operatorii disponibili în limba de șablon aleasă, Eleventy a unificat conceptul de filtre în limbile enumerate anterior. Filtrele transformă conținutul într-un fel specific tipului de conținut. De exemplu, puteți crea un filtru destinat șirurilor de caractere pentru a le majuscule. Sau s-ar putea să aveți un filtru destinat să fie utilizat pe matrice pentru a modifica ceea ce este returnat, cum ar fi alegerea unui element aleatoriu. Unele filtre sunt furnizate de Eleventy, dintre care câteva le vom folosi în tutorialul de pornire.

Shortcode-urile permit crearea de părți de șablon reutilizabile și sunt capabile să accepte argumente. Ele pot fi fie independente, fie asociate, ceea ce înseamnă că încapsulează conținutul cu o etichetă de început și de sfârșit.

Unul dintre codurile mele scurte preferate este să redați anul curent - adică nu mai mulți ani de drepturi de autor învechiți în subsolul dvs.! Iată cum să creați un cod scurt pentru un year :

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

Pentru a-l folosi într-un șablon Nunjucks sau Liquid arată astfel: {% year %} .

Puteți consulta documentele Eleventy pentru exemple de coduri scurte asociate.

Colecții

Colecțiile sunt grupuri de conținut similar și sunt create de obicei în frontmatter prin definirea tags . Opțiunile de sintaxă a etichetelor includ șiruri individuale, matrice cu o singură linie — ["tagA", "tagB"] — pentru mai multe sau liste în stil YAML pentru a atribui mai multe etichete. De exemplu, pot crea o colecție de „pagini” adăugând următorul subiect principal la tot conținutul pe care doresc să fie inclus în acea colecție:

 --- tags: pages ---

Odată ce ați definit o colecție, o puteți accesa prin limbajul de șablon ales din obiectul collections globale. Pentru a accesa colecția noastră „pagini” ar arăta ca collections.pages . Aceasta returnează o matrice a datelor acelei colecții și, astfel, puteți efectua operațiuni de matrice, cum ar fi trecerea în buclă peste ea, cum ar fi pentru a produce o listă de link-uri sau carduri teaser pentru articole. Puteți chiar să suprimați fișierele normale și să utilizați numai colecții pentru a gestiona afișarea datelor, ceea ce este util pentru gestionarea conținutului site-ului cu o singură pagină.

Date personalizate

Până acum am vorbit despre crearea de conținut sub formă de fișiere, dar Eleventy facilitează, de asemenea, întreținerea diferitelor surse de date. Acestea se numesc „date personalizate” și trăiesc ca modulul JavaScript exportă sau fișiere JSON în directorul _data .

Datele personalizate pot fi folosite pentru:

• Definiți o matrice JSON de bază.
• Returnează rezultatele unei operații de preluare.
• Preluați și reformatați conținut dintr-un CMS fără cap.

Eleventy face ca toate datele din _data disponibile sub o variabilă care se potrivește cu numele fișierului. De exemplu, dacă creez posts.json , atunci îl pot accesa în șabloanele mele ca posts . Folosind Nunjucks, iată un exemplu de buclă peste datele posts :

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

Paginarea și crearea de pagini din date

În Eleventy termeni, paginarea se referă la iterarea peste un set de date și definirea unui șablon pentru ieșirea acelei „bucăți” de date. Acest lucru se face cu un fișier dedicat care definește paginarea în frontmatter. Fișierul include, de asemenea, configurarea rezultatului dorit pentru date, ceea ce înseamnă că devine și propriul șablon. Putem defini un aspect la care trimite conținutul și, de asemenea, putem adăuga etichete pentru a crea o colecție pentru ușurință de referință și flexibilitate pentru ieșire.

Notă : dacă utilizați date personalizate pentru a prelua conținut dintr-un CMS, atunci paginarea este metoda Eleventy pe care o căutați pentru a transforma acele date în pagini în mod dinamic.

Iată un exemplu de referință a datelor personalizate ale posts noastre pe care vom presupune că le recuperăm printr-o preluare dintr-un CMS fără cap. Important, size este setată la 1, ceea ce înseamnă că fiecare „buncă de paginare” ar trebui să producă o singură pagină de ieșire. Apoi folosim alias -ul pentru a crea o referință la elementul curent în bucla de paginare și apoi folosim acea referință în definiția permalink și corpul șablonului.

Fișierul care definește paginarea poate locui oriunde doriți în directorul de intrare. Preferința mea organizațională este să creez un director de generate și apoi să îl numesc la fel ca colecția pe care o va crea. Luați în considerare următoarele a fi 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 }}

În acest caz, permalink -ul atribuie paginii să fie scoasă direct din rădăcina site-ului. Puteți modifica acest lucru pentru a adăuga un prefix, cum ar fi /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} , de exemplu.

În plus, dacă doriți ca toate paginile generate să fie disponibile în colecția creată de etichete, trebuie să setați addAllPagesToCollections la true pentru a include mai mult decât primul element.

În cele din urmă, dacă conținutul dvs. vine ca Markdown în loc de HTML pre-compilat, va trebui să utilizați templateEngineOverride . În fragmentul de exemplu, l-am setat la njk, md ceea ce înseamnă că conținutul șablonului va trebui procesat atât ca Nunjucks pentru a converti variabila, cât și apoi Markdown pentru a compila conținutul returnat în variabilă.

Dacă vă întrebați ce înseamnă safe , vom afla asta în continuare!

Cum să începeți cu Eleventy

Bine, așa că ești gata să pornești cu primul tău proiect Eleventy! Acest scurt tutorial vă va ajuta să obțineți o structură de pornire din care să continuați construirea. Vom folosi conceptele despre care am învățat deja și vom adăuga și câteva idei noi.

Prima notă importantă aici este că Eleventy este un pachet cu scop, deci iată comanda de instalare:

 npm install @11ty/eleventy

În continuare, o comoditate utilă pe care îmi place să o fac este să adaug următoarele scripturi în package.json meu:

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

După cum sa menționat anterior, --serve va activa un server local prin BrowserSync.

Preferința mea este să actualizez directoarele de intrare/ieșire așa cum ne-am uitat deja, așa că acum este timpul să creez conținut în src sau în directorul de intrare pe care îl alegeți.

Pentru a ne pregăti proiectul să fie mai flexibil și mai scalabil de la început, aș sugera să creați cel puțin un aspect care să conțină standardul HTML5. Aspectele trebuie să fie definite într-un _includes numit direct, care este unul dintre puținele directoare așteptate.

O convenție pe care o veți găsi adesea printre începători este de a numi această base aspect . Am o preferință pentru a-l face un fișier Nunjucks.

Iată un exemplu de 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>

Acoladele duble sunt sintaxa Nunjucks pentru variabile. Aici, ne-am pregătit pentru o variabilă de title care va fi furnizată în curând prin intermediul materialului frontal. Variabila de content este furnizată de Eleventy și marchează spațiul în care ar trebui să meargă tot conținutul care nu este de față. Important este că acest lucru este utilizat împreună cu filtrul safe furnizat, care împiedică scăparea HTML compilat în comparație cu randarea.

Acum este timpul să ne creăm indexul site-ului, pe care îl vom adăuga ca index.md :

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

Observați că în primul rând am adăugat titlul nostru și am definit, de asemenea, aspectul.

În acest moment, putem rula proiectul nostru cu scriptul pe care l-am adăugat: npm start . Acest lucru va declanșa BrowserSync să configureze localhost:8080 (dacă este disponibil), dar va trebui să îl deschideți manual în browser. Consultați acest sfat rapid dacă doriți ca browserul să deschidă automat.

Ultimul pas critic este adăugarea unei foi de stil. În prezent, CSS nu este recunoscut ca tip de fișier inclus automat, așa că vom avea un pas suplimentar de configurare după ce ne creăm foaia de stil.

Puteți adăuga un fișier CSS oriunde doriți în directorul de intrare, cum ar fi css/style.css . Apoi, deschideți .eleventy.js (sau creați-l în rădăcina proiectului dacă nu ați făcut personalizarea de intrare/ieșire) și adăugați următoarele:

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

Mai întâi, adăugăm directorul css ca „copie de trecere”, ceea ce înseamnă că Eleventy ar trebui să-l includă în directorul de ieșire. Apoi îl adăugăm și ca „țintă de urmărire”, astfel încât, pe măsură ce facem modificări stilurilor noastre în timp ce rulăm comanda de start , Eleventy va declanșa o reconstrucție pentru a actualiza site-ul nostru local.

În cele din urmă, trebuie să ne amintim să adăugăm linkul la foaia noastră de stil în aspectul nostru base :

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

Când definim locația foii de stil, o trecem prin filtrul url al lui Eleventy, care va ajusta calea relativă a fișierului după cum este necesar la construcție.

În continuare, să creăm un tip de postare „pagini” pentru a explora folosind colecțiile și machetele un pic mai mult. Pentru a face acest lucru, adăugați directorul de pages și creați unul sau două fișiere Markdown, inclusiv o cheie pentru title , dar nu un aspect.

Vom folosi o metodă ușor diferită pentru a defini aspectul de data aceasta - un fișier director de date . Acest fișier este, în general, formatat ca JSON și ne permite să adăugăm date care ar trebui să fie aplicate tuturor fișierelor dintr-un director, ceea ce împiedică dublarea acestuia între fișiere. Fișierul trebuie să fie numit la fel ca directorul pentru care va fi folosit, așa că creați fișierul pages.json și adăugați următorul conținut:

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

De asemenea, am continuat și am definit etichete pentru a crea colecția „pagini”. Dar aspectul definit de noi nu există încă, așa că creați _includes/page.njk și adăugați următoarele:

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

Aici folosim conceptul Eleventy de înlănțuire a aspectului pentru a putea reutiliza șablonul nostru base , dar și pentru a adăuga un element unic pentru aspectul page noastre, care este <article> . Aceasta înseamnă că tot conținutul paginilor noastre va folosi atât aspectul page , cât și aspectul de base .

Înlănțuirea layout-ului reduce dublarea permițând reutilizarea boilerplatelor și a structurilor de bază ale amplasamentului.

Acum că am creat conținut pentru tipul de conținut al pages și l-am definit ca colecție „pagini” prin intermediul etichetelor, să vedem cum putem accesa acea colecție. Aici, vom folosi Nunjucks pentru a trece peste colecție și a scoate o listă de link-uri către fiecare pagină. Această buclă va fi adăugată în fișierul nostru index.md .

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

Totuși, am făcut ceva unic și anume că interiorul buclei trece de fapt înapoi la Markdown pentru a reda link-urile. Aceasta nu este o modalitate obligatorie de a gestiona acest scenariu, dar poate fi foarte util! Uneori, în funcție de complexitate, acest lucru poate să nu funcționeze. Adevăratul motiv este că redarea Markdown folosește implicit limbajul de șabloane Liquid , așa că dacă utilizați funcții Nunjucks dincolo de buclele de bază, va trebui să-i spuneți lui Eleventy cum să proceseze fișierul.

În secțiunea anterioară despre paginare, ne-am uitat deja la soluția pentru aceasta. Și asta pentru a folosi templateEngineOverride pentru a indica faptul că fișierul ar trebui procesat atât ca Nunjucks, cât și ca Markdown. Următoarea soluție completă ar trebui plasată în partea de față a șablonului: templateEngineOverride: njk, md .

În acest moment, ați creat un site de bază cu mai multe pagini! Dacă aveți nevoie să utilizați date externe, săriți înapoi la secțiunea privind paginarea.

Alte moduri de a începe un proiect Eleventy

În timp ce alți generatori de site-uri statice și medii precum WordPress au conceptul de „teme”, Eleventy folosește termenul „starter”. Există o colecție în creștere din care să alegeți și multe pot fi găsite în lista din documentele Eleventy.

Preferința mea este să folosesc Sass cu proiectele mele Eleventy și am un starter Sass disponibil dacă doriți să vedeți cum să îl adăugați în procesul de construire. Alții pot alege să adauge în Gulp dacă sunt obișnuiți cu acea conductă de construcție pentru active și procesare.

De asemenea, am creat un starter minimal care include caracteristicile discutate în acest articol și împărtășește asemănări cu rezultatul tutorialului. Are, de asemenea, un mic exemplu de preluare a datelor externe și arată cum să adăugați o parțială pentru a afișa navigarea pe site bazată pe o colecție.

Extinderea elementelor de bază

După ce ați experimentat crearea primului site cu conținut de bază și poate date personalizate, este util să cunoașteți modalități suplimentare de a lucra cu acel conținut. Iată o scurtă prezentare generală a altor concepte de care trebuie să fii conștient.

Modificarea tipului de ieșire a fișierului cu permalink-uri

Am menționat mai devreme că permalink-urile au o superputere. Și asta este că le puteți folosi pentru a scoate tipuri de fișiere non-HTML.

Două exemple utile sunt crearea unui flux RSS și a unei hărți de site, ambele fiind de obicei fișiere XML. Ceea ce este cu adevărat puternic este că puteți continua să utilizați limbajul de șabloane la alegere pentru a ajuta la generarea acelor fișiere, astfel încât să puteți parcurge datele paginii cu Nunjucks pentru a menține actualul flux RSS, de exemplu.

Personalizarea colecțiilor

Uneori, utilizarea etichetelor pentru a crea colecții poate să nu fie suficientă. Sau poate doriți să creați variante filtrate ale unei colecții existente. Putem modifica sau crea colecții folosind o serie de funcții furnizate. Acestea vor locui în fișierul de configurare .eleventy.js .

În acest exemplu, folosim funcția addCollection pentru a filtra elementele dintr-o colecție existentă. Noua colecție se va baza pe existența customKey în materie de front. Această cheie este returnată din obiectul de data care este atașat întregului conținut generat de Eleventy.

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

Puteți examina alte modalități de a crea, modifica și utiliza colecții în documentele Eleventy.

Lucrul cu cascada de date

Eleventy are un concept mai complet despre cum sunt compilate datele pentru un șablon numit cascada de date , pe care abia am început să-l explorăm în acest ghid. Veți profita la maximum de Eleventy dacă analizați cum funcționează, începând din documente. Ben Myers are, de asemenea, un ghid excelent pentru înțelegerea cascadei de date.

Eleventy Plugin-uri recomandate

În introducere, am menționat pe scurt că există pluginuri disponibile, dar că nu sunt întotdeauna necesare. Cu toate acestea, există câteva pe care tind să le folosesc în majoritatea proiectelor, care includ:

• @11ty/eleventy-plugin-rss Dacă doriți să aveți un flux RSS, acest plugin oficial oferă câteva filtre pentru a vă ajuta să generați fluxul. Repo-ul legat include un eșantion de feed, pe care îl puteți găsi, de asemenea, în uz în cadrul unor inițiatori.
• @11ty/eleventy-plugin-syntaxhighlight În loc să încarce Prism ca script pentru evidențierea codului, acest plugin permite ca procesarea respectivă să fie aplicată ca parte a procesului de construire Eleventy. Aceasta înseamnă că blocurile de cod sunt transformate pentru a include clasele pentru aplicarea unei teme Prism în avans, așa că va trebui doar să adăugați o temă CSS Prism la alegere.
• @11tyrocks/eleventy-plugin-social-images O caracteristică pe care am căutat-o ​​la începutul explorării mele din Eleventy a fost capacitatea de a genera imagini de distribuire a rețelelor sociale. Acest lucru m-a determinat să creez un plugin care folosește Puppeteer în culise pentru a face instantaneul. Pluginul vine cu șabloane prefabricate, precum și opțiuni de configurare pentru a defini propriul fișier șablon.

De asemenea, aș recomanda să vă familiarizați cu restul pluginurilor oficiale Eleventy, deoarece acestea abordează alte nevoi comune, inclusiv navigarea și gestionarea imaginilor.

Decizi dacă Eleventy este potrivit pentru proiectul tău

Eleventy, la fel ca majoritatea site-urilor statice, este cel mai bun pentru conținutul care de obicei nu trebuie să fie difuzat dinamic sau la cerere. Acest lucru nu înseamnă că tot site-ul trebuie să fie static sau că nu există modalități de a face conținutul dinamic. Puteți încărca în continuare JavaScript pentru a activa conținut dinamic, cum ar fi preluarea din API-uri sau crearea de widget-uri interactive. De asemenea, puteți utiliza servicii precum IFTTT sau Zapier pentru a facilita reconstruirea site-ului dvs. dacă gazda dvs. acceptă crearea de webhook-uri și aveți părți pe care doriți să le reîmprospătați într-un program.

Datorită datelor personalizate și paginației, am văzut că este ușor să includem date externe ca dintr-un CMS fără cap sau orice alt API. Deci, deși va fi difuzat static, aveți în continuare multă flexibilitate în ceea ce privește locul în care trageți conținut și cum îl gestionați.

Lucrul meu preferat la Eleventy este că nu impune prea multe păreri asupra modului în care ar trebui să-mi structurez site-ul, dincolo de puținele directoare așteptate despre care am vorbit pentru _includes și _data (și poți actualiza și convenția de denumire a acestora). Acest lucru poate fi util și dacă doriți să migrați un site și să puteți muta, de asemenea, o structură de fișiere existentă. Cu toate acestea, dacă preferați o arhitectură mai obișnuită, ați putea căuta o altă opțiune.

Îmi place, de asemenea, modul în care pot modela Eleventy pentru a se potrivi modelului meu mental pentru un proiect dat, utilizând mai multe limbi de șabloane, precum și filtre, coduri scurte și machete. Începătorii ajută, de asemenea, să dea un impuls, astfel încât să vă puteți concentra pe ceea ce este cu adevărat important: conținutul dvs. Iar performanța ridicată a ieșirii pur statice este, de asemenea, un mare beneficiu.

Dacă aveți nevoie de ceva mai mult în procesul de construire, puteți adăuga alte instrumente familiare, cum ar fi Webpack, Gulp sau Parcel. Este posibil să găsiți un starter care include deja acele lucruri. Rețineți că puteți, de asemenea, să utilizați scripturile Node care sunt deja inerente procesului de construire Eleventy.

Eleventy este foarte capabil să gestioneze cantități mari de generare de pagini. A fost folosit pentru unele site-uri mari și complexe, cum ar fi web.dev Google și site-ul de marketing Netlify. De asemenea, am folosit Eleventy pentru unele scopuri neconvenționale, cum ar fi generatoarele de e-mail și componente web, împreună cu altele care sunt descrise în această prezentare generală.

Resurse aditionale

Sper că acest ghid v-a atras interesul și v-a pregătit să începeți să utilizați Eleventy! Includea o mulțime de puncte pe care mi s-a părut puțin dificil să le dezvălui atunci când cream primul meu proiect cu el. De când am găsit prima dată Eleventy în aprilie 2020, am construit peste 20 de proiecte Eleventy, numărând starters, plugin-uri, proiecte secundare și materiale de curs. Multe dintre acestea pot fi găsite pe site-ul meu 11ty.Rocks, care are și tutoriale și sfaturi. Eleventy este ceva despre care îmi place foarte mult să discut, așa că nu ezitați să contactați pe Twitter!

Următoarele sunt mai multe resurse pentru a vă ajuta în călătoria dvs. de a învăța și de a profita la maximum de Eleventy:

• Andy Bell oferă un curs plătit foarte cuprinzător — „Învață Eleventy de la zero”.
• Seria de tutoriale a Tatianei Mac, care începe cu „Ghidul pentru începători la Eleventy”, oferă explicații amănunțite care nu presupun nicio experiență anterioară cu generatoarele statice de site.
• Bryan Robinson oferă un curs YouTube pentru a converti o temă HTML gratuită într-un site Eleventy.

În sfârșit, vreau să remarc că comunitatea Eleventy este mică, dar activă! Dacă întâmpinați vreodată dificultăți în găsirea unor informații, puteți trimite întrebarea pe Twitter pe contul oficial @eleven_ty. Creatorul lui Eleventy, Zach Leatherman, se grăbește să răspundă sau să trimită RT la întrebări pentru a vă ajuta să vă întoarceți pe drum!