Nunjucks动态页面模板

Question

我正在使用nunjucks（gulp）作为模板语言，并且我想构建一个动态页面模板。

这是我的杰森：

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

目前我每个页面都有一个静态页面（html）模板：

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

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

我的第一个念头是读取url参数，但我无法以这种方式解决它。

有什么建议么？

Answer 1

解决方案很简单！

需要这样做：

索引

<!-- 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>

Answer 2

如果您希望传递data.json文件中的数据

首先，您需要使用某种方式在数据文件本身中指定页面名称。
然后，您必须在nunjucks页面中将页面名称设置为变量。
现在，您可以使用此变量名来获取与您正在处理的页面相关的数据。

data.json

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

索引

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

<h1>{{ page[pageName].title }}</h1>

Answer 3

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

Nunjucks动态页面模板

问题描述

3 个解决方案

解决方案1
0 2019-01-10 07:55:44

解决方案2
0 2019-05-13 15:50:20

解决方案3
-1 2017-11-02 10:54:58

Nunjucks动态页面模板

问题描述

3 个解决方案

解决方案1 0 2019-01-10 07:55:44

解决方案2 0 2019-05-13 15:50:20

解决方案3 -1 2017-11-02 10:54:58

解决方案1
0 2019-01-10 07:55:44

解决方案2
0 2019-05-13 15:50:20

解决方案3
-1 2017-11-02 10:54:58