htmlgoddess
إطار عمل بسيط لإنشاء موقع ويب كما في عام 1999.
متطلبات
- جهاز كمبيوتر متصل بالإنترنت ومحرر نصوص ومتصفح ويب
- npm
ابدء
- فتح المحطة
-
npm install -g @htmlgoddess/cli
سيؤدي هذا إلى تثبيت الأداة المساعدة لسطر الأوامر. -
htmlgoddess create path/to/your/new/site - اتبع المطالبات ويجب أن تكون جاهزًا للعمل في أي وقت من الأوقات.
للقيام
- إعادة البناء: عزل الاختبارات.
- إضافة: أمر "المضيف".
- إضافة: أمر اختيار النمط للسماح للمستخدم بتغيير المظهر بعد الإنشاء.
- الفذ: المدقق الإملائي.
- الفذ: ربط الالتزام التلقائي للتشغيل عند الالتزام.
- الفذ: أوامر التدقيق.
- الفذ: أمر "المجال".
- الفذ: قابل للتنزيل وقابل للتنفيذ.
- refactor: قم بتبديل CNAME بتكوين yaml للاستضافة.
- المهمة: التغطية
- تحويل "المستندات" إلى متغيرات قابلة للتكوين
- المهمة: التأكد من أن المراقب لا يسرب الذاكرة.
- الخطأ: لا يزال cli.action يُخرج إلى وحدة التحكم أثناء الاختبارات.
- الفذ: واجهة المستخدم الرسومية
أنا لا أعرف أي HTML
وهذا موافق. شاهد هذا الفيديو للبدء.
قائمة سطر الأوامر
عند تشغيل npm start وسيعطيك الخيارات التالية.
كيف يعمل
- يتم تجميع (طباعة) الملفات الموجودة في المجلد "src" إلى ملفات HTML ثابتة في المجلد "docs".
- يحتوي مجلد
src/templates على القوالب. يتم تجميعها مع مجلد المحتوى لإنشاء صفحات HTML الثابتة الخاصة بك. - يحتوي مجلد
src/content على محتوى موقعك، والذي يتم حفظه في ملفات html التي تمثل أجزاء من تعليمات HTML البرمجية. - عندما تقوم بتشغيل
npm run print (أو تحديد طباعة من القائمة الطرفية)، فسوف يقوم بتجميع المحتوى والقوالب الخاصة بك في ملفات HTML ثابتة وإعادة إنشاء مجلد المستندات. (ملاحظة: تتم الكتابة فوق كل شيء في المستندات، لذا احفظ المحتوى في دليل src فقط!) - يمكنك اختبار موقعك محليًا عن طريق تشغيل أمر "الخدمة" من القائمة.
- عندما تكون مستعدًا لنشر موقعك، ما عليك سوى إجراء
npm run save && npm run publish - يمكنك بعد ذلك توجيه خادم الويب الخاص بك إلى "docs" سواء كان Apache أو git pages أو nginx أو أي شيء آخر.
- يمكنك إضافة أي ورقة أنماط تستهدف عناصر HTML العادية ويجب أن تعمل :)
قوالب
- العلامات الموجودة في القالب والتي يتم إغلاقها ذاتيًا مثل
<head /> أو <main /> ستبحث عن ملفات القالب المطابقة لنفس الاسم؛ إما دليل يحتوي على فهرس html مثل main/index.html أو ببساطة ملف main.html- لا يجب أن تكون العلامات HTML قياسية. إذا قمت بإنشاء قالب foo.html في مجلد القوالب، فيمكنك تضمين علامة
<foo /> وستحل محل محتويات foo. - يعد تجميع القالب متكررًا بحيث يمكنك استخدام القوالب داخل القوالب، ومع ذلك، يجب أن تكون القوالب المتداخلة عبارة عن ملفات مضمنة داخل القالب الأصلي أو بجواره. وإلا فسيتم تجاهله فقط.
- تعتبر العلامة
<content/> علامة خاصة وستقوم إما بسحب قالب يحمل نفس اسم الملف (مع dir) أو القالب الرئيسي ('templates/index.html). - عندما تقوم بإنشاء الصفحات التي تريدها في المحتوى dir. ستظهر الأدلة المتعلقة بذلك في موقعك بنفس المسار. يسمح هذا الهيكل بالتنظيم الذاتي للمجلدات وعناوين URL.
قيود
- لا شبيبة
- لا توجد سمات باستثناء href الأساسي وما إلى ذلك.
- لا توجد فصول دراسية. هذا هو ما يسمح لك بإضافة أي ورقة أنماط تستهدف Vanilla CSS
- لا يوجد SASS/SCSS/أقل. لا ينبغي أن يكون هذا ضروريًا مع عناصر HTML البسيطة
- لا يوجد رد فعل أو Angular أو أي شيء آخر.
- أم لا، يمكنك اختراق أي شيء تريده.
فلسفة
تم تصميم لغة HTML لتكون بسيطة، ولكي يتمكن الأشخاص العاديون من إنشاء الأشياء واستهلاكها على الإنترنت. يعد الويب رائعًا جدًا اليوم ولكنه أصبح أيضًا معقدًا للغاية ويترك الكثير من الأشخاص خلفه. يعود نظام إدارة المحتوى هذا إلى الأساسيات لمنح الأشخاص طريقة للتعبير عن أنفسهم بحرية وسهولة.
- ويحاول الإطار الاستفادة من أكبر قدر ممكن من التكنولوجيا والمعايير الحالية.
- يتم استخدام HTML في كل شيء (كما أمرت آلهة HTML) بدلاً من علامات القالب الخاصة وغيرها من بناء الجملة الخاص. يبحث نظام القوالب عن علامات HTML ذاتية الإغلاق ويستبدلها بالقوالب أو المحتوى المرتبط بها.
- يتم الاستفادة من نظام الملفات في كل من قوالب البحث/التسمية وتوجيه عناوين URL.
- يعمل Git كقاعدة بيانات فعلية لنظام إدارة المحتوى (CMS) إلى جانب ملفات HTML الموجودة في المحتوى والقوالب.
- "يطبع" الموقع إلى مجلد "docs"، ثم "ينشر" إلى git، حيث يمكنك إعداد صفحات github. إنه لا يعرف خادم الويب حتى تتمكن بالفعل من أخذ الملفات الموجودة في مجلد المستندات ووضعها في أي مكان تريده وتوجيه خادم الويب إليها.
- المقصود من العلامات ألا تحتاج إلى فئات أو سمات. يسمح هذا بإسقاط السمات الجديدة بسلاسة. يمكنك التفكير في Vanilla HTML كواجهة لتطبيق التصميم.
- لا يُنصح باستخدام JavaScript لأنه لا ينبغي أن يكون ضروريًا، على الرغم من عدم وجود شيء في إطار العمل يمنعك من استخدامه.
- يمكنك تجاهل كل ما كتبته للتو وتفعل ما تريد. إنه الإنترنت!
القضايا المتكررة
- التبعيات تتصرف بشكل غريب:
تقوم Lerna ببعض الأشياء تحت الغطاء لربط التبعيات. إذا قمت بتثبيت وحدة نمطية جديدة وتوقفت الأمور عن العمل، فجرّب lerna bootstrap من الجذر. - دليل الاختبار لا يتم تنظيفه. إذا فشل الاختبار، فقد يمنع ذلك دليل الاختبار من التنظيف. في هذه الحالة، قم بتشغيل
npm run clean-test-dir والذي سيؤدي إلى إزالته يدويًا.
المساهمة
- قم بإجراء الاختبارات في الحزم/cli للتأكد من أن كل شيء على ما
npm run test - قم بتنفيذ التغييرات على
npm run commit واتبع المطالبات - lerna Publish --force-publish سيتم نشر هذا على NPM بالإضافة إلى دفع العلامة إلى git
