دليلك الشامل لاستخدام EJS Templating في تطبيقات Node.js

9 min read Aldawsari
دقائق القراءة: 9

يُعد EJS (Embedded JavaScript) محرك قوالب قويًا ومرنًا يتيح لك دمج البيانات مع القوالب لإنتاج محتوى HTML ديناميكي. يتميز EJS بسهولة الاستخدام وقدرته على إعادة استخدام المكونات، مما يجعله خيارًا ممتازًا لتطوير تطبيقات الويب باستخدام Node.js. من أبرز ميزاته هي الأجزاء المشتركة (Partials)، التي تمكنك من تعريف جزء من المحتوى مرة واحدة ثم استخدامه في أي صفحة داخل تطبيقك.

في هذا المقال، سنستعرض كيفية إنشاء تطبيق Node.js بسيط يستخدم EJS كمحرك قوالب. سنقوم ببناء صفحتين لموقع ويب (صفحة رئيسية وصفحة “حول”)، وسنستخدم الأجزاء المشتركة لإنشاء أقسام الرأس (head)، والتنقل (navigation)، والتذييل (footer)، والمحتوى.

هيكلية الملفات

سنقوم بإنشاء تطبيق نموذجي يحتوي على صفحتين: index و about. إليك الهيكلية المقترحة للملفات التي سنبنيها:

public
├── style.css
routes
├── index.js
views
├── pages
│   ├── about.ejs
│   └── index.ejs
└── partials
    ├── 3 columns.ejs
    ├── footer.ejs
    ├── head.ejs
    ├── nav.ejs
    └── scripts.ejs
package.json
server.js

البدء

سنبدأ بإعداد ملف package.json. سيحتوي هذا الملف على جميع الوحدات (modules) التي سنستخدمها في تطبيقنا. سنحتاج إلى:

  • express
  • ejs

إليك كيف سيبدو ملف package.json:

{
  "name": "node_ejs_boilerplate",
  "version": "1.0.0",
  "description": "Boilerplate showing the use of ejs as view template engine in a Node.js application",
  "main": "server.js",
  "dependencies": {
    "ejs": "^2.4.1",
    "express": "^4.13.4"
  }
}

يمكنك إضافة هذه التبعيات مباشرة إلى ملف package.json الخاص بك، أو يمكنك تثبيتها باستخدام الأمر التالي ليتم إضافتها تلقائيًا:

npm install express ejs --save

إذا قمت بإضافة التبعيات يدويًا إلى package.json، فستحتاج إلى تثبيتها باستخدام الأمر التالي:

npm install

ملف server.js

بعد تثبيت جميع التبعيات، سنقوم ببناء تطبيقنا في ملف server.js. إليك محتوى ملف server.js:

'use strict';

// ================================================================
// get all the tools we need
// ================================================================
var express = require('express');
var routes = require('./routes/index.js');
var port = process.env.PORT || 3000;

var app = express();

// ================================================================
// setup our express application
// ================================================================
app.use('/public', express.static(process.cwd() + '/public'));
app.set('view engine', 'ejs');

// ================================================================
// setup routes
// ================================================================
routes(app);

// ================================================================
// start our server
// ================================================================
app.listen(port, function() {
  console.log('Server listening on port ' + port + '...');
});

سيستمع الخادم لدينا على المنفذ المحدد في process.env.PORT، أو على المنفذ 3000 إذا لم يتم تعريفه. لقد قمنا بتعريف مجلد /public لأنه المسار الذي سنصل من خلاله إلى ملف الأنماط style.css الموجود في هذا المجلد. كما قمنا بتحديد ejs كمحرك القوالب الخاص بنا.

المسارات (Routes)

لجعل تطبيقنا يتبع هيكلية تطبيقات Node.js، قمت بوضع مسارات صفحات index و about في ملف خاص بها. هذا الملف هو index.js داخل مجلد routes. وبما أنني وضعت المسارات في مجلد منفصل، أحتاج إلى الوصول إليها عن طريق استدعائها (requiring) في ملف server.js.

لدينا مساران في تطبيقنا:

  • /: طلب GET لعرض الصفحة الرئيسية.
  • /about: طلب GET لعرض صفحة “حول”.

في المسارات، نستخدم res.render لعرض الصفحات المناسبة. يبحث أمر render افتراضيًا عن الملفات في مجلد يسمى views. نحن نعتمد على هذا الإعداد الافتراضي ونضيف فقط المسار من داخل مجلد views. إليك محتوى ملف index.js في مجلد routes:

'use strict';

module.exports = function(app) {
  app.get('/', function(req, res) {
    res.render('pages/index');
  });

  app.get('/about', function(req, res) {
    res.render('pages/about');
  });
};

إعداد الأجزاء المشتركة (Partials)

لتطبيقنا النموذجي، سنقوم بتنفيذ أربعة أجزاء مشتركة رئيسية:

  • head: يحتوي على العناصر الموجودة في قسم <head> لصفحة الويب.
  • nav: شريط التنقل الذي سيتم عرضه في كل صفحة.
  • footer: تذييل ثابت مع رابط.
  • scripts: تحميل السكربتات مثل jQuery و Bootstrap.
  • 3columns: محتوى خاص بالصفحة الرئيسية.

توفر الأجزاء المشتركة سهولة في صيانة الكود. على سبيل المثال، إذا قمت بإنشاء شريط تنقل على جميع صفحاتك، فعندما تحتاج إلى إضافة إدخال جديد إلى شريط التنقل، يجب عليك تحديث كل صفحة بهذا التغيير. ولكن مع الأجزاء المشتركة، يتم تضمين جزء التنقل في كل صفحة تتطلبه. لإضافة إدخال جديد إلى شريط التنقل، ما عليك سوى تحديث الجزء المشترك (partial) وسيتم تطبيقه تلقائيًا على كل صفحة تحتوي على جزء nav.

ملف head.ejs

<!-- views/partials/head.ejs -->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>تطبيق EJS Templating في Node.js</title>

  <!-- STYLESHEETS -->
  <!-- CSS (load bootstrap from a CDN) -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="/public/style.css">
</head>

ملف nav.ejs

<!-- views/partials/nav.ejs -->
<nav class ="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class = "container" >

    <div class ="navbar-header">
      <a class = "navbar-brand" href = "/" >
        <span class = "glyphicon glyphicon glyphicon-cog "> </span > My App
      </a >
    </div>

    <ul class ="nav navbar-nav pull-right">
      <li > <a href = "/" > Home </a > </li >
      <li > <a href = "/about" > About </a > </li >
    </ul>

  </div>
</nav>

ملف footer.ejs

<!-- views/partials/footer.ejs -->
<footer class ="footer">
  <div class = "container" >
    <p class = "text-center text-muted "> © Copyright 2023 <a href = "#"> Your Website </a > </p >
  </div >
</footer>

ملف scripts.ejs

<!-- views/partials/scripts.ejs -->

<!-- jQuery (necessary for Bootstrap’s JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap javascript file -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

ملف 3columns.ejs

<!-- views/partials/3 columns.ejs -->
<section name="content">
  <div class = "container" >
    <h2 class = "text-center" > بيانات نموذجية </h2 >
    <div class = "col-xs-12 col-md-4 ">
      <p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis. </p >
    </div >
    <div class = "col-xs-12 col-md-4 ">
      <p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis. </p >
    </div >
    <div class = "col-xs-12 col-md-4 ">
      <p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis. </p >
    </div >
  </div >
</section>

بناء الصفحات

يحتوي تطبيقنا النموذجي على صفحة رئيسية وصفحة “حول”. سنحتاج إلى إنشاء كلتا الصفحتين. في هاتين الصفحتين، سنقوم بإدراج الأجزاء المشتركة المناسبة التي أنشأناها للتو. لقد وضعنا جميع الأجزاء المشتركة في مجلد يسمى partials داخل مجلد views. سنقوم بإنشاء مجلد آخر في مجلد views يسمى pages. سيحتوي هذا المجلد على صفحاتنا الرئيسية وصفحات “حول”.

لإدراج جزء مشترك في صفحة، نستخدم هذا التنسيق:

<% include ../partials/head %>

إليك محتوى الصفحتين لدينا:

ملف index.ejs

<!DOCTYPE html>
<html lang = "en" >

<% include ../partials/head %>

<body>

<% include ../partials/nav %>

<section name="jumbotron" >
  <div class = "jumbotron text-center ">
    <h1 > تطبيق EJS و Node.js </h1 >
    <p > استخدام EJS templating مع Node.js </p >
  </div >
</section>

<% include ../partials/3 columns %>

<% include ../partials/footer %>

<% include ../partials/scripts %>

</body>

</html>

ملف about.ejs

<!DOCTYPE html>
<html lang = "en" >

<% include ../partials/head %>

<body>

<% include ../partials/nav %>

<!-- content for about page -->
<div class ="container" id="about">
  <div class="row">
    <h2 class="text-center">صفحة حول</h2>
    <div class="col-xs-12">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien eros, dictum eu malesuada sagittis, pellentesque sed enim. Donec at odio volutpat, dignissim mauris tincidunt, pharetra lorem. Fusce porta neque non lorem vulputate, et commodo dolor semper. Proin sodales lacinia nibh vel semper. Nulla sed faucibus nisi. Aliquam venenatis pellentesque tortor et fringilla. Nulla porttitor massa vitae libero volutpat, id mollis neque elementum. Integer porta, enim eu pharetra interdum, diam metus mollis purus, id ornare risus enim a magna. Sed rhoncus, nulla ac hendrerit lacinia, neque lectus iaculis ligula, et euismod erat massa sit amet orci. Ut fermentum hendrerit arcu. Vestibulum quis leo ut ante eleifend fringilla.

      Morbi maximus eu lorem sit amet tempor. Nunc dignissim lacus vel aliquet ornare. Aliquam eget turpis et nisi tincidunt rhoncus. Vestibulum interdum interdum aliquet. Phasellus quis erat est. Pellentesque molestie pretium quam in fermentum. Maecenas eu luctus turpis, euismod feugiat risus. Integer scelerisque cursus tempor. Phasellus in bibendum tortor.

      Aenean vitae lorem augue. Cras ultricies posuere vestibulum. Integer non felis porttitor mi ultricies pretium. Sed vitae nisi accumsan, maximus lorem sed, malesuada quam. Nunc lacus est, elementum vel ultrices sit amet, suscipit eu nibh. Maecenas vel facilisis leo, id congue sem. In hac habitasse platea dictumst. Aenean est lorem, hendrerit sit amet rutrum ac, sodales eget neque. Pellentesque hendrerit, risus in bibendum varius, purus tellus accumsan leo, et suscipit lorem nulla non arcu.</p>
    </div>

  </div>
</div><!-- end of content -->

<% include ../partials/footer %>

<% include ../partials/scripts %>

</body>
</html>

تشغيل التطبيق

لتشغيل التطبيق، أدخل الأمر التالي في سطر الأوامر:

node server.js

عند بدء تشغيل تطبيقنا، سيعرض الصفحة الرئيسية. بالنقر على رابط “About” في شريط التنقل، ستنتقل إلى صفحة “حول”.

💡 الخلاصة التقنية

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *