Eleventy Statik Site Üreticisine Derin Bir Bakış

Ama önce — "statik site" ile ne kastedildiğini ve ardından bir jeneratörün ne sağladığını hızlıca gözden geçirelim. Statik bir site, statik içerikten oluşur - örneğin HTML, CSS, varlıklar ve tüm içerik, bir web sitesi barındırıcısına gönderilmeden önce zaten birlikte derlenir. Bu, bunları çalışma zamanında bir veritabanını sorgulamaktan (WordPress gibi) derleyen veya API'lerin istemci tarafındaki içeriği çeken (sunucu tarafı oluşturma olmadan JavaScript çerçeveleri gibi) dinamik bir siteden farklıdır.

Statik site oluşturucu, içeriğinizi statik HTML'de derlemek için bir ortam ve yapı işlemcisidir. Genellikle içeriğinizi yazarken (Markdown'ı desteklemek gibi) esneklik sağlamak için yardımcılar sunarlar ve şablon oluşturma yöntemleri içerirler. Bu nedenle, HTML sayfalarını tek tek yazmak ve tekrarlanan bölümleri kopyalayıp yapıştırmak yerine, bir oluşturucu bu şeyleri belirli bir şablonlama dili aracılığıyla bileşenlere ayırmayı destekleyecektir. Ardından, oluşturucunun oluşturma süreci her şeyi bir araya getirecek ve web siteniz olarak sunulmak üzere bir web barındırıcısına yüklenebilecek son HTML'yi çıkaracaktır. Kullandığınız web barındırıcısına bağlı olarak, bu oluşturma işlemi ana bilgisayar tarafından bile yapılabilir.

Birçok statik site oluşturucu mevcuttur. Jekyll, Hugo, Gatsby, Next ve Nuxt gibi isimleri duymuş ve hatta kullanmış olabilirsiniz. Kapsamlı bir liste Jamstack.org tarafından sağlanmaktadır.

Eleventy'yi Diğer Statik Site Üreticilerinden Farklı Kılan Nedir?

Eleventy, hem derlemeler sırasında hem de tarayıcıda son derece hızlıdır. Bu, büyük ölçüde, içerik sunmak için (Gatsby gibi bir şeye kıyasla) bir istemci tarafı JavaScript paketinin yüklenmesini gerektirmemesi sayesindedir. Dosya sistemi sayfası oluşturma varsayılan olarak statik HTML'ye ayarlandığından, sunucu tarafı oluşturma burada bir endişe bile değildir.

Eleventy'yi gerçekten benzersiz kılan şey, on farklı şablonlama dili arasından seçim yapabilme ve bunları birbirine karıştırabilme yeteneğidir:

Karıştırma dilleri aynı dosyada veya düzenler arasında olabilir. Örneğin, ana içeriğimi genellikle Nunjucks düzenini besleyen Markdown ile yazarım. Bazı projelerde, Markdown dosyasındayken Nunjucks kullanarak bazı veriler üzerinde döngü kurabilmeyi faydalı buldum. Bu dilleri birleştirme yeteneği çok güçlüdür ve sizin ve projeniz için en iyi sonucu veren bir yaz ve oluştur iş akışı tasarlamanıza olanak tanır.

Eleveny, sitenin yerel olarak sunulmasını ve dosya değişiklikleri üzerine çalışırken yeniden yüklemeyi etkinleştirmek için BrowserSync'i kullanan bir --serve bayrağı içerir. Bu büyük bir kolaylık ve statik bir site oluşturucu değil, belki de Gulp gibi derleme araçlarından bir yükseltme arıyorsanız aklınızda bulundurmanızda fayda var.

Sıfır yapılandırmanın bir parçası olarak, tüm site dosyalarınız projenizin kökünde yaşayabilir. Giriş ve çıkış dizinlerini değiştirmek için, .eleventy.js adlı bir kök dosya olması beklenen bir Eleventy yapılandırması oluşturabilirsiniz. İşte bu değişikliğin nasıl yapılacağını gösteren kısa bir pasaj:

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

Daha önce belirtildiği gibi, varsayılan davranış, özellikle hızlı başlangıç ​​için genellikle büyük fayda sağlayan dosya sistemi sayfası oluşturmadır. Bu, özel bir permalink atayarak kolayca geçersiz kılınabilir ve dosya başına, dizinin tamamı için veya dinamik olarak bir veri kümesi için yapılabilir. Kalıcı bağlantılar ayrıca birazdan keşfedeceğimiz başka bir süper güç sunar!

Benzersiz bir şekilde, oluşturma sırasında JavaScript kullanarak ve filtreler ve kısa kodlardan yararlanarak içerik, veri ve bu içerik ve veriler üzerinde dönüşümler hazırlayabilirsiniz (bunlardan daha sonra bahsedeceğiz). Yine, tüm bunlar istemci tarafında bir JavaScript paketi eklemeden gerçekleşirken, JavaScript'in şablonlama dili olarak kullanılmasına devam edilir.

Önemli Not : Eleveny'yi JavaScript bilgisi olmadan veya düşük seviyede başarıyla kullanabilirsiniz.

Gatsby gibi diğer SSG'lerin veya WordPress gibi ortamların aksine, çoğu Eleventy sitesi herhangi bir eklenti gerektirmez. Kullanılabilir bazı eklentiler var, ancak temel işlevler için gerekli değiller.

Eleventy ile inşa ederken, ihtiyaç duyduğunuz özellikleri ekleyebilirsiniz. Aslında, yalnızca HTML kullanabilir ve diğer şablonlama dillerinden hiçbiriyle çalışamazsınız. Eleveny, yalnızca projenizin gerektirdiği kadar karmaşıktır!

Temel Eleventy Kavramlarını Anlamak

Eleventy projelerinizi oluştururken başarılı olmanıza yardımcı olacak birkaç terminoloji ve kavramı gözden geçirelim.

Düzenler ve Şablonlar

Bu terimleri birbirinin yerine kullanılabilir olarak düşünebilirsiniz, ancak Eleventy bağlamında, bağlamsal anlamları vardır:

• Şablon, tüm içerik dosyaları için genel bir terimdir.
• Düzenler, diğer içeriği saran özel şablonlardır.

Örneğin, şablon tüm Markdown dosyalarınızı ifade ederken, bir düzen HTML5 ortak plakasını ve şablon içeriği için bir yuvayı içeren bir Nunjucks dosyası olabilir. Başlarken bölümünde bu işi nasıl yapacağımızı öğreneceğiz.

Filtreler ve Kısa Kodlar

Bunlar, içerik çıktısını değiştirmenin ve yeniden kullanılabilir şablon parçaları oluşturmanın ek yollarıdır. Nunjucks, Liquid, Handlebars ve JavaScript şablonlarıyla birlikte kullanılabilirler. Filtreler ve .eleventy.js içinde tanımlanır.

Seçtiğiniz şablonlama dilindeki değişkenlerin ve operatörlerin ötesinde, Eleventy, filtre kavramını daha önce listelenen dillerde birleştirdi. Filtreler, içeriği bir şekilde içerik türüne özel olarak dönüştürür. Örneğin, dizeleri büyük harfle yazmak için tasarlanmış bir filtre oluşturabilirsiniz. Veya, rastgele bir öğe seçmek gibi, döndürülenleri değiştirmek için dizilerde kullanılması amaçlanan bir filtreniz olabilir. Bazı filtreler Eleventy tarafından sağlanır ve bunlardan birkaçını başlangıç ​​eğitiminde kullanacağız.

Kısa kodlar, yeniden kullanılabilir şablon parçaları oluşturmaya izin verir ve argümanları kabul edebilir. Bağımsız veya eşleştirilmiş olabilirler, yani içeriği bir başlangıç ​​ve bitiş etiketiyle sararlar.

En sevdiğim kısa kodlardan biri, mevcut yılı oluşturmaktır - bu, alt bilginizde artık güncel olmayan telif hakkı yıllarının olmadığı anlamına gelir! Bir year kısa kodunun nasıl oluşturulacağı aşağıda açıklanmıştır:

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

Nunjucks veya Liquid şablonunda kullanmak için şöyle görünür: {% year %} .

Eşleştirilmiş kısa kod örnekleri için Eleventy belgelerini inceleyebilirsiniz.

Koleksiyonlar

Koleksiyonlar, ilgili içerik gruplarıdır ve tipik olarak, tags tanımlanarak ön madde içinde oluşturulur. Etiket sözdizimi seçenekleri arasında tek dizeler, çoklu etiketler için tek satırlı diziler — ["tagA", "tagB"] veya birden çok etiket atamak için YAML stili listeler bulunur. Örneğin, bu koleksiyona dahil edilmesini istediğim tüm içeriğe aşağıdaki ön maddeyi ekleyerek bir “sayfalar” koleksiyonu oluşturabilirim:

 --- tags: pages ---

Bir koleksiyon tanımladıktan sonra, global collections nesnesi içinde seçtiğiniz şablonlama dili aracılığıyla ona erişebilirsiniz. “Sayfalar” koleksiyonumuza erişmek, collections.pages gibi görünecektir. Bu, o koleksiyonun verilerinin bir dizisini döndürür ve böylece, bir bağlantı listesi veya makale bilgi kartları oluşturmak gibi, üzerinde döngü yapmak gibi dizi işlemleri gerçekleştirebilirsiniz. Hatta normal dosya çıktısını engelleyebilir ve tek sayfalık site içeriğini yönetmek için yararlı olan veri görüntülemeyi yönetmek için yalnızca koleksiyonları kullanabilirsiniz.

Özel Veriler

Şimdiye kadar dosya olarak içerik oluşturmaktan bahsettik, ancak Eleventy, farklı veri kaynaklarını korumayı da çok kolaylaştırıyor. Buna "özel veriler" denir ve JavaScript modülü dışa aktarmaları veya _data dizininde JSON dosyaları olarak yaşar.

Özel veriler şu amaçlarla kullanılabilir:

• Temel bir JSON dizisi tanımlayın.
• Getirme işleminin sonuçlarını döndürür.
• Başsız bir CMS'den içeriği alın ve yeniden biçimlendirin.

Eleveny, _data içindeki tüm verileri dosya adıyla eşleşen bir değişken altında kullanılabilir hale getirir. Örneğin, posts.json oluşturursam buna şablonlarımda posts olarak erişebilirim. Nunjucks kullanarak, posts verileri üzerinde döngü oluşturmaya bir örnek:

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

Sayfalandırma ve Verilerden Sayfa Oluşturma

Eleventy terimlerinde, sayfalandırma, bir veri kümesi üzerinde yineleme yapmak ve bu veri "parçasının" çıktısı için bir şablon tanımlamak anlamına gelir. Bu, ön madde içindeki sayfalandırmayı tanımlayan özel bir dosya ile yapılır. Dosya ayrıca veriler için amaçlanan çıktınızı ayarlamayı da içerir, yani kendi şablonu da olur. İçeriğin gönderileceği bir düzen tanımlayabilir ve ayrıca referans kolaylığı ve çıktı için esneklik için bir koleksiyon oluşturmak için etiketler ekleyebiliriz.

Not : Bir CMS'den içerik almak için özel veriler kullanıyorsanız, sayfalandırma, bu verileri dinamik olarak sayfalara dönüştürmek için aradığınız Eleventy yöntemidir.

Başsız bir CMS'den bir getirme yoluyla aldığımızı varsayacağımız posts özel veri göndermenin bir örneği. Daha da önemlisi, size 1'e ayarlanmıştır; bu, her "sayfalandırma öbeğinin" tek bir sayfa çıktı üretmesi gerektiği anlamına gelir. Daha sonra sayfalama döngüsündeki geçerli öğeye bir referans oluşturmak için alias kullanırız ve ardından bu referansı permalink tanımında ve şablon gövdesinde kullanırız.

Sayfalandırmayı tanımlayan dosya, giriş dizininizde istediğiniz yerde yaşayabilir. Organizasyonel tercihim, bir generate dizini oluşturmak ve ardından onu oluşturacağı koleksiyonla aynı şekilde adlandırmaktır. Aşağıdakilerin 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 }}

Bu durumda, permalink , çıktısı alınacak sayfayı doğrudan site kökünden atamaktadır. /posts/{{ post.title | slug }} gibi bir önek eklemek için bunu değiştirebilirsiniz. /posts/{{ post.title | slug }} örneğin.

Ek olarak, oluşturulan tüm sayfaların etiketler tarafından oluşturulan koleksiyonda kullanılabilir olmasını istiyorsanız, ilk öğeden fazlasını içerecek şekilde addAllPagesToCollections true olarak ayarlamalısınız.

Son olarak, içeriğiniz önceden derlenmiş HTML yerine Markdown olarak geliyorsa, templateEngineOverride kullanmanız gerekir. Örnek pasajda, onu njk, md olarak ayarladım; bu, şablon içeriğinin değişkeni dönüştürmek için hem Nunjucks olarak hem de değişkende döndürülen içeriği derlemek için Markdown olarak işlenmesi gerekeceği anlamına gelir.

safe ne anlama geldiğini merak ediyorsanız, bunu birazdan öğreneceğiz!

Eleventy'ye Nasıl Başlanır?

Pekala, ilk Eleventy projenize başlamaya hazırsınız! Bu kısa öğretici, oluşturmaya devam etmek için yerinde bir başlangıç ​​yapısı edinmenize yardımcı olacaktır. Daha önce öğrendiğimiz kavramları kullanacağız ve birkaç yeni fikir de ekleyeceğiz.

Buradaki ilk önemli not, Eleventy'nin kapsamlı bir paket olduğudur, işte kurulum komutu:

 npm install @11ty/eleventy

Ardından, yapmayı sevdiğim kullanışlı bir kolaylık, package.json aşağıdaki komut dosyalarını eklemek:

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

Daha önce belirtildiği gibi, --serve bayrağı BrowserSync aracılığıyla yerel bir sunucuyu etkinleştirecektir.

Tercihim, giriş/çıkış dizinlerini daha önce incelediğimiz gibi güncellemek, bu yüzden şimdi src veya seçtiğiniz giriş dizini içinde içerik oluşturma zamanı.

Projemizi baştan daha esnek ve ölçeklenebilir olacak şekilde hazırlamak için HTML5 ortak plakasını içeren en az bir layout oluşturmanızı öneririm. Düzenlerin, bir avuç beklenen dizinden biri olan, doğrudan _includes adlı bir içinde tanımlanması gerekir.

Yeni başlayanlar arasında sıklıkla bulacağınız bir kural, bu yerleşim düzenini base olarak adlandırmaktır. Nunjucks dosyası yapmak için bir tercihim var.

İşte bir örnek 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>

Çift küme parantezleri, değişkenler için Nunjucks sözdizimidir. Burada, kısa süre içinde ön madde aracılığıyla sağlanacak olan bir gelen title değişkeni için hazırlandık. content değişkeni Eleventy tarafından sağlanır ve gelen tüm ön madde dışı içeriğin gitmesi gereken yeri işaretler. Daha da önemlisi, bu, sağlanan safe filtreyle birlikte kullanılır ve derlenmiş HTML'nin işlenmesine karşı kaçmasını önler.

Şimdi index.md olarak ekleyeceğimiz site dizinimizi oluşturma zamanı:

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

Ön konuya başlığımızı eklediğimize ve düzeni tanımladığımıza dikkat edin.

Bu noktada eklediğimiz script ile projemizi çalıştırabiliriz: npm start . Bu, BrowserSync'i localhost:8080 (varsa) kurması için tetikler, ancak tarayıcıda manuel olarak açmanız gerekir. Tarayıcının otomatik olarak açılmasını istiyorsanız bu kısa ipucuna göz atın.

Son kritik adım, bir stil sayfası eklemektir. Şu anda, CSS otomatik olarak dahil edilen bir dosya türü olarak tanınmıyor, bu nedenle stil sayfamızı oluşturduktan sonra fazladan bir yapılandırma adımımız olacak.

css/style.css gibi girdi dizininizde istediğiniz yere bir CSS dosyası ekleyebilirsiniz. Ardından, .eleventy.js açın (veya giriş/çıkış özelleştirmesini yapmadıysanız proje kökünde oluşturun) ve aşağıdakileri ekleyin:

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

İlk olarak, css dizinini bir "geçiş kopyası" olarak ekliyoruz, bu da Eleventy'nin onu çıktı dizinine göndermeye dahil etmesi gerektiği anlamına geliyor. Ardından onu bir "izleme hedefi" olarak da ekleriz, böylece start komutumuzu çalıştırırken stillerimizde değişiklik yaptığımızda, Eleventy yerel sitemizi güncellemek için bir yeniden oluşturma işlemini tetikler.

Son olarak, base düzenimiz içinde stil sayfamıza bağlantıyı eklemeyi hatırlamamız gerekiyor:

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

Stil sayfasının konumunu tanımladığımızda, onu, derleme sırasında gerektiği gibi ilgili dosya yolunu ayarlayacak olan Eleventy'nin url filtresinden geçiririz.

Ardından, koleksiyonları ve düzenleri kullanmayı biraz daha keşfetmek için bir "sayfalar" gönderi türü oluşturalım. Bunu yapmak için, pages dizinini ekleyin ve bir title ön madde anahtarı dahil ancak bir düzen içermeyen bir veya iki Markdown dosyası oluşturun.

Bu sefer düzeni tanımlamak için biraz farklı bir yöntem kullanacağız – bir veri dizini dosyası . Bu dosya genellikle JSON olarak biçimlendirilir ve bir dizindeki tüm dosyalara uygulanması gereken verileri eklememize olanak tanır, bu da onu dosyalar arasında çoğaltma zorunluluğunu ortadan kaldırır. Dosyanın, kullanılacağı dizinle aynı şekilde adlandırılması gerekir, bu nedenle pages.json dosyasını oluşturun ve aşağıdaki içeriği ekleyin:

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

Ayrıca "sayfalar" koleksiyonunu oluşturmak için etiketler tanımladık. Ancak tanımladığımız düzen aslında henüz mevcut değil, bu nedenle _includes/page.njk oluşturun ve şunu ekleyin:

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

Burada, base şablonumuzu yeniden kullanabilmek ve aynı zamanda page düzenimiz için <article> olan benzersiz bir öğe ekleyebilmek için Eleventy düzen zincirleme konseptini kullanıyoruz. Bu, sayfalarımızın tüm içeriğinin hem page düzenini hem de base düzeni kullanacağı anlamına gelir.

Düzen zincirleme, kazan plakalarının ve temel site yerleşim yapılarının yeniden kullanılmasına izin vererek tekrarı azaltır.

Artık pages içerik türü için içerik oluşturduğumuza ve etiketler aracılığıyla “sayfalar” koleksiyonu olarak tanımladığımıza göre, bu koleksiyona nasıl erişebileceğimize bakalım. Burada, koleksiyon üzerinde dolaşmak ve her sayfaya bağlantıların bir listesini çıkarmak için Nunjucks kullanacağız. Bu döngü index.md dosyamıza eklenecektir.

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

Yine de benzersiz bir şey yaptık, bu da döngünün iç kısmının bağlantıları oluşturmak için Markdown'a geri dönmesidir. Bu, bu senaryoyu işlemek için gerekli bir yol değildir, ancak çok kullanışlı olabilir! Bazen karmaşıklığa bağlı olarak bu çalışmayabilir. Gerçek neden, Markdown oluşturucunun varsayılan olarak Liquid şablonlama diline sahip olmasıdır, bu nedenle Nunjucks özelliklerini temel döngülerin ötesinde kullanıyorsanız, Eleventy'nin dosyayı nasıl işleyeceğini bilmesini sağlamanız gerekir.

Sayfalandırmayla ilgili önceki bölümde, aslında bunun çözümüne zaten baktık. Ve bu, dosyanın hem Nunjucks hem de Markdown olarak işlenmesi gerektiğini belirtmek için templateEngineOverride kullanmaktır. Aşağıdaki tam çözüm şablonun ön maddesine yerleştirilmelidir: templateEngineOverride: njk, md .

Bu noktada, temel bir çok sayfalı site oluşturdunuz! Harici veri kullanmanız gerekiyorsa, sayfalandırma bölümüne geri dönün.

Bir Eleventy Projesine Başlamanın Diğer Yolları

WordPress gibi diğer bazı statik site oluşturucular ve ortamlar “temalar” kavramına sahipken, Elventy “başlangıç” terimini kullanır. Aralarından seçim yapabileceğiniz büyüyen bir koleksiyon var ve birçoğu Elventy belgelerindeki listede bulunabilir.

Benim tercihim Eleventy projelerimde Sass kullanmak ve bunu inşa sürecinize nasıl ekleyeceğinizi görmek isterseniz elimde bir Sass başlatıcı var. Diğerleri, varlıklar ve işleme için bu inşa hattına alışkınlarsa Gulp'u eklemeyi seçebilirler.

Ayrıca, bu makalede tartışılan özellikleri içeren ve eğitim sonucuyla benzerlikleri paylaşan minimal bir başlatıcı oluşturdum. Ayrıca, harici verilerin alınmasına ilişkin küçük bir örneğe sahiptir ve bir koleksiyona dayalı olarak site gezintisini görüntülemek için kısmi olarak nasıl ekleneceğini gösterir.

Temelleri Genişletme

Bazı temel içerik ve belki bazı özel verilerle ilk sitenizi oluşturmayı denedikten sonra, bu içerikle çalışmanın ek yollarını bilmek faydalı olacaktır. İşte bilinmesi gereken diğer bazı kavramlara kısa bir genel bakış.

Kalıcı Bağlantılarla Dosya Çıktı Türünü Değiştirme

Daha önce kalıcı bağlantıların bir süper gücü olduğundan bahsetmiştim. Ve bu, onları HTML olmayan dosya türlerinin çıktısını almak için kullanabilmenizdir.

İki faydalı örnek, her ikisi de tipik olarak XML dosyaları olan bir RSS beslemesi ve bir site haritası oluşturmaktır. Gerçekten güçlü olan şey, bu dosyaları oluşturmaya yardımcı olmak için seçtiğiniz şablonlama dilini kullanmaya devam edebilmenizdir, böylece örneğin RSS beslemenizi taze tutmak için Nunjucks ile sayfa verileri üzerinde döngü oluşturabilirsiniz.

Koleksiyonları Özelleştirme

Bazen koleksiyon oluşturmak için etiketleri kullanmak yeterli olmayabilir. Veya mevcut bir koleksiyonun filtrelenmiş varyasyonlarını oluşturmak isteyebilirsiniz. Sağlanan bir dizi işlevi kullanarak koleksiyonları değiştirebilir veya oluşturabiliriz. Bunlar .eleventy.js yapılandırma dosyasında yer alacaktır.

Bu örnekte, mevcut bir koleksiyondaki öğeleri filtrelemek için addCollection işlevini kullanıyoruz. Yeni koleksiyon, ön madde içinde customKey varlığına dayanacaktır. Bu anahtar, oluşturulan tüm Eleventy içeriğine eklenen data nesnesinden döndürülür.

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

Eleventy belgelerinde koleksiyon oluşturmanın, değiştirmenin ve kullanmanın diğer yollarını inceleyebilirsiniz.

Data Cascade ile Çalışma

Eleventy, bu kılavuzda henüz keşfetmeye başladığımız veri kaskadı adı verilen bir şablon için verilerin nasıl derlendiğine dair daha eksiksiz bir konsepte sahiptir. Dokümanlardan başlayarak nasıl çalıştığını gözden geçirirseniz, Eleveny'den en iyi şekilde yararlanacaksınız. Ben Myers'ın ayrıca veri kaskadını anlamak için mükemmel bir kılavuzu var.

Önerilen Eleventy Eklentileri

Girişte, eklentilerin mevcut olduğundan, ancak her zaman gerekli olmadığından kısaca bahsettim. Ancak, çoğu projede kullanma eğiliminde olduğum birkaç tane var:

• @11ty/eleventy-plugin-rss Bir RSS beslemesine sahip olmak istiyorsanız, bu resmi eklenti, beslemeyi oluşturmanıza yardımcı olacak bazı filtreler sağlar. Bağlantılı depo, bazı başlangıçlarda kullanımda bulabileceğiniz örnek bir besleme içerir.
• @11ty/eleventy-plugin-syntaxhighlight Prism'i kod vurgulama için bir komut dosyası olarak yüklemek yerine, bu eklenti, bu işlemenin Eleventy oluşturma sürecinin bir parçası olarak uygulanmasına izin verir. Bu, kod bloklarının önceden bir Prism teması uygulamak için sınıfları içerecek şekilde dönüştürüldüğü anlamına gelir, bu nedenle yalnızca seçtiğiniz bir Prism CSS temasını eklemeniz gerekir.
• @11tyrocks/eleventy-plugin-social-images Eleventy keşfimin başlarında aradığım bir özellik, sosyal medya paylaşım görüntüleri oluşturma yeteneğiydi. Bu, anlık görüntüyü almak için sahne arkasında Kuklacı'yı kullanan bir eklenti oluşturmamı sağladı. Eklenti, kendi şablon dosyanızı tanımlamak için önceden oluşturulmuş şablonların yanı sıra yapılandırma seçenekleriyle birlikte gelir.

Navigasyon ve görüntü işleme dahil olmak üzere diğer genel ihtiyaçları karşıladıkları için resmi Eleventy eklentilerinin geri kalanına da aşina olmanızı tavsiye ederim.

Eleventy'nin Projeniz İçin Uygun Olup Olmadığına Karar Verme

Çoğu statik site gibi onbir, genellikle dinamik olarak veya isteğe bağlı olarak sunulması gerekmeyen içerik için en iyisidir. Bu, tüm sitenin statik olması gerektiği veya içeriği dinamik hale getirmenin yolları olmadığı anlamına gelmez. API'lerden alma veya etkileşimli widget'lar oluşturma gibi dinamik içeriği etkinleştirmek için JavaScript'i yine de yükleyebilirsiniz. Ana makineniz web kancaları oluşturmayı destekliyorsa ve bir zamanlamaya göre yenilemek istediğiniz bölümleriniz varsa, sitenizi yeniden oluşturmayı kolaylaştırmak için IFTTT veya Zapier gibi hizmetleri de kullanabilirsiniz.

Özel veriler ve sayfalandırma sayesinde, harici verileri başsız bir CMS'den veya başka herhangi bir API'den dahil etmenin kolay olduğunu gördük. Bu nedenle, statik olarak sunulacak olsa da, içeriği nereden çektiğiniz ve nasıl yönettiğiniz konusunda hala çok fazla esnekliğe sahipsiniz.

Eleventy ile ilgili en sevdiğim şey, _includes ve _data için bahsettiğimiz birkaç beklenen dizin dışında sitemi nasıl yapılandırmam gerektiği konusunda pek fazla fikir _data (ve bunların adlandırma kurallarını da güncelleyebilirsiniz). Bu, bir siteyi taşımak istiyorsanız ve potansiyel olarak bazı mevcut dosya yapılarını da taşıyabiliyorsanız yardımcı olabilir. Ancak, daha fazla fikir sahibi bir mimariyi tercih ederseniz, farklı bir seçenek arayabilirsiniz.

Ayrıca, birden fazla şablonlama dilinin yanı sıra filtreler, kısa kodlar ve düzenlerden yararlanarak Eleventy'yi belirli bir proje için zihinsel modelime uyacak şekilde nasıl şekillendirebileceğimi de seviyorum. Başlangıçlar ayrıca gerçekten önemli olan şeye, yani içeriğinize odaklanabilmeniz için bir destek sağlamaya yardımcı olur. Tamamen statik çıktının yüksek performansı da büyük bir avantajdır.

Oluşturma işleminizde biraz daha fazlasına ihtiyacınız varsa, Webpack, Gulp veya Parcel gibi diğer tanıdık araçları ekleyebilirsiniz. Bu şeyleri zaten içeren bir başlangıç ​​bulabilirsin. Ayrıca, Eleventy oluşturma sürecine zaten özgü olan Düğüm komut dosyalarından da yararlanabileceğinizi unutmayın.

Eleveny, büyük miktarlarda sayfa oluşturma konusunda oldukça yeteneklidir. Google'ın web.dev ve Netlify'ın pazarlama sitesi gibi bazı büyük ve karmaşık siteler için kullanılmıştır. Ayrıca Eleventy'yi e-posta ve web bileşeni oluşturucular gibi bazı alışılmadık amaçlarla ve bu genel bakışta açıklanan diğer amaçlar için de kullandım.

Ek kaynaklar

Umarım bu rehber hem ilginizi çekmiştir hem de sizi Eleventy'yi kullanmaya başlamanız için hazırlamıştır! Onunla ilk projemi oluştururken ortaya çıkarmak için biraz zor bulduğum birçok nokta içeriyordu. Nisan 2020'de Eleventy'yi ilk bulduğumdan beri, başlangıçları, eklentileri, yan projeleri ve kurs materyallerini sayarak 20'den fazla Eleventy projesi oluşturdum. Bunların çoğu, öğreticiler ve ipuçları da içeren 11ty.Rocks sitemde bulunabilir. Eleventy, tartışmaktan gerçekten zevk aldığım bir şey, bu yüzden Twitter'da bize ulaşmaktan çekinmeyin!

Aşağıdakiler, öğrenme ve Eleventy'den en iyi şekilde yararlanma yolculuğunuzda size yardımcı olacak daha fazla kaynaktır:

• Andy Bell çok kapsamlı bir ücretli kurs sunuyor - "Sıfırdan On Bir Öğrenin".
• Tatiana Mac'in "Elventy'ye Yeni Başlayanlar Kılavuzu" ile başlayan eğitim serisi, statik site oluşturucularla daha önce hiçbir deneyimin olmadığı varsayılarak kapsamlı açıklamalar sağlar.
• Bryan Robinson, ücretsiz bir HTML temasını bir Eleventy sitesine dönüştürmek için bir YouTube kursu sunuyor.

Son olarak, Eleventy topluluğunun küçük ama aktif olduğunu belirtmek isterim! Herhangi bir bilgiyi bulmakta zorluk çekerseniz, sorunuzu resmi @eleven_ty hesabına tweet atabilirsiniz. Eleventy'nin yaratıcısı Zach Leatherman, yolunuza geri dönmenize yardımcı olmak için soruları yanıtlamak veya RT yapmak için hızlı!