skeleventy

هيكل عظمي بضعين بداية

يمنحك Skeleventy أساسًا صخريًا متينًا لبناء مواقع ثابتة سريعة ويمكن الوصول إليها. عرض الموقع التجريبي.

سمات

• خط أنابيب نظيف ، الحد الأدنى مع SCSS ومزيج Laravel لتجميع الأصول
• Gorko ، مولد فئة فئة من فئة الأداة المساعدة الصغيرة الذكية
• Purgecss لإزالة CS غير المستخدمة
• HTML Minifier
• يدعم ES2017 JavaScript ، مع تجميع بابل
• صفحة SEO الودية meta ، بما في ذلك الرسم البياني المفتوح و Twitter
• صورة التحميل كسول
• التنقل عبر الهاتف المحمول
• XML Sitemap
• مدونة نظيفة وبسيطة ، مع فئات وصور مميزة

ابدء

المتطلبات الأساسية

العقدة v10+

تثبيت

1. استنساخ repo git clone https://github.com/josephdyer/skeleventy.git
2. cd مضغوط في مجلد المشروع npm install
3. ابدأ خادم التطوير المحلي عن طريق تشغيل npm run dev Tip: Tiveenty لديه إعادة تحميل مباشرة!

هيكل المجلد

انتفاخ

• site/ يحتوي على جميع البيانات العالمية والقوالب والمحتوى
• utilities/ تحتوي على filters transforms
• يجب أن يكون لكل صفحة مجلد خاص به يحتوي على ملف index.md
• يمكنك بعد ذلك اختيار التصميم الأنسب لكل صفحة (أو إنشاء المزيد إذا كنت بحاجة إلى)
• يتم تشغيل الملاحة بواسطة البرنامج المساعد الرسمي لـ Everten

أصول

• css/ ل CSS المترجمة
• js/ لتجميع JavaScript
• images/ تحتوي على صور موقعنا ، وعفنة رمز SVG ومجلد لصور META (OG ، Twitter إلخ)

خط أنابيب البناء

يمنحنا Laravel Mix طبقة API لطيفة على رأس Webpack. يستخدم SkeLeventy إعدادًا مبسطًا ، ولكن يمكنك الاستفادة من تمديد المزيج مع تكوينات WebPack المخصصة وتقسيم التعليمات البرمجية والإضافات مثل postcss ، إذا كنت ترغب في ذلك.

ستجد SCSS و JS غير المنقوسين في الموقع ضمن resources/ حيث ستشاهد Mix هذه الدلائل لأي تغييرات. نصيحة: من الأفضل إعادة تشغيل الخادم دائمًا عند إنشاء أي جزء أو مجلدات جديدة

SCSS

• يتم تنظيم scss/ في مجلدات فرعية
• ملف _config.scss هو المكان الذي يمكنك فيه تغيير ألوان الموقع وفئات الأداة المساعدة التي تم إنشاؤها بواسطة Gorko
• تم بالفعل إعداد مقياس الطباعة باستخدام المقياس الثالث المفضل الخاص بي.
• نصيحة: لمزيد من المقاييس ، تحقق من مقياس النوع

غوركو

قررت إزالة الريح Tailwind لصالح Gorko ، بحتة بساطته وقابليته للصيانة (خاصة للمطورين الجدد). عدم وجود الكثير لتبدأ مع ما تحتاجه وإضافته ، سيؤدي إلى قاعدة كود أكثر بساطة وأكثر قابلية للصيانة. يتيح لك Gorko إضافة مجموعة من فصول الأداة المساعدة القابلة لإعادة الاستخدام للمساعدة في الحفاظ على الكود الخاص بك جافًا. الفضل في آندي بيل لصنع هذه الأداة الصغيرة مفيدة

جافا سكريبت

• utilities/ تحتوي على أي فائدة عالمية/ وظائف مساعد
• modules/ تحتوي على javaScript الفعلي لموقعك ، وكلها أبقى أنيق ومرتب ضمن المجلدات الفرعية المعيارية لكل منها
• يمكنك استيراد هذه المجلدات الفرعية إلى main.js باستخدام import '@modules/example-module'
• نصيحة: يمكنك إعداد الأسماء المستعارة للاستيراد الاختيارية عبر ملف webpack.mix.js

ملاحظة على الصور المستجيبة

Skeleventy ليس لديه صور مستجيبة مخبوزة ، والسبب الرئيسي هو: من الأفضل استخدام CDN. تحقق من هذا البرنامج التعليمي على إعداد 15 و CleeDinary.