🏷️ ⭐ مميز

Nunjucks

محرك قوالب قوي (Powerful Template Engine) مستوحى من Jinja2

★ ★ ★ ★ ★ (4/5)

👁️ 5 مشاهدة

📅 02 Jul 2026

🌐 عام

مستوى الخبرة المطلوب:

🌱 مبتدئ ⚡ متوسط 🚀 محترف 🏢 مؤسسي

🔗 زيارة الموقع الرسمي

★ ★ ★ ★ ★

تقييم المستخدمين

التصنيف 🏷️ HTML

المشاهدات 5

تاريخ الإضافة 02/07/2026

آخر تحديث 02/07/2026

📋 محتويات الصفحة

📖 الوصف 🎯 يستخدم في ✨ المميزات ⚠️ العيوب 🔄 البدائل 💻 مثال

📖 الوصف

Nunjucks هو محرك قوالب تطويرته Mozilla، مستوحى من Jinja2 (Python). يُقدم ميزات متقدمة للوراثة (Inheritance)، التضمين (Includes)، الماكروز (Macros)، والتحكم الكامل بسير العمل. يعمل على العميل والخادم (Node.js). يُعتبر Nunjucks من أقوى محركات القوالب في عالم JavaScript. يدعم الفلاتر (Filters)، الاختص...

🎯 يستخدم في

مجالات استخدام هذه الأداة

•

بناء مواقع ثابتة (Static Sites)

•

قوالب Express.js

•

توليد صفحات HTML ديناميكية

•

بناء مكونات قابلة لإعادة الاستخدام

•

Static Site Generators (Hexo

•

Fractal)

✨ المميزات

أبرز مميزات هذه الأداة

✓

وراثة قوية (Template Inheritance) - الأقوى في JS

✓

Macros قابلة لإعادة الاستخدام (مثل Functions)

✓

Filters متقدمة لتحويل البيانات

✓

Asynchronous Rendering - تحميل بيانات غير متزامن

✓

Works على العميل والخادم

✓

Whitespace Control - تحكم في المسافات

✓

Raw Blocks - منع معالجة أجزاء

✓

Autoescaping افتراضياً - آمن من XSS

✓

Custom Extensions - إضافات مخصصة

✓

مجتمع نشط ودعم واسع

⚠️ العيوب

نقاط يجب مراعاتها

أكثر تعقيداً من Handlebars للمبتدئين

حجم أكبر من محركات قوالب بسيطة

أداء أبطأ قليلاً في بعض الحالات

لا يستخدم في React/Vue (يستخدمون syntax خاص)

بعض الميزات المتقدمة تحتاج تعلم

توثيق قد يكون مربكاً في بعض الأجزاء

🔄 البدائل

أدوات بديلة يمكنك استخدامها

Handlebars

EJS

Pug

Jinja2

💻 مثال على الاستخدام

كيفية استخدام هذه الأداة

Example Code

{# layout.html - القالب الأساسي #}
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}الموقع{% endblock %}</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <nav>
      {% for item in navigation %}
        <a href="{{ item.url }}" {% if item.active %}class="active"{% endif %}>
          {{ item.label }}
        </a>
      {% endfor %}
    </nav>
  </header>

  <main>
    {% block content %}{% endblock %}
  </main>

  <footer>
    <p>&copy; {{ year }} - جميع الحقوق محفوظة</p>
  </footer>
</body>
</html>

{# index.html -extends layout #}
{% extends "layout.html" %}

{% block title %}الرئيسية - الموقع{% endblock %}

{% block content %}
  <div class="container">
    <h1>{{ pageTitle }}</h1>

    {# Macaro قابل لإعادة الاستخدام #}
    {% macro userCard(user, highlighted=false) %}
      <div class="card {% if highlighted %}highlighted{% endif %}">
        <h3>{{ user.name }}</h3>
        <p>{{ user.email }}</p>
        <span class="badge">{{ user.role | capitalize }}</span>
      </div>
    {% endmacro %}

    {# التكرار #}
    <div class="users">
      {% for user in users %}
        {{ userCard(user, loop.first) }}
      {% else %}
        <p class="empty">لا يوجد مستخدمين</p>
      {% endfor %}
    </div>

    {# الشروط المتقدمة #}
    {% if users | length > 10 %}
      <p>يوجد {{ users | length }} مستخدم</p>
    {% elif users | length > 0 %}
      <p>يوجد عدد قليل من المستخدمين</p>
    {% endif %}

    {# Filters #}
    <p>{{ description | truncate(100) }}</p>
    <p>{{ date | datesince }}</p>
    <p>{{ price | currency('EUR') }}</p>

    {# Includes #}
    {% include "partials/sidebar.html" %}
  </div>
{% endblock %}