1

i'm using nunjucks (gulp) as templating language and i want to build a dynamic page template.

This is my Json:

"pages": [
    {
        uname: "Welcome",
        title: "Page 1 Headline"
    },
    {
        uname: "About",
        title: "Page 2 Headline"
    }
]

Currently i have a static page (html) template for each page:

{% extends "layout.html" %}
{% set active_page = "Welcome" %} //<- This needs to be dynamicly
{% block content %}

<h1>{{ page[0].title }}</h1> //<- This needs to be dynamicly

My first thought was to read the url parameters but i couldn't solve it in this way.

Any suggestions?

Ingo Köpp
  • 19
  • 1
  • 3
  • When you say "dynamic" do you mean client-side? When the page loads in the browser? – Kevin Powell Aug 28 '17 at 12:32
  • Yes, i'm using gulp to render my nunjucks templates – Ingo Köpp Oct 12 '17 at 11:38
  • 1
    gulp doesn't run in the browser, it's a build task that typically compiles templates down to static html pages. If you want to dynamically compile nunjucks in the browser you'll need to use the client-side rendering functionality of nunjucks. Load the nunjucks library via a ` – Kevin Powell Feb 13 '18 at 20:44

3 Answers3

0

The solution was simple!

Need to do this:

index.njk

<!-- set title !!! -->
{% set title = 'home page' %} <!-- set title !!! -->
{% extends "layout.njk" %}

{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
<main class="main">
    <!-- content -->
</main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}

page1.njk

<!-- set title !!! -->
{% set title = 'page1' %}
{% extends "layout.njk" %}

{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
<main class="main">
    <!-- content -->
</main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}

layout.njk

<!-- layout.njk -->

<html lang="en">
    <head>
      <!-- here is the compiled title -->
      <title>{{ title }}</title>
      <link rel="stylesheet" href="styles/style.css">
    </head>
    <body class="page">
        {% block header %}{% endblock %}
        {% block main %}{% endblock %}
        {% block footer %}{% endblock %}
    </body>
 </html>
Yuri Fedorov
  • 33
  • 1
  • 6
0

If you are hoping to pass the data from data.json file

  1. first you need to use someway to specify the page name in the data file itself.
  2. Then you have to set the page name as a variable in the nunjucks page.
  3. Now you can use this variable name to get the data relevant to the page you are working in.

data.json

{
    "pages": {
        "welcome": {
           "uname": "Welcome",
           "title": "Page 1 Headline"
        },
        "about": {
           "uname": "About",
           "title": "Page 2 Headline"
        },
    }
}

index.njk

{% set pageName = 'welcome' %}
{% extends "layout.html" %}
{% set active_page = "Welcome" %}
{% block content %}

<h1>{{ page[pageName].title }}</h1>
Lasithds
  • 2,161
  • 25
  • 39
-1
{% macro inc(file, folder) %}
    {% if folder %}
        {% set folderPATH = folder %}
    {% else %}
        {% set folderPATH = file %}
    {% endif %}
    {% set path = folderPATH + "/" + file + ".njk" %}
    {% include path %}
{% endmacro %}

{{ inc("menu") }} // {% include "menu/menu.njk" %}
{{ inc("content") }} // {% include "content/content.njk" %}
George Postoronca
  • 1