استخدام الأجزاء المعاد استخدامها والتخطيطات في EJS في Express.js

Hassan Alzahrani

7 أشهر ago

استخدام الأجزاء المعاد استخدامها والتخطيطات في EJS في Express.js

في تطوير الويب، يعد استخدام الأجزاء المعاد استخدامها والتخطيطات إستراتيجية مهمة لتقليل التكرار وزيادة الكفاءة في الكود.

محرك القوالب EJS يوفر طريقة ممتازة لإنشاء أجزاء قابلة للإعادة وتخطيطات يمكن استدعاؤها في صفحات متعددة. هذا النهج لا يسهّل فقط صيانة المشروع وتحديثه، بل يجعل الكود أكثر نظامية ووضوحًا.

أجزاء قابلة للإعادة (Partials)

الأجزاء هي قوالب فرعية تستخدم لعزل وإعادة استخدام أقسام معينة من HTML في صفحات متعددة، مثل الرؤوس (headers)، أشرطة التنقل (navigation bars)، وأقدام الصفحة (footers).

مثال على إنشاء جزء قابل للإعادة لشريط التنقل:

أولًا، يُنشأ ملف EJS داخل مجلد الأجزاء (عادةً ما يُسمى partials) بالمشروع:

partials/navbar.ejs:

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

ثم يمكن إدراج هذا الجزء في أي صفحة EJS باستخدام تاج <%- include('partials/navbar') %>.

views/index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<body>
    <%- include('partials/navbar') %>
    <h1>Welcome to the Home Page</h1>
</body>
</html>

التخطيطات (Layouts)

التخطيطات هي قوالب تُستخدم لتحديد الهيكل العام للصفحة. تسمح التخطيطات بتعريف الأجزاء المشتركة بين صفحات متعددة، مثل هيكل <head>، والرؤوس، وأقدام الصفحة.

مثال على تخطيط في EJS:

يمكن إنشاء ملف تخطيط أساسي يشمل الأجزاء الشائعة ويترك مساحة لإدراج المحتوى المحدد لكل صفحة.

views/layout.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <%- include('partials/navbar') %>
    <%- body %>
    <footer>
        <p>© 2023 Company Name. All rights reserved.</p>
    </footer>
</body>
</html>

في كل صفحة، يمكن تعيين العنوان وتمرير محتوى الجسم كمتغيرات إلى التخطيط.

views/home.ejs:

<% 
var title = 'Home Page';
var body = '<h1>Welcome to the Home Page</h1>';
%>
<%- include('layout', {title: title, body: body}) %>

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

دروس الدورة التعليمية لـ Express.js