Eleventy中{{ xyz }}与{% abc %}模板标签的差异是什么？

你观察到的“过滤器配合双花括号、短代码用百分号标签”只是表层用法，二者存在更核心的本质区别：

1. 核心定位不同 #

• {{ }}是输出型标签：它的唯一目的是计算表达式的值，并将结果直接渲染到页面中。比如调用变量、执行过滤器链、做简单运算，本质是“求值后输出内容”。
• {% %}是逻辑控制/操作型标签：它负责控制模板的渲染流程、执行模板级操作，本身不直接输出内容（部分指令如{% include %}会引入其他内容，但标签自身不产生输出）。比如条件判断、循环遍历、模板继承/引入、执行短代码，本质是“执行逻辑或操作”。

2. 语法能力边界不同 #

• {{ }}内部只能写可求值的表达式：支持变量、过滤器链式调用、基础运算（如{{ 3 * 5 }}），但不能写控制语句（比如不能在{{ }}里写if或for）。
• {% %}内部可以写完整的模板控制逻辑：涵盖条件分支（{% if %}）、循环（{% for %}）、模板继承（{% extends %}）、块定义（{% block %}）等复杂逻辑，还能调用自定义短代码或模板标签，逻辑复杂度远高于{{ }}。

3. 输出行为差异 #

• {{ }}默认会自动转义HTML内容：比如输入{{ '<script>alert(1)</script>' }}，会被转义成实体字符，避免XSS风险，需要时可通过safe过滤器取消转义。
• {% %}本身不会在最终页面留下任何痕迹：它只是作为模板渲染的“控制指令”，执行完逻辑后就消失，不会生成任何输出内容。

示例对比 #

使用{{ }}的场景 #

欢迎回来，{{ user.name | capitalize }}！
文章发布时间：{{ post.date | date('YYYY年MM月DD日') }}

使用{% %}的场景 #

{% if user.isAdmin %}
  <button>管理后台</button>
{% endif %}

{% for item in navLinks %}
  <a href="{{ item.url }}">{{ item.text }}</a>
{% endfor %}

{% include 'components/header.njk' %}
{% customShortcode '参数1', '参数2' %}

内容的提问来源于stack exchange，提问作者atreeon