Search code examples
htmlinheritancegorendertemplate-engine

go - Render html/template with inheritance

I have two html templates, with index.html extending base.html

base.html is like this:

{{ define "base" }}
<html>
<head>
    <meta charget="utf-8">
    <title>{{ template "title" . }}</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
    {{ template "index" . }}
</body>
</html>
{{ end }}

And index.html:

{{ define "title" }}Homepage{{ end }}
{{ define "index" }}
<div class="wrapper">
    <div class="page-content">
        <div class="container">
            <div class="left">
                <img src="../public/images/img_landing_page_mac.png">
            </div>
            <div class="right">
                <h2 style="font-size: 33px; letter-spacing: 5px">Organize <br>Modern Knowledge<br> for Mankind</h2>
                <p style="font-size: 20px;margin-top: 35px;letter-spacing: 4px">Consume, Colect and Revisit <br>Knowledge at Your Fingertips</p>
                <a href="#" style="margin-top: 80px;display: inline-block;margin-left: -17px"><img src="../public/images/btn_get_chrome.png"></a>
            </div>
        </div>
    </div>
</div>
{{ end }}

It should render when requesting path on browser with a callback handler:

func IndexHandler(w http.ResponseWriter,r *http.Request){
    files:=[]string{"base","index"}
    util.RenderTemplate(w,nil,files...)
}

RenderTemplate is a wrapper function to render

func RenderTemplate(w http.ResponseWriter,data interface{},tmpl... string){
    cwd,_:=os.Getwd()
    files:=make([]string, len(tmpl))
    for i,file:=range tmpl{
        files[i]=filepath.Join(cwd,"./view/"+file+".html")
    }
    t,err:=template.ParseFiles(files...)
    if err!=nil{
        http.Error(w,err.Error(),http.StatusInternalServerError)
        return
    }
    templates:=template.Must(t,err)
    err=templates.Execute(w,data)
    if err!=nil {
        http.Error(w,err.Error(),http.StatusInternalServerError)
    }
}

After I start server, I request that path on browser, but nothing is rendered at all. What am I missing? It seems that no inheritance is comprehended here

I follow this tutorial, trying to render templates with inheritance / extension:

https://elithrar.github.io/article/approximating-html-template-inheritance/

Solution

  • The define action doesn't execute template, only template and block actions do. Most probably you just want to remove define from your base template (first and last lines) and it will work as expected.

    Or you can use Template.ExecuteTemplate function instead of Template.Execute. It accepts name of the template: err = templates.ExecuteTemplate(w, "base", data)

    Or if you are using Go1.6 or newer you can try block action instead of define.

    On the side note, please, consider using gofmt.