I’m trying to create a full stack app in go but I’m having trouble with the templating part.
The following code is fine as long as the page is static, but returns a blank page when i start using inheritance functions such as {{template}}, {{define}} or {{block}}.
main.go :
package main
import (
"fmt"
"html/template"
"log"
"net/http"
"github.com/gorilla/mux"
)
func main() {
router := mux.NewRouter()
router.HandleFunc("/", func(rw http.ResponseWriter, r *http.Request) {
fmt.Println("begin")
files := []string{
"layout.html",
"index.html",
}
tmpl, err := template.ParseFiles(files...)
if err != nil {
http.Error(rw, fmt.Sprintf("failed parsing template files | %s", err.Error()), http.StatusInternalServerError)
return
}
if err := tmpl.Execute(rw, nil); err != nil {
http.Error(rw, fmt.Sprintf("failed rendering template | %s", err.Error()), http.StatusInternalServerError)
return
}
}).Methods("GET")
if err := http.ListenAndServe(fmt.Sprintf(":3000"), router); err != nil {
log.Fatalf("failed starting server | %s", err.Error())
}
}
layout.html
{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<main>
{{template "main" .}}
</main>
<!-- JQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
{{end}}
index.html
{{template "base" .}}
{{ define "main" }}
<h2>hello</h2>
<p>test</p>
{{ end }}
I’ve literally copied the examples and it still doesn’t work. What am I missing ?
>Solution :
ParseFiles returns the template for the first file in the argument list. The template for a file is the content outside of {{define}}/{{end}} blocks.
The first file in the list, layout.html, has nothing but whitespace outside of the {{define}}/{{end}} block.
You want the template in the file index.html. Swap the order of the files to fix the problem.
files := []string{
"index.html",
"layout.html",
}