使用Timber开发WordPress时如何向Twig模板正确传递变量？

问题原因 #

在Twig的{% %}标签内部属于表达式执行环境，不需要嵌套{{ }}调用变量，将变量写在引号内时Twig会将其识别为普通字面字符串，不会解析对应的变量值。

正确修改方案 #

1. 调整组件引入代码 #

两种写法都可以实现变量和固定路径的拼接：

• 字符串拼接写法（兼容性最好）：

{% include 'component/icon-button.twig' with { href: site.theme.link ~ '/faq' } %}

Twig中使用波浪号~作为字符串拼接运算符，直接连接变量和固定路径字符串即可。

• 双引号插值写法：

{% include 'component/icon-button.twig' with { href: "#{site.theme.link}/faq" } %}

注意必须使用双引号包裹字符串，#{变量名}的写法才会被Twig解析。

2. 组件模板无需调整 #

你现有icon-button.twig中的变量调用写法是正确的，不需要修改：

<button class="icon-button" data-href="{{ href }}">text</button>

修改后即可正常输出解析后的完整URL地址。

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