How to render HTML Template In Gin Gonic (Golang)?

Question

I am trying to create an HTML template on Golang using Gin Gonic. but there are problems when rendering the template that I made to produce a web view (the result is blank). Is there something wrong with my code? i tried to read gin gonic documentation but it can't solve my problem.

/workspace
|- main.go
|-web
  |-assets
  |-base
     | - header.html
     | - footer.html

  |-pages
    |-about.html

here is sample main file

import (
    "log"
    "net/http"

    "github.com/getsentry/sentry-go"
    "github.com/gin-gonic/gin"
    "html/template"
)


func main() {
    router := gin.Default()
    html := template.Must(template.ParseFiles("web/base/footer.html", "web/base/header.html"))
    router.SetHTMLTemplate(html)
    router.LoadHTMLGlob("web/pages/*")

    router.GET("/index", func(c *gin.Context) {
        c.HTML(http.StatusOK, "about.html", gin.H{
            "title": "Main website",
        })
    })
    router.Run(":8000")

}

Here my header.html file

{{ define "Header" }}
<head>
    <title>Example</title>
</head>
{{end}}

my footer.html

{{ define "Footer" }}
<script>
    
</script>
{{end}}

and this my about.html

{{define "about"}}
<html>
   {{ template "Header" }}
   <body>
       About me
       {{ template "Footer" }}
   </body
</html>

Thanks for advance

I've also tried LoadHTMLGlob. I think it's a method to load HTML in the "pages" folder (which has an about.html file). am i wrong? — Tammam, Mar 16 '21 at 16:40
@blackgreen I don't find an error message in my application, it's just a blank web display. but if I delete {{template}} & {{define}} the "About" will appear. It's just that my goal is to make the template so that it doesn't repeat the same syntax as calling the CSS style or javascript — Tammam, Mar 16 '21 at 16:47
You have `c.HTML(http.StatusOK, "about.html", gin.H{ ...` and `{{define "about"}}`. Use one name for both, either `"about.html"` or `"about"`, don't mix them. — mkopriva, Mar 16 '21 at 17:20
https://hoohoo.top/blog/20210530112304-golang-tutorial-introduction-gin-html-template-and-how-integration-with-bootstrap/ — Eric, Feb 03 '22 at 02:49

score 8 · Accepted Answer · answered Jun 25 '21 at 11:43

First put every template of same root template folder like:

/workspace
|- main.go
|-web
  |-assets
  |-templates
    |-base
       | - header.html
       | - footer.html
    |-pages
      |-about.html

Now set gin to load all templates from that root folder:

func main() {
    router := gin.Default()
    router.LoadHTMLGlob("templates/**/*")

    router.GET("/index", func(c *gin.Context) {
        c.HTML(http.StatusOK, "about.html", gin.H{
            "title": "Main website",
        })
    })
    router.Run(":8000")

}

As you define the template name about you need to use it in the handler:

func main() {
    router := gin.Default()
    router.LoadHTMLGlob("templates/**/*")

    router.GET("/index", func(c *gin.Context) {
        c.HTML(http.StatusOK, "about", gin.H{
            "title": "Main website",
        })
    })
    router.Run(":8000")

}

How to render HTML Template In Gin Gonic (Golang)?

1 Answers1