Nunjucks dynamic page template

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?

标签： javascript dynamic gulp nunjucks gulp-nunjucks-render

3条回答

做自己的国王

2楼-- · 2019-06-10 05:36

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

first you need to use someway to specify the page name in the data file itself.
Then you have to set the page name as a variable in the nunjucks page.
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>

0人赞添加讨论(0) 举报

SAY GOODBYE

3楼-- · 2019-06-10 05:40

{% 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" %}

0人赞添加讨论(0) 举报

beautiful°

4楼-- · 2019-06-10 05:48

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>

0人赞添加讨论(0) 举报

Nunjucks dynamic page template

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间