nunjucks - Lauviah0622/Lavi-Note GitHub Wiki

nunjucks

據說好像是把 python 上面的 jinja 整個移植過來 JS 的 template engine

templating

使用變數

基本語法跟 JS 差不多

{{ username }}
{{ foo.bar }}
{{ foo["bar"] }}

可以直接使用環境給的變數，或者是另外宣告變數

filter

可以想成在 JS 裡面是這樣的形式：

//nunjucks
{{foo | bar | baz}}

//js
baz(bar(foo))

{{ foo | title }} {{ foo | join(",") }} {{ foo | replace("foo", "bar") | capitalize }}

在 11ty 裡面有內建各種 filter 做使用

ifelse

這裡的 if 判斷和 JS 一模一樣

{% if hungry %}
  I am hungry
{% elif tired %}
  I am tired
{% else %}
  I am good!
{% endif %}

for loop

{%- for list %}

{{list.title}}

{%- endfor %}

解構

Object 版本

var food = {
  'ketchup': '5 tbsp',
  'mustard': '1 tbsp',
  'pickle': '0 tbsp'
};
{% for ingredient, amount in food %}
  Use {{ amount }} of {{ ingredient }}
{% endfor %}

Array 版本

//value
var points = [[0, 1, 2], [5, 6, 7], [12, 13, 14]];


//nunjeck
{% for x, y, z in points %}
  Point: {{ x }}, {{ y }}, {{ z }}
{% endfor %}

在 loop 裡面有一些特別的變數可以用

  • loop.index: 当前循环数 (1 indexed)
  • loop.index0: 当前循环数 (0 indexed)
  • loop.revindex: 当前循环数，从后往前 (1 indexed)
  • loop.revindex0: 当前循环数，从后往前 (0 based)
  • loop.first: 是否第一个
  • loop.last: 是否最后一个
  • loop.length: 总数

block

{% block article %}
  {{ content | safe }}
{% endblock %}

能夠定義一個 block ，然後 include 他的 template 可以放入內容做使用？嗎？

macro

有點像 function

{% macro field(name, value='', type='text') %}


<div class="field">
  <input type="{{ type }}" name="{{ name }}"
         value="{{ value | escape }}" />
</div>
{% endmacro %}

comment

{# content | safe #}

custom tag

除了上面原生的這些 API

nunjucks 可以自行新增語法

⚠️ **GitHub.com Fallback** ⚠️