بناء موقع ثابت بمكونات باستخدام النونجكس
نشرت: 2022-03-10إنها تحظى بشعبية كبيرة هذه الأيام ، وأجرؤ على قول فكرة رائعة ، لبناء مواقع بمكونات. بدلاً من إنشاء صفحات كاملة واحدة تلو الأخرى ، نقوم ببناء نظام من المكونات (فكر في: نموذج بحث ، بطاقة مقالة ، قائمة ، تذييل) ثم نقوم بتجميع الموقع مع هذه المكونات.
تؤكد أطر عمل JavaScript مثل React و Vue على هذه الفكرة بشدة. ولكن حتى إذا لم تستخدم أي JavaScript من جانب العميل على الإطلاق لإنشاء موقع ، فهذا لا يعني أنه يجب عليك التخلي عن فكرة البناء باستخدام المكونات! باستخدام معالج أولي لـ HTML ، يمكننا بناء موقع ثابت مع الاستمرار في الحصول على جميع فوائد تجريد موقعنا ومحتوياته إلى مكونات قابلة لإعادة الاستخدام.
المواقع الثابتة هي كل الغضب هذه الأيام ، وهي محقة في ذلك ، لأنها سريعة وآمنة وغير مكلفة لاستضافتها. حتى مجلة Smashing هي موقع ثابت ، صدق أو لا تصدق!
دعنا نتجول في موقع أنشأته مؤخرًا باستخدام هذه التقنية. لقد استخدمت مشاريع CodePen لإنشائه ، والذي يقدم Nunjucks باعتباره معالجًا أوليًا ، والذي كان مناسبًا تمامًا للوظيفة.
موقع من أربع صفحات يحتوي على رأس وتنقل وتذييل متسق
هذا موقع مصغر. لا يحتاج إلى CMS كامل للتعامل مع مئات الصفحات. لا يحتاج إلى JavaScript للتعامل مع التفاعل. لكنها تحتاج إلى عدد قليل من الصفحات التي تشترك جميعها في نفس التنسيق.
HTML وحدها ليس لديها حل جيد لهذا. ما نحتاجه هو الواردات . تجعل لغات مثل PHP هذا أمرًا بسيطًا باستخدام أشياء مثل <?php include "header.php"; ?> <?php include "header.php"; ?> ، لكن مضيفات الملفات الثابتة لا تشغل PHP (عن قصد) و HTML وحدها لا تساعد. لحسن الحظ ، يمكننا أن تشمل المعالجة المسبقة مع Nunjucks.
من المنطقي تمامًا هنا إنشاء تخطيط ، بما في ذلك أجزاء HTML التي تمثل الرأس والتنقل والتذييل. يحتوي قالب Nunjucks على مفهوم الكتل ، والذي يسمح لنا بفتح المحتوى في تلك البقعة عند استخدام التصميم.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Power of Serverless</title> <link rel="stylesheet" href="/styles/style.processed.css"> </head> <body> {% include "./template-parts/_header.njk" %} {% include "./template-parts/_nav.njk" %} {% block content %} {% endblock %} {% include "./template-parts/_footer.njk" %} </body> لاحظ أن الملفات التي تم تضمينها تحمل اسم _file.njk . هذا ليس ضروريًا تمامًا. يمكن أن تكون header.html أو icons.svg ، ولكن تمت تسميتها بهذا الشكل لأن 1) الملفات التي تبدأ بشرطة سفلية هي طريقة معيارية للقول بأنها جزئية. في مشاريع CodePen ، هذا يعني أنها لن تحاول أن يتم تجميعها بمفردها. 2) من خلال تسميته .njk ، يمكننا استخدام المزيد من عناصر Nunjucks هناك إذا أردنا ذلك.
لا تحتوي أي من هذه البتات على أي شيء مميز فيها على الإطلاق. إنها مجرد أجزاء صغيرة من HTML المقصود استخدامها في كل صفحة من صفحاتنا الأربع.
<footer> <p>Just a no-surprises footer, people. Nothing to see here.<p> </footer>وبهذه الطريقة ، يمكننا إجراء تغيير واحد وإظهار التغيير في جميع الصفحات الأربع.
استخدام التخطيط للصفحات الأربع
الآن يمكن أن تكون كل صفحة من صفحاتنا الأربع ملفًا. لنبدأ فقط بـ index.njk على الرغم من أنه في CodePen Projects ، ستتم معالجته تلقائيًا وإنشاء ملف index.html في كل مرة تقوم فيها بالحفظ.
إليك ما يمكننا وضعه في index.njk لاستخدام التنسيق وإفلات بعض المحتوى في تلك الكتلة:
{% extends "_layout.njk" %} {% block content %} <h1>Hello, World!</h1> {% endblock %}هذا سوف يشتري لنا صفحة رئيسية تعمل بكامل طاقتها! لطيف - جيد! يمكن لكل صفحة من الصفحات الأربع أن تفعل الشيء نفسه بالضبط ، ولكن بوضع محتوى مختلف في الكتلة ، ولدينا موقع صغير من أربع صفحات يسهل إدارته.
للتسجيل ، لست متأكدًا من أنني سأسمي هذه الأجزاء الصغيرة التي نعيد استخدام المكونات . نحن فقط نقوم بالكفاءة ونقسم التخطيط إلى أجزاء. أعتقد أن عنصرًا يشبه إلى حد كبير قطعة قابلة لإعادة الاستخدام تقبل البيانات وتخرج نسخة فريدة من نفسها مع تلك البيانات. سنصل إلى ذلك.
جعل التنقل النشط
الآن بعد أن كررنا جزءًا متطابقًا من HTML في أربع صفحات ، هل من الممكن تطبيق CSS فريد على عناصر التنقل الفردية لتحديد الصفحة الحالية؟ يمكننا باستخدام JavaScript والنظر إلى window.location وما شابه ، لكن يمكننا القيام بذلك بدون JavaScript. الحيلة هي وضع class على <body> فريدة لكل صفحة واستخدامها في CSS.
في _layout.njk لدينا إخراج الجسم لاسم فئة كمتغير:
<body class="{{ body_class }}">ثم قبل أن نطلق على هذا التنسيق في صفحة فردية ، قمنا بتعيين هذا المتغير:
{% set body_class = "home" %} {% extends "_layout.njk" %}دعنا نقول أن التنقل الخاص بنا كان منظمًا مثل
<nav class="site-nav"> <ul> <li class="nav-home"> <a href="/"> Home </a> ...يمكننا الآن استهداف هذا الرابط وتطبيق نمط خاص حسب الحاجة عن طريق القيام بما يلي:
body.home .nav-home a, body.services .nav-services a { /* continue matching classes for all pages... */ /* unique active state styling */ } 
أوه وتلك الرموز؟ هذه مجرد ملفات .svg فردية أضعها في مجلد وضمنتها مثل
{% include "../icons/cloud.svg" %}وهذا يسمح لي بتصميمها مثل:
svg { fill: white; } بافتراض أن عناصر SVG بالداخل لا تحتوي على سمات fill بالفعل.
تأليف المحتوى في Markdown
تحتوي الصفحة الرئيسية لموقعي المصغر على جزء كبير من المحتوى عليها. يمكنني بالتأكيد كتابة ذلك والحفاظ عليه في HTML نفسه ، ولكن في بعض الأحيان يكون من الجيد ترك هذا النوع من الأشياء لـ Markdown. Markdown تبدو الكتابة أكثر نظافة وربما يكون من الأسهل النظر إليها عندما يكون هناك الكثير من النسخ.
هذا سهل جدا في مشاريع CodePen. لقد أنشأت ملفًا ينتهي .md ، والذي ستتم معالجته تلقائيًا إلى HTML ، ثم أدرجه في ملف index.njk .
{% block content %} <main class="centered-text-column"> {% include "content/about.html" %} </main> {% endblock %}بناء المكونات الفعلية
دعنا نعتبر المكونات وحدات قابلة للتكرار يتم تمريرها في البيانات لإنشاء نفسها. في أطر مثل Vue ، ستعمل مع مكونات ملف واحد عبارة عن أجزاء معزولة من HTML المقولب ، و CSS محدد النطاق ، وجافا سكريبت الخاصة بالمكون. هذا رائع للغاية ، لكن موقعنا المصغر لا يحتاج إلى أي شيء يتوهم.
نحتاج إلى إنشاء بعض "البطاقات" بناءً على نموذج بسيط ، حتى نتمكن من إنشاء أشياء مثل هذا:
يتضمن بناء مكون قابل للتكرار مثل ذلك في Nunjucks استخدام ما يسمونه وحدات الماكرو. وحدات الماكرو بسيطة بشكل لذيذ. إنهم يشبهون كما لو أن HTML لها وظائف !
{% macro card(title, content) %} <div class="card"> <h2>{{ title }}</h2> <p>{{ content }}</p> </div> {% endmacro %}ثم تسميها حسب الحاجة:
{{ card('My Module', 'Lorem ipsum whatever.') }}الفكرة كلها هنا هي فصل البيانات والترميز . يمنحنا هذا بعض الفوائد الواضحة والملموسة:
- إذا احتجنا إلى إجراء تغيير على HTML ، فيمكننا تغييره في الماكرو ويتم تغييره في كل مكان يستخدم هذا الماكرو.
- البيانات ليست متشابكة في الترميز
- يمكن أن تأتي البيانات من أي مكان! نقوم بترميز البيانات بشكل صحيح في المكالمات إلى وحدات الماكرو كما فعلنا أعلاه. أو يمكننا الإشارة إلى بعض بيانات JSON والتكرار فوقها. أنا متأكد من أنه يمكنك حتى تخيل إعداد تأتي فيه بيانات JSON من نوع من CMS مقطوعة الرأس ، أو عملية بناء ، أو وظيفة بدون خادم ، أو وظيفة cron ، أو أي شيء آخر.
الآن لدينا هذه البطاقات القابلة للتكرار التي تجمع بين البيانات والترميز ، فقط ما نحتاجه:
اصنع العديد من المكونات كما تريد
يمكنك أن تأخذ هذه الفكرة وتعمل بها. على سبيل المثال ، تخيل كيف أن Bootstrap هو في الأساس مجموعة من CSS التي تتبعها أنماط HTML لاستخدامها. يمكنك جعل كل من هذه الأنماط ماكرو واستدعائها حسب الحاجة ، مع تكوين إطار العمل بشكل أساسي.
يمكنك وضع مكونات متداخلة إذا أردت ، مع تبني نوع من فلسفة التصميم الذري. تقدم Nunjucks أيضًا المنطق ، مما يعني أنه يمكنك إنشاء مكونات وتنوعات شرطية بمجرد تمرير بيانات مختلفة.
في الموقع البسيط الذي أنشأته ، صنعت ماكروًا مختلفًا لقسم الأفكار بالموقع لأنه تضمن بيانات مختلفة قليلاً وتصميم بطاقة مختلف قليلاً.
قضية سريعة ضد المواقع الثابتة
قد أزعم أن معظم المواقع تستفيد من بنية قائمة على المكونات ، لكن بعض المواقع فقط هي المناسبة لكونها ثابتة. أنا أعمل على الكثير من المواقع التي يكون فيها وجود لغات خلفية مناسبة ومفيدة.
يحتوي أحد مواقعي ، CSS-Tricks ، على أشياء مثل تسجيل دخول المستخدم بنظام أذونات معقد إلى حد ما: المنتديات والتعليقات والتجارة الإلكترونية. في حين أن أياً من هذه الأشياء لا يوقف فكرة العمل بشكل ثابت تمامًا ، إلا أنني سعيد في كثير من الأحيان لأن لدي قاعدة بيانات ولغات خلفية للعمل بها. إنها تساعدني في بناء ما أحتاجه وتبقي الأشياء تحت سقف واحد.
انطلق بعيدًا واحتضن الحياة الساكنة!
تذكر أن إحدى مزايا البناء بالطريقة التي فعلناها في هذه المقالة هي أن النتيجة النهائية هي مجرد مجموعة من الملفات الثابتة. سهل الاستضافة وسريع وآمن. ومع ذلك ، لم يكن علينا التخلي عن العمل بطريقة صديقة للمطورين. سيكون هذا الموقع سهل التحديث والإضافة إليه في المستقبل.
- المشروع النهائي هو موقع مصغر يسمى The Power of Serverless لمطوري الواجهة الأمامية (https://thepowerofserverless.info/).
- استضافة الملفات الثابتة ، إذا سألتني ، هي جزء من الحركة بدون خادم.
- يمكنك رؤية كل الكود (وحتى تفرع نسخة لنفسك) مباشرة على CodePen. تم بناؤه وصيانته واستضافته بالكامل على CodePen باستخدام مشاريع CodePen.
- تتعامل مشاريع CodePen مع جميع عناصر Nunjucks التي تحدثنا عنها هنا ، وكذلك أشياء مثل معالجة Sass واستضافة الصور ، والتي استفدت منها للموقع. يمكنك تكرار نفس الشيء ، على سبيل المثال ، باستخدام عملية بناء تعتمد على Gulp أو Grunt محليًا. إليك مشروع معياري مثل هذا يمكنك تدويره.