在Qute（搭配Renarde）中能否实现模板间HTML代码注入？

背景（Twirl中的实现） #

在Twirl中可以通过以下方式在模板间传递HTML代码：

@customFooter = {
    <div class="d-flex justify-content-end">
        <a href="#" class="btn btn-primary block">Manage</a>
    </div>
}

@particularPage(customFooter)

对应的particularPage.scala.html内容：

@(footer: Html)

@footer

问题 #

请问在搭配Renarde的Qute中是否有类似实现方式？

答案 #

当然有，Qute支持通过模板片段和原始HTML传递实现类似功能，具体实现如下：

1. 定义接收HTML片段的目标模板
   创建particularPage.qute.html，声明接收Html类型的参数：

{#include particularPage.qute.html}
@param footer: Html

{footer}

2. 传递HTML片段的两种方式

• 方式一：直接定义并传递
  在调用模板的地方，用Html包装类包裹HTML代码后传递：

{#let customFooter = Html("""
    <div class="d-flex justify-content-end">
        <a href="#" class="btn btn-primary block">Manage</a>
    </div>
""")}

{#include particularPage.qute.html footer=customFooter /}

• 方式二：复用独立片段模板
  先创建可复用的片段模板customFooter.qute.html：

{#include customFooter.qute.html}
<div class="d-flex justify-content-end">
    <a href="#" class="btn btn-primary block">Manage</a>
</div>

再在调用时通过Html.fromTemplate引用该片段并传递：

{#include particularPage.qute.html footer=Html.fromTemplate('customFooter') /}

注意：Qute默认会对字符串进行HTML转义，必须使用Html包装类才能确保HTML代码被原样渲染，避免转义导致的格式问题。

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