5 ميزات جديدة للتجربة في Astro 2.5

AstroJS هي أداة رائعة تعتمد على JavaScript تُستخدم لإنشاء مواقع ويب ثابتة فائقة السرعة. يسمح لك بإنشاء مواقع ويب باستخدام أطر عمل JavaScript متعددة مثل React و Vue و Svelte. يجلب Astro 2.5 مجموعة جديدة كاملة من الميزات التي سيتم تغطية بعضها هنا.

1. مجموعات البيانات

يدعم Astro 2.5 الآن تخزين JSON و YAML في مجموعات. النوع الجديد: خاصية "البيانات" تمكّن هذه الوظيفة. لتوضيح ذلك ، قم بإنشاء مجموعة بيانات "كتاب" في المجلد src / content ، حيث جسون أو YAML يمكن إضافة الملفات.

بعد ذلك ، قم بتكوين المجموعات في src / content / config.ts باستخدام الامتداد حدد المجموعة و ض المرافق من أسترو: المحتوى وحدة وضبط النوع على البيانات.

يستورد {z ، حدد مجموعة} من"astro: content";
مقدار ثابت الكتاب = حدد المجموعة ({
يكتب: "بيانات",
مخطط: ض.هدف({ اسم: ض.خيط() }),
});

أخيرًا ، قم بتصدير كائن المجموعة لتسجيل مجموعاتك.

يصدّرمقدار ثابت المجموعات = {الكتاب:الكتاب}

2. تصغير HTML

يقدم Astro 2.5 خيار ضغط HTML الذي يزيل جميع المسافات البيضاء (وفواصل الأسطر) من HTML الخاص بك. يتم ضغط المكونات مرة واحدة فقط بواسطة مترجم Astro ثم أثناء الإنشاء. يتم ذلك لتقليل تكاليف الأداء.

من السهل تمكين هذا الخيار في مشروعك. فقط أضف الأسطر التالية إلى ملف التكوين الخاص بك. لا يعمل تصغير HTML إلا مع المكونات المكتوبة بتنسيق ملف .astro.

يصدّرتقصيرحدد تكوين({ضغط HTML:حقيقي})

3. التقديم المتوازي

عرض المكونات بالتوازي هو ميزة طال انتظارها في Astro. في الحالات التي تقوم فيها المكونات الفرعية في مختلف الأشجار الفرعية بجلب البيانات ، يعمل Astro 2.5 على تحسين أوقات التحميل عن طريق جلب البيانات بشكل متوازٍ.

يتيح ذلك عرض أحد المكونات لأسفل في الشجرة دون حظره بواسطة مكون جلب البيانات في أعلى الشجرة. في الوقت الحالي ، لا يعمل العرض المتوازي بشكل صحيح مع مجموعة خريطة شظايا غير متزامنة.

يجلب Astro 2.5 أيضًا مجموعة جديدة كاملة من الميزات التجريبية التي تمت تغطيتها أدناه.

4. التقديم الهجين

يتيح لك Astro 2.5 الآن تحديد خيار إخراج خادم جديد في ملف التكوين الخاص بك والذي يتجاوز سلوك العرض المسبق الافتراضي لـ SSR.

للاستفادة من العرض المختلط ، اضبط هجين إلى true في القسم التجريبي من التكوين الخاص بك وإضافة محول.

سيؤدي القيام بذلك إلى عرض موقعك بالكامل مسبقًا بشكل افتراضي ، ولكن يمكنك إلغاء الاشتراك في هذا السلوك عن طريق تعيين قبل العرض تصدير أي مسار أو صفحة إلى false:

يصدّرمقدار ثابت قبل العرض = خطأ شنيع;

5. توجيهات العميل المخصصة

يقدم Astro 2.5 واجهة برمجة تطبيقات addClientDirective للتحكم في ترطيب المكون من جانب العميل باستخدام العرف عميل:* التوجيهات.

لاستخدام هذه الميزة ، قم بتمكين تجريبية. customClientDirectives في ملف التكوين واحتفظ بنقاط دخول التوجيه في حدها الأدنى لتجنب أي تأثير سلبي على ترطيب المكونات.

دالة من النوع توجيه العميل يجب أن يتم تصديرها من ملف توجيه العميل الخاص بك. على سبيل المثال ، يقوم الكود التالي بترطيب المكون عند أول نقرة على النافذة.

يستورد {ClientDirective} من"أسترو";
مقدار ثابت clickDirective: ClientDirective = (تحميل ، يختار ، el) => {
نافذة او شباك.addEventListener (
"انقر",
غير متزامن () => {
مقدار ثابت هيدرات = انتظر حمولة()؛
انتظر هيدرات()؛
 },
 { مرة واحدة: حقيقي }
 );
};
يصدّرتقصير انقر فوق التوجيه ؛

الآن العميل: انقر يمكن استخدامها في المكونات الخاصة بك مع دعم من النوع الكامل.

كيفية تثبيت Astro

يوفر Astro واجهة سطر أوامر (CLI) تسمى خلق الفلك لتبدأ. تحتاج أن تملك تم تثبيت NodeJS 16+ و npm على جهازك.

npm إنشاء الفلكية@أحدث

سيؤدي هذا إلى دعم مشروع Astro الجديد من الصفر. اتبع التعليمات التي تظهر على الشاشة لإعداد الأشياء (إذا لم تكن متأكدًا مما تختاره ، فما عليك سوى الانتقال إلى الخيارات الموصى بها). التالي، قرص مضغوط في مجلد المشروع ، ثم قم بتشغيل:

npm تشغيل dev

يمكنك إضافة أطر مثل React ، باستخدام إضافة أسترو. إذا تم تثبيت كل شيء بشكل صحيح ، يمكنك فتح المضيف المحلي: 3000 على جهازك ، وسترى رسالة "مرحبًا بك في Astro".

إذا كنت لا تحب NPM ، يمكنك اختيار أخرى مدراء حزم جافا سكريبت مثل الغزل و PNPM.

تعزيز تجربة المطور مع Astro

تعمل أطر عمل الكل في واحد مثل Astro على جعل تطوير مواقع الويب السريعة أكثر سلاسة قدر الإمكان. إنها طبيعة رائعة لا تراعي واجهة المستخدم مما يعني أنه يمكنك العمل مع أي إطار عمل JavaScript شائع من اختيارك دون أي متاعب.