Nunjucks动态页面模板 [英] Nunjucks dynamic page template

查看:199
本文介绍了Nunjucks动态页面模板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用nunjucks(gulp)作为模板语言,我想构建一个动态页面模板。

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

这是我的Json:

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

目前我每页都有一个静态页面(html)模板:

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

我的第一个想法是阅读url参数但是我无法用这种方式解决它。

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

有什么建议吗?

推荐答案

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

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


  1. 首先需要使用一些来指定页面名称数据文件本身。

  2. 然后你必须在nunjucks页面中将页面名称设置为变量。

  3. 现在您可以使用此变量名来获取与您正在使用的
    页面相关的数据。

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>

这篇关于Nunjucks动态页面模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆