Gin框架下Jinja模板部分生效部分以文本输出的原因排查

我使用Golang的Gin库作为后端，尝试结合Jinja模板开发动态网页。通过返回两个map的函数循环填充mike数据结构，代码如下：

type mike struct {
    Name   string `form:"name"`
    Id     string `form:"id"`
    State  bool   `form:"state"`
}

func postForm(c *gin.Context) {
  name := c.PostForm("name")
  var alive, dead = Foo(name)
  if !(len(alive) == 0 && len(dead) == 0) {
    for nam3, id := range alive {
        var name mike
        name.Name  = nam3
        name.Id    = id
        name.State = true
        c.HTML(http.StatusOK, "thing.html", name)
    }
    for nam3, id := range dead {
        var name mike
        name.Name  = nam3
        name.Id    = id
        name.State = false
        c.HTML(http.StatusOK, "thing.html", name)
    }
    return
  }
}

func main() {
  r.LoadHTMLGlob("templates/*")
  r.GET("/", func(c *gin.Context) {
    c.HTML(http.StatusOK, "start.html", gin.H{
      "form": "name",
    })
  })
  r.POST("/", postForm)
}

随后将数据结构传入HTML模板，试图通过条件判断显示不同样式的内容：

{% extends "layout.tmpl" %}

{% block body %}
  {% if {{.State}} %}
        <form action="/display" method="post">
        <ul style="color:green;">
          <label class="radio">
          <input type="radio" name="name" value={{.Name}}>
          {{.Name}} is {{.State}}
          </label>
          <button type="submit">Submit</button>
        </ul>
        <form>
  {% else %}
        <form action="/display" method="post">
        <ul style="color:red;">
          <label class="radio">
          <input type="radio" name="name" value={{.Name}}>
          {{.Name}} is {{.State}}
          </label>
          <button type="submit">Submit</button>
        </ul>
        <form>
  {% endif %}
{% endblock %}

实际运行时，只有{{}}包裹的语法能被解析为对应值，其余Jinja语法（如{% %}控制语句）直接以文本形式输出，模板仅部分生效。

核心原因 #

Gin框架默认使用Go标准库的html/template作为模板引擎，不支持Jinja模板的语法。Go模板的控制语句（条件、循环等）使用{{ ... }}包裹，而非Jinja的{% ... %}，因此这些Jinja风格的标签会被当作普通文本直接输出。

另外代码还存在两个额外问题：

1. 模板中{% if {{.State}} %}的写法错误，即使是Jinja也不允许在控制标签中嵌套变量插值语法；
2. Go代码中循环调用c.HTML会多次向客户端发送HTTP响应，不符合HTTP协议规范，客户端只会接收第一个响应，后续响应会被忽略。

修正步骤 #

1. 调整Go代码，收集所有数据一次性传入模板

将alive和dead中的数据合并为一个切片，一次性传递给模板，避免多次响应：

func postForm(c *gin.Context) {
  name := c.PostForm("name")
  alive, dead := Foo(name)
  if len(alive) == 0 && len(dead) == 0 {
    // 无数据时的处理逻辑，比如返回提示页面
    c.HTML(http.StatusOK, "empty.html", nil)
    return
  }

  // 收集所有mike实例
  var items []mike
  for nam3, id := range alive {
    items = append(items, mike{
      Name:  nam3,
      Id:    id,
      State: true,
    })
  }
  for nam3, id := range dead {
    items = append(items, mike{
      Name:  nam3,
      Id:    id,
      State: false,
    })
  }

  // 一次性传递所有数据给模板
  c.HTML(http.StatusOK, "thing.html", gin.H{
    "Items": items,
  })
}

2. 改用Go模板语法重写HTML模板

将Jinja的{% %}控制语句替换为Go模板的语法，同时修复表单未闭合的问题：

{{/* 继承layout.tmpl，Go模板使用template指令 */}}
{{template "layout.tmpl" .}}

{{define "body"}}
  {{range .Items}}
    <form action="/display" method="post">
      <ul style="color:{{if .State}}green{{else}}red{{end}};">
        <label class="radio">
          <input type="radio" name="name" value="{{.Name}}">
          {{.Name}} is {{.State}}
        </label>
        <button type="submit">Submit</button>
      </ul>
    </form>
  {{end}}
{{end}}

如果你的layout.tmpl原本是Jinja风格的，也需要同步改为Go模板的语法，比如用{{define "layout.tmpl"}}定义模板，用{{template "body" .}}引入子模板。

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