Eleveny Sitesinde Zip Oluşturma

Raymond Camden

İşte ilginç bir soru. Bir tür dinamik kaynaklara sahip bir Eleventy sitesi göz önüne alındığında, bu kaynakları tek bir basit zip dosyasında almanın bir yolunu nasıl sağlayabilirsiniz? İşte bu sorunu nasıl çözdüm.

İlk olarak, “dinamik kaynaklarımın” bir dizi kedi resmi olacağına karar verdim, çünkü tabii ki yaptım. Yeni bir Eleventy sitesinde, bir images dizin ve bunun altında adında bir alt dizin cats. Bu dizine rastgele bir grup kedi resmi bıraktım. (Yaklaşık yüz tane OneDrive klasörüm var.) Eleveny’nin bunlardan haberdar olmasını istediğim için, bir tane oluşturdum. _data adlı dizin dosyası catpics.js:

const glob = require('glob-promise');

module.exports = async () => {

    return (await glob('./src/images/cats/*.jpg')).map(p => p.replace('./src',''));

};

Temel olarak, tüm JPG’leri seçin ve bunları bir dizide döndürün, aynı zamanda kaldırırken /src sonuçtan sonra HTML’de kullanabileceğim bir dizi yol buldum. İşte bunu nasıl kullandım:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Zip Demo</title>
    <style>
    img {
        max-width: 220px;
        max-height: 220px; 
    }
    </style>
</head>
<body>

<h2>Cats</h2>

{% for cat in catpics %}
    <img src="{{ cat }}">
{% endfor %}

</body>
</html>

Son bit, resimlerimin kaynak dizine kopyalanmasını sağlamaktı. bunu bende yaptım .eleventy.js dosya:

eleventyConfig.addPassthroughCopy('src/images');

Bu işlendiğinde nasıl göründüğü aşağıda açıklanmıştır:

Dürüst olmak gerekirse, size bu resmi göstermeme gerçekten gerek yok ama dayanamadım. Pekala, bir sonraki kısım zip dosyasını oluşturmaktı. Zip’i nasıl oluşturacağıma dair iyi bir fikrim olsa da, bu mantığı işlemek için “en iyi” veya daha uygun yerin ne olduğu konusunda mücadele ettim. Sonunda Eleventy’s kullanmaya karar verdim. onbir.sonra Etkinlik. Bu olay, bir derleme tamamlandıktan sonra tetiklenir. İşte benim içinde nasıl kullandım .eleventy.js dosya:

// Stuff removed to keep the code listing short...
const AdmZip = require('adm-zip');
const glob = require('glob-promise');

eleventyConfig.on('eleventy.after', async () => {
        console.log('after build');
        let catpics = await glob('./src/images/cats/*.jpg');
        let zip = new AdmZip();
        catpics.forEach(c => zip.addLocalFile(c));
        zip.writeZip('_site/catpics.zip');
});

kullanıyorum adm-zip, daha önce kullandığım güzel bir JavaScript zip kitaplığı. Yeni bir zip oluşturuyorum, her bir resmi ekliyorum ve bittiğinde bunu çıktı dizinime şöyle yazdım: catpics.zip. HTML’ime geri döndüğümde, ona bir bağlantı ekledim:

<p>
Download them here: <a href="catpics.zip">catpics.zip</a>
</p>

Bu kadar. Teoride, artık cat dizinine yeni resimler bırakabilir, bir derleme çalıştırabilirsiniz (umarım bu otomatiktir) ve derleme tamamlandığında zip dosyası güncellenir. Böyle bir şey yaptıysanız, gerçek dünyadan bir örnek görmeyi çok isterim, sadece bana bildirin. Bu demonun tam kaynağını istiyorsanız, burada bulabilirsiniz: https://github.com/cfjedimaster/eleventy-demos/tree/master/autozip

fotoğrafı çeken Tomas Sobek üzerinde Sıçramayı kaldır

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.