【英文】Gin的模版渲染

Posted on Edited on In Views:

Preface

Notes for learning template rendering in Gin

Rendering Templates on a Single Level

Directory Structure

1
2
3
- main.go
+ templates
  - index.html

Creating HTML Templates

templates/index.html
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

Returning an HTML Template as a Response

1
2
3
4
// Load HTML files through the engine
engine.LoadHTMLGlob("templates/*.html")
// Return the template as a response
context.HTML(http.StatusOK, "templates/index.html")

Rendering Templates with Multiple Levels

Directory Structure

1
2
3
4
5
6
- main.go
+ templates
  + admin
    - index.html
  + default
    - index.html

Creating HTML Templates

  • Specify the path of the current page by defining {{ define "" }} ... {{ end }} at the beginning of the file
templates/admin/index.html
1
2
3
4
5
6
7
8
9
10
11
12
{{ define "admin/index.html" }}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
{{ end }}
templates/default/index.html
1
2
3
4
5
6
7
8
9
10
11
12
{{ define "default/index.html" }}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
{{ end }}

Returning an HTML Template as a Response

**: Matches a level

1
2
3
4
// Load HTML files through the engine
engine.LoadHTMLGlob("templates/**/*.html")
// Return the template as a response
context.HTML(http.StatusOK, "templates/admin/index.html")

Loading Static Resources

  • Route static resources without parsing them

For example, when accessing http://127.0.0.1:8080/static/img.png, the image file is returned directly

Directory Structure

1
2
3
- main.go
+ static
  - img.png

Loading Static Resources

  • Map the request path of static resources to the actual storage path of the static resource file

/static: Request path
./static: Actual storage path of the static resource file

1
engine.Static("/static", "./static")

Using Parameters in Templates

Directory Structure

1
2
3
- main.go
+ templates
  - index.html

Creating HTML Templates

  • Render data using {{.}} syntax
templates/index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

{{.key}}

</body>
</html>

Passing Parameters when Returning an HTML Template

1
context.HTML(http.StatusOK, "./index.html", gin.H{"key": "value"})

Manipulating Parameters in Templates

Rendering the Value of a Parameter to the Page

1
{{.key}}

Assigning the Value of a Parameter to a Variable

1
{{$k := .key}}

Comparison Functions

eq: Determines if the values on both sides are equal
ne: Determines if the values on both sides are not equal
lt: Determines if the value on the left side is less than the value on the right side
le: Determines if the value on the left side is less than or equal to the value on the right side
gt: Determines if the value on the left side is greater than the value on the right side
ge: Determines if the value on the left side is greater than or equal to the value on the right side

Branch Statements

Single Branch

1
2
3
4
5
{{if gt .key 60}}
    ...
{{else}}
    ...
{{end}}

Multiple Branches

1
2
3
4
5
6
7
{{if gt .key 80}}
    ...
{{else if gt .key 60}}
    ...
{{else}}
    ...
{{end}}

Loop Statements

  • Loop through a slice
1
context.HTML(http.StatusOK, "./index.html", gin.H{"key": []string{"", ""}})
1
2
3
{{range $index, $value := .arr}}
    ...
{{end}}

No Values

  • When the data being looped through has no values, the code block {{else}}...{{end}} will be executed
1
context.HTML(http.StatusOK, "./index.html", gin.H{"key": []string{}})
1
2
3
4
5
{{range $index, $value := .arr}}
    ...
{{else}}
    ...
{{end}}

Deconstructing Structs

1
2
3
type User struct {
    Username string
}
1
context.HTML(http.StatusOK, "./index.html", gin.H{"user": User{Username: "value"}})
1
2
3
{{with .user}}
    {{.Username}}
{{end}}

This is equivalent to assigning .user to .

Predefined Functions in Templates (Built-in Template Functions)

Getting the Length of a String

  • 1 Chinese character occupies 3 bytes in the UTF-8 character set, so the length of 1 Chinese character is 3 when calculating its length.
1
{{len .key}}

Creating Custom Template Functions

Defining Template Functions

  • Define custom template functions before loading the HTML templates
  • Multiple custom template functions can be defined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

func CustomFunction1(parameters) { ... }
engine.SetFuncMap(template.FuncMap{
    "TemplateName1": CustomFunction1(parameters)
})

func CustomFunction2(parameters) { ... }
engine.SetFuncMap(template.FuncMap{
    "TemplateName2": CustomFunction2(parameters)
})

// Load HTML files through the engine
engine.LoadHTMLGlob("templates/*.html")
// Return the template as a response
context.HTML(http.StatusOK, "templates/index.html")

Using Custom Template Functions

1
{{TemplateName1 .key}}

Loading Other Templates in Templates

  • Extract common parts of the template as templates and load other templates in the template
1
{{template "default/index.html" .}}

Completion

References

Bilibili - 筱筱知晓