开发者-导航 猿导航

Nunjucks 语言模版使用方法

发布时间:

目录

在 Nunjucks 模板语言中,{% %}{{ }} 有着不同的用途,选择使用哪个取决于你想要在模板中实现的功能。

一、{% %}: #

用于表示控制结构,如循环、条件判断、宏定义等。这些结构通常不会直接输出到页面上,而是在模板渲染时被解析和执行。

  1. 循环:用于遍历数组或集合中的每个项目。
{% for item in items %}
	<li>{{ item }}</li>
{% endfor %}
  1. 条件判断:用于根据条件渲染不同的内容。
{% if condition %}
  <p>This is true.</p>
{% else %}
  <p>This is false.</p>
{% endif %}
  1. 宏定义:用于定义可重用的模板片段。
{% macro render_user(user) %}
  <div>{{ user.name }}</div>
{% endmacro %}
  1. 赋值:用于在模板中创建变量。
{% set username = 'John Doe' %}
  1. 包含:用于包含其他模板文件。
{% include 'footer.html' %}
  1. 继承:用于创建一个基础模板,其他模板可以从中继承。
{% extends 'base.html' %}
  1. :用于在继承的模板中定义可以被子模板覆盖的内容区域。
{% block content %}
  <p>This is the default content.</p>
{% endblock %}

在 Eleventy 项目中,如果你想要在 Markdown 文件中使用 Nunjucks 的 {% %} 表达式,你需要确保 Markdown 文件被正确地配置为 Nunjucks 模板。通常,这意味着你的 Markdown 文件的扩展名应该是 .md,并且 Eleventy 配置文件应该设置 Nunjucks 作为默认模板语言。
然后,你可以在 Markdown 文件中直接使用 {% %} 表达式,例如:

---
title: My Blog Post
---
# {% raw %}{{ title }}{% endraw %}
{% for post in collections.posts %}
  <article>
    <h2>{{ post.data.title }}</h2>
    <p>{{ post.templateContent }}</p>
  </article>
{% endfor %}

在这个例子中,{% for post in collections.posts %}{% endfor %} 是 Nunjucks 的循环控制结构,它们会在 Eleventy 渲染模板时被处理。

二、{}: #

用于输出表达式的结果到模板中。这通常用于输出变量、对象的属性、数组的元素等。

  1. 输出变量:用于输出变量的值。
<p>Hello, {{ username }}!</p>
  1. 访问对象属性:用于输出对象属性的值。
<p>User's name is {{ user.name }}.</p>
  1. 访问数组元素:用于输出数组中特定元素的值。
<li>{{ items[0] }}</li>

三、{% raw %}{% endraw %} #

用于阻止模板引擎解析标签内的内容。当你需要在模板中输出 Nunjucks 语法本身,而不是让 Nunjucks 解析这些语法时,你会使用这个标签。

  1. 输出 Nunjucks 代码示例:
{% raw %}
{% for item in items %}
  <li>{{ item }}</li>
{% endfor %}
{% endraw %}

四、{%--%} #

{%--%} 语法用于消除标签周围的空白。这些特殊符号告诉 Nunjucks 去除标签前后的空白字符,包括空格、制表符和换行符。