یازده چیست؟
در میان مولدهای سایت استاتیک، Eleventy (معروف به 11ty) در حال محبوبیت است. این سازنده مبتنی بر Node منحصر به فرد است زیرا دارای یک نقطه شروع با پیکربندی صفر، یک خروجی کاملاً ثابت و توانایی دستیابی به امتیاز عملکرد Lighthouse برتر است.
با استفاده از جاوا اسکریپت، Eleventy یک مولد سایت استاتیک است. این به عنوان یک جایگزین جاوا اسکریپت برای Jekyll ایجاد شد. به طور پیش‌فرض، پیکربندی صفر است، اما می‌توان آن را بر اساس نیاز شما پیکربندی کرد. Eleventy به ساختار دایرکتوری پروژه شما احترام می گذارد. هم در طول ساخت و هم در مرورگر، Eleventy سریع است. در مقایسه با چیزی مانند گتسبی، ارائه محتوا نیازی به بارگیری یک بسته جاوا اسکریپت در سمت مشتری ندارد. در این مورد، رندر سمت سرور حتی مشکلی نیست زیرا صفحات سیستم فایل از HTML ایستا ایجاد می شوند. از آنجایی که Eleventy یک فریمورک جاوا اسکریپت نیست، هیچ دیگ بخار سمت کلاینت ندارد. به جای تعقیب چارچوب ها، Eleventy به فکر بلندمدت است. پشته جلویی شما از زنجیره ابزار، قراردادهای کد و ماژول هایی که استفاده می کنید جدا شده است.
Eleventy از این جهت منحصر به فرد است که به کاربر اجازه می دهد تا ده زبان قالب مختلف را انتخاب و ترکیب کند. اینها را می توان مخلوط کرد یا به صورت جداگانه استفاده کرد. اختلاط زبان‌ها می‌تواند در یک فایل یا بین طرح‌بندی‌ها رخ دهد. با ترکیب زبان ها، می توانید یک گردش کار نوشتن و ساخت متناسب با نیازهای خود و پروژه خود طراحی کنید.
پشتیبانی AVIF
Eleventy پلاگین هایی را ارائه می دهد که عملکردهای اضافی را ارائه می دهند. یکی از این افزونه ها، افزونه Image است که بر اساس ماژول پردازش تصویر واضح node.js ساخته شده است. Image Plugin ابزاری سطح پایین برای انجام هر دو تبدیل تصویر برداری و شطرنجی در زمان ساخت است. چندین اندازه و فرمت خروجی و همچنین ذخیره محلی تصاویر از راه دور را ارائه می دهد.
طیف گسترده ای از فرمت های تصویر به عنوان ورودی پشتیبانی می شود، از جمله JPEG، PNG، WebP، GIF، TIFF، AVIF و SVG. این فرمت‌های مشابه را در اندازه‌های مختلف خروجی می‌دهد و در عین حال نسبت تصویر اصلی را حفظ می‌کند.
این افزونه با اجرای دستور زیر قابل نصب است:
npm install --save-dev @11ty/eleventy-imgکدهای کوتاه، فیلترها و توابع غیر همگام‌ساز می‌توانند از این ابزار بهره ببرند. تصاویر AVIF را می توان به روش های مختلفی ایجاد کرد. کاربر می تواند از تابع generateHTML استفاده کند، کامپوننتی برای تولید خروجی تگ img ایجاد کند، یا خروجی تگ تصویر تولید کند.
ما تولید HTML را توصیه می کنیم زیرا قابل نگهداری تر است و تمام بهینه سازی های تصویر لازم را فعال می کند. یک مثال کد در زیر نشان داده شده است که تصاویر جایگزین AVIF و WebP در اندازه های مختلف تولید می کند.
const Image = require("@11ty/eleventy-img");
async function imageShortcode(src, alt, sizes) {
let metadata = await Image(src, {
widths: [360, 720, 1080, 1440],
formats: ["avif", "webp", "jpeg"]
});
let imageAttributes = {
alt, sizes, loading: "lazy", decoding: "async",
};
return Image.generateHTML(metadata, imageAttributes);
}
module.exports = function(eleventyConfig) {
eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);
eleventyConfig.addLiquidShortcode("image", imageShortcode);
eleventyConfig.addJavaScriptFunction("image", imageShortcode);
}سپس می توانید از این اطلاعات در قالب های خود استفاده کنید. شما به طور خودکار HTML مربوطه را بر اساس گزینه های Image که مشخص کرده اید ایجاد می کنید. کد نمونه زیر را ببینید:
module.exports = function() {
return `<h1>${await this.image(
"./src/images/cat.jpg",
"photo of my cat",
"(min-width: 30em) 50vw, 100vw"
)}</h1>`;
};خلاصه
Eleventy با افزونه Image خود از AVIF پشتیبانی می کند. علاوه بر این، افزونه تصویر بسیار بیشتر است! استفاده همزمان، نام فایل‌های سفارشی، کش درون حافظه، ذخیره تصاویر از راه دور، و غیره. اکیداً توصیه می‌کنیم اسناد کامل را در 11ty.dev مرور کنید.