zola vite demo

عرض زولا + فيت

هذا عرض توضيحي بسيط يوضح كيف يمكنك ربط Zola مع Vite بدقة بدون مكونات إضافية خاصة.

• Zola هو منشئ مواقع ثابتة بسيط وذكي يستخدم محرك قالب Tera مع بناء جملة يشبه Jinja2/Twig.
• Vite هي أداة إنشاء واجهة أمامية مشابهة لـ Webpack، ولكنها أسهل في التكوين.

يرجى ملاحظة أن هذا ليس مشروعًا أوليًا أو نموذجيًا.

في هذا العرض:

• Zola هو المسؤول عن معالجة HTML، Vite هو المسؤول عن معالجة JS وSASS. إذا كنت تفضل أن يقوم Zola بمعالجة SASS بدلاً من Vite، فمن السهل تكوين ذلك (راجع مستندات Zola وتعليقي في main.js).
• تعمل خوادم تطوير Zola وVite جنبًا إلى جنب.
• يعمل التحديث السريع على أكواد HTML وJS وSASS.
• تتوفر الأوامر عبر npm run (راجع package.json).
• يتم تصغير بنيات الإنتاج: يقوم Zola بتصغير HTML، بينما يقوم Vite بتصغير JS وCSS.

كيفية الاستخدام

1. استنساخ الريبو والقرص cd في الدليل.
2. قم بتشغيل npm install لتثبيت التبعيات.
3. قم بتشغيل npm run dev لتشغيل خوادم Zola وVite dev.
4. افتح http://127.0.0.1:1111/ في متصفحك. من المفترض أن تشاهد صفحة تقول "مرحبًا بك في العرض التوضيحي لـ Zola + Vite" و Hello world! في وحدة تحكم المتصفح (كما في لقطة الشاشة أعلاه).
5. قم بإجراء بعض التغييرات على templates/index.html أو js/main.js أو sass/main.scss . يجب أن يتم تحديث الصفحة الموجودة على http://127.0.0.1:1111/ على الفور مع ظهور التغييرات التي أجريتها عليها.
6. قم بتشغيل npm run build للإنشاء لاستخدام الإنتاج (ستنتقل الملفات إلى الدليل public/ ).

القضايا المعروفة

1. لم أختبر العرض التوضيحي على Windows.
2. تقول مستندات Vite أن إدخالها يجب أن يتضمن import 'vite/modulepreload-polyfill' ، لكنني لست متأكدًا تمامًا من الغرض منه (راجع main.js).
3. إذا كان http://localhost:3000/@vite/client يمنحك 404، فستحتاج إلى فتح http://127.0.0.1:1111/ أولاً. إذا كان لا يزال لا يعمل، راجع هذا.

اقتراحات، أسئلة؟

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