Skip to main content

Layouts

Layouts define the HTML shell that wraps all pages. They include shared elements like <head>, external libraries, and template slots.

Layout Files​

layouts/
└── layout.njk    # Main layout template

You can create multiple layouts (e.g., layout.njk, landing.njk, checkout.njk) and reference them in page JSON files.

Key Template Tags​

TagDescription
{% seo %}Injects SEO meta tags (title, description, Open Graph)
{% qumra_head %}Injects Qumra system head tags
{% qumra_scripts %}Injects Qumra system scripts
{% template "name" %}Includes a template from templates/ folder
{% content " " %}Renders page widgets from pages/*.json

Complete Layout Example​

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {# SEO tags #}
    {% seo %}

    {# Qumra system tags #}
    {% qumra_head %}

    {# Preconnect to external domains #}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://cdn.jsdelivr.net">

    {# Google Fonts #}
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">

    {# External Libraries #}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

    {# Theme Styles with Dynamic Colors #}
    <style>
      :root {
        --main-color: {{ settings.mainColor }};
        --secondary-color: {{ settings.secondaryColor }};
        --accent-color: {{ settings.accentColor }};
      }
    </style>

    {# Theme Assets #}
    <link rel="stylesheet" href="{{ 'style.css' | assets }}">

    {# Custom CSS from Settings #}
    {% if settings.customCss %}
      <style>{{ settings.customCss | safe }}</style>
    {% endif %}
  </head>

  <body class="font-cairo antialiased">
    {# Header Template #}
    {% template "header" %}

    {# Page Content #}
    <main>
      {% content " " %}
    </main>

    {# Footer Template #}
    {% template "footer" %}

    {# Global Widgets (WhatsApp, Mobile Nav) #}
    {% template "global" %}

    {# Qumra System Scripts #}
    {% qumra_scripts %}

    {# External Libraries #}
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    {# Theme Scripts #}
    <script defer src="{{ 'alpine.config.js' | assets }}"></script>
    <script defer src="{{ 'main.js' | assets }}"></script>

    {# Custom JavaScript from Settings #}
    {% if settings.customJs %}
      <script>{{ settings.customJs | safe }}</script>
    {% endif %}
  </body>
</html>
LibraryPurpose
Tailwind CSSUtility-first CSS framework
Alpine.jsLightweight reactive framework
SwiperCarousel/slider library
AOSScroll animations
ToastifyToast notifications
GLightboxImage lightbox

RTL Support​

For Arabic and RTL languages, set dir="rtl" and lang="ar":

<html lang="ar" dir="rtl">

Tips​

Best Practices
  • Keep shared imports (fonts, libraries) in the layout
  • Use CSS custom properties for theme colors
  • Load scripts with defer for better performance
  • Use {% template "global" %} for floating elements
  • Leave page-specific content to widgets via {% content %}