Home > Mobile >  Template inheritance creates blank page in go
Template inheritance creates blank page in go

Time:02-20

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 ?

CodePudding user response:

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",
    }
  • Related