如何在boilerplate.templ中嵌入navbar.templ等其他templ模板文件？

你当前代码的问题在于在templ函数外部定义组件变量并手动调用render方法，这不符合templ的语法规范。templ提供了更简洁的组件嵌入方式，以下是正确实现步骤：

1. 确保所有模板文件属于同一package #

三个模板文件都要声明相同的package（比如views），这样可以直接互相引用组件，无需额外导入。

2. 修正boilerplate.templ的代码 #

直接在templ boilerplate()函数的HTML结构中，通过{ 组件名() }的方式嵌入navbar和body组件，templ编译器会自动处理渲染逻辑，不需要手动调用render方法。

修正后的boilerplate.templ代码：

package views

css Base(){
    background-color: #F4F2F3;
    font-family: Arial, sans-serif;
}

templ boilerplate() {
    <html>
        <head>
            <script src="https://cdn.tailwindcss.com"></script>
            @Base() <!-- 应用定义的CSS样式 -->
        </head>
        <body>
            { navbar() } <!-- 嵌入导航栏组件 -->
            { body() } <!-- 嵌入主体内容组件 -->
        </body>
    </html>
}

3. 组件带参数的情况（可选） #

如果navbar或body组件需要接收参数（比如用户信息），只需在组件定义时添加参数，调用时传入即可：

示例navbar.templ（带参数）：

package views

// 定义参数类型
type NavbarProps struct {
    Username string
}

templ navbar(props NavbarProps) {
    <nav class="bg-gray-800 text-white p-4">
        <span>欢迎, { props.Username }</span>
        <!-- 其他导航栏内容 -->
    </nav>
}

对应的boilerplate.templ调用：

package views

css Base(){
    background-color: #F4F2F3;
    font-family: Arial, sans-serif;
}

templ boilerplate(props NavbarProps) {
    <html>
        <head>
            <script src="https://cdn.tailwindcss.com"></script>
            @Base()
        </head>
        <body>
            { navbar(props) } <!-- 传递参数给导航栏组件 -->
            { body() }
        </body>
    </html>
}

关键注意事项 #

• 不要在templ函数外部声明组件变量，所有组件调用都要放在templ函数内部的HTML结构中。
• 使用{ 组件名(参数...) }的语法嵌入组件，这是templ官方推荐的方式，编译器会自动生成高效的渲染代码。

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