I am having a problem controlling whitespace and still formatting html/template templates in a readable fashion. My templates look somthing like this:
layout.tmpl
{{define "layout"}}
<!DOCTYPE html>
<html>
<head>
<title>{{.title}}</title>
</head>
<body>
{{ template "body" . }}
</body>
</html>
{{end}}
body.tmpl
{{define "body"}}
{{ range .items }}
{{.count}} items are made of {{.material}}
{{end}}
{{end}}
code
package main
import (
"os"
"text/template"
)
type View struct {
layout string
body string
}
type Smap map[string]string
func (self View) Render(data map[string]interface{}) {
layout := self.layout + ".tmpl"
body := self.body + ".tmpl"
tmpl := template.Must(template.New("layout").ParseFiles(layout, body))
tmpl.ExecuteTemplate(os.Stdout, "layout", data)
}
func main() {
view := View{ "layout", "body" }
view.Render(map[string]interface{}{
"title": "stock",
"items": []Smap{
Smap{
"count": "2",
"material": "angora",
},
Smap{
"count": "3",
"material": "wool",
},
},
})
}
But that produces (note: there is a line above the doctype):
<!DOCTYPE html>
<html>
<head>
<title>stock</title>
</head>
<body>
2 items are made of angora
3 items are made of wool
</body>
</html>
What I want is:
<!DOCTYPE html>
<html>
<head>
<title>stock</title>
</head>
<body>
2 items are made of angora
3 items are made of wool
</body>
</html>
In other template languages I can say things like
[[- value -]]
and the whitespace before and after the action are stripped, but I don't see anything like that in html/template. Does this really mean I have to make my templates unreadable like the following?
layout.tmpl
{{define "layout"}}<!DOCTYPE html>
<html>
<head>
<title>.title</title>
</head>
<body>
{{ template "body" . }} </body>
</html>
{{end}}
body.tmpl
{{define "body"}}{{ range .items }}{{.count}} items are made of {{.material}}
{{end}}{{end}}
You can use white space controller
{{range .foos -}} // eats trailing whitespace
<tr><td>do something</td></tr>
{{- end}} // eats leading whitespace (\n from previous line)
Whitespace in this case makes no difference in the rendered output at the user's browser, so controlling it makes little sense above perhaps aesthetics.
Put differently, one can have nicely formatted templates (which I would prefer) or partially nicely formatted HTML (no nested indents). Pick one or post process the HTML using any of the existing formatters.
Yes, whitespace and lines are translated literally. If you have a line with just a {{ define }} or anything else that does not produce output, you will have an empty line in the parsed file.
Ideally, because you are using template, you should not need to view or edit the parsed output. For reference, use JSP/JSF and see the ugly output it gives you. View the source of most pages online, they're also ugly.
Good luck!
Related
I'm playing with Go in a simple HTTP server:
// var tpl = template.Must(template.New("").Funcs(template.FuncMap{"isRegistered": isRegistered}).ParseGlob("templates/*")) // functions will be added later
var tpl = template.Must(template.ParseGlob("templates/*"))
func contact(w http.ResponseWriter, r *http.Request) {
//// defined templates are: "home.html", "layout", "layout.html", "contact.html", "body"
log.Println("in handler: ", tpl.DefinedTemplates())
err := tpl.ExecuteTemplate(w, "contact.html", nil)
if err != nil {
fmt.Println(err) // no error displayed
}
// fmt.Fprintf((w), "write") - This works fine
}
func main() {
log.Println("Serving on 8888 port")
http.HandleFunc("/contact", contact)
http.ListenAndServe(":8888", nil)
}
{{define "layout"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{.Title}}</title>
<meta name="description" content="{{.Description}}">
<link rel="canonical" href="{{.Canonical}}" />
</head>
<body>
{{template "body" .}}
</body>
</html>
{{end}}
{{define "body"}}
<h1>Contact us page</h1>
<p>
Your name is...
</p>
{{end}}
The localhost:8888/contact returns OK 200 and empty body.
I used this example: https://stackoverflow.com/a/36643663/2110953
But I need to add template functions in future also:
var tpl = template.Must(template.New("").Funcs(template.FuncMap{"isRegistered": isRegistered}).ParseGlob("templates/*"))
Your contact.html does not "render" anything. It just defines the body template, but does not include it (execute it).
To execute a template (within a template), you may use the {{template}} action. To define and execute a template, you may use the {{block}} action.
Template Actions:
{{template "name"}}
The template with the specified name is executed with nil data.
{{template "name" pipeline}}
The template with the specified name is executed with dot set
to the value of the pipeline.
{{block "name" pipeline}} T1 {{end}}
A block is shorthand for defining a template
{{define "name"}} T1 {{end}}
and then executing it in place
{{template "name" pipeline}}
The typical use is to define a set of root templates that are
then customized by redefining the block templates within.
If your goal is to have a "fixed" header and footer in all pages, then you have to restructure your templates. Have a header and footer template defined somewhere, and the pages should include them as first and last elements. See How to use a field of struct or variable value as template name?
Update: So I had to just create a header and footer templates:
{{template "header" .}}
<h1>Contact us page</h1>
<p>
Your name is...
</p>
{{template "footer" .}}
{{define "header"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{.Title}}</title>
<meta name="description" content="{{.Description}}">
<link rel="canonical" href="{{.Canonical}}" />
</head>
<body>
{{end}}
{{define "footer"}}
</body>
</html>
{{end}}
and it worked fine
This is a strange bug. I have an html file that extends a base template called base.html. I noticed that a script tag right before the end body tag in the base template doesn't show up in the DOM in the Elements tab of the Chrome dev tools, and the tag is cut off completely along with the rest of the html file in the Sources tab. This happens in Chrome, Mozilla, and Safari, so it must be a problem on the Django side. And obviously the observable effects on the page that the script should create aren't happening either.
Here's the end of the rendered html in the Sources tab:
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/ba
Completely cut off. Here's the end of that base template:
{% block main %}{% endblock %}
<footer></footer>
<script src="{% static 'home/js/base.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
Now, here's where it gets funny. The trouble is at the end of the file, so I just added some newlines to see if there's any difference in the DOM is rendered:
{% block main %}{% endblock %}
<footer></footer>
<script src="{% static 'home/js/base.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
And the Sources tab showed a cut off later in the tag:
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/base.j
I won't paste it here, but I added about 35 newlines to the end of the file before I got what I wanted in the Sources. It seems that every newline cuts off the rendered html one character later.
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/base.js"></script>
</body>
</html>
And the effects from the script finally worked. This feels like a temporary solution to something deeper that needs to be fixed. Anybody have any clue what the hell is going on or where to look?
Edit: Here's the template (located in the work app) that extends base.html (located in the home app), called work.html:
{% extends 'home/base.html' %}
{% block css %}
<link rel="stylesheet" href="{% static 'work/css/work.css' %}">
{% endblock %}
{% block main %}
<section>
hello
</section>
{% endblock %}
And here is the view that renders it:
from django.shortcuts import render
def work(request):
return render(request, 'work/work.html', {})
Edit 2: some more unexpected results:
When I deleted the script (so that I can paste it in head as suggested in the comments), the end of the rendered html was this:
<section> what is going on </section>
And pasting right before the </head> tag resulted in:
<section> what is going on </section>
<
Same result above when I commented it out in head.
Commenting out the script when it's before the </body> results in this:
<section> what is going on </section>
<footer></footer>
<!-- <script src="/static/home/js/base.j
And replacing single quotes with double quotes resulted in the rendered html showing double quotes instead of single quotes as the only difference. :/
Then I deleted almost everything so that my code was this:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
And that rendered:
<!DOCTYPE html>
<html lang="en-US">
<head>
<scrip
I added back some tags:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
And the result:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://127.0.0.1:357
For some reason, the script tag generated by django-livereload-server remains. This is what the full script tag looks like:
<script src="http://127.0.0.1:35729/livereload.js"></script></head>
Mystery's over everybody. The problem is that you should not pip install django-livereload-server. I don't know what it does behind the scenes but some of my html disappear based on some weird algorithm.
So, to uninstall django-livereload-server, remove 'livereload', from your INSTALLED_APPS, remove 'livereload.middleware.LiveReloadScript', from your MIDDLEWARE, hit Control-C to get out of that livereload terminal process, Control-C in the window running the runserver process to apply the changes (because livereload latches onto runserver like a leech, so you have to restart), and enjoy expected output. And pip uninstall django-livereload-server. If anybody has any suggestions for a livereload type of app that works (where the browser reloads the page when you type something new in your html/js/css), let me know. For now I guess it's back to the old manually typed Command-R.
How do i pass the data to the right template?
I have the following templates and want to parse them
layout.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<header>
...
</header>
<main>
{{template "main"}}
</main>
</body>
</html>
list.html:
{{define "main"}}
{{range $index, $element := . }}
<div>
<a href=#>{{ $element.Data1 }}</a>
<p>{{ $element.Data2 }}</p>
<p>{{ $element.Data3 }}</p>
</div>
{{end}}
{{end}}
When i use this in the handler func only the "main" template is executed and i dont get the layout.
t, err := template.ParseFiles(layoutPath, templatePath)
t.ExecuteTemplate(w, "main", Data)
And with this i dont have the Data in the list template and so cant display the list.
t, err := template.ParseFiles(layoutPath, templatePath)
t.ExecuteTemplate(w, Data)
So how do i execute this properly?
From the docs:
{{template "name" pipeline}} The template with the specified name is
executed with dot set to the value of the pipeline.
This means that to pass data from the layout.html template to the list.html template you need to pass the data as the second argument of the template action.
E.g. {{template "main" .}}
How can I set a variable in each template that I can use in other templates e.g.
{{ set title "Title" }}
in one template then in my layout
<title> {{ title }} </title>
Then when it's rendered
tmpl, _ := template.ParseFiles("layout.html", "home.html")
it will set the title according to whatever was set in home.html instead of having to make a struct for each view page when it isn't really necessary. I hope I made sense, thanks.
Just for clarification:
layout.html:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }} </title>
</head>
<body>
</body>
</html>
home.html:
{{ set Title "Home" . }}
<h1> {{ Title }} Page </h1>
If you want to use the Value in another template you can pipeline it to the dot:
{{with $title := "SomeTitle"}}
{{$title}} <--prints the value on the page
{{template "body" .}}
{{end}}
body template:
{{define "body"}}
<h1>{{.}}</h1> <--prints "SomeTitle" again
{{end}}
As far as i know it is not possible to go upwards in the chain.
So layout.html gets rendered before home.html, so you cant pass a value back.
In your example it would be the best solution to use a struct and pass it from the layout.html to the home.html using the dot:
main.go
package main
import (
"html/template"
"net/http"
)
type WebData struct {
Title string
}
func homeHandler(w http.ResponseWriter, r *http.Request) {
tmpl, _ := template.ParseFiles("layout.html", "home.html")
wd := WebData{
Title: "Home",
}
tmpl.Execute(w, &wd)
}
func pageHandler(w http.ResponseWriter, r *http.Request) {
tmpl, _ := template.ParseFiles("layout.html", "page.html")
wd := WebData{
Title: "Page",
}
tmpl.Execute(w, &wd)
}
func main() {
http.HandleFunc("/home", homeHandler)
http.HandleFunc("/page", pageHandler)
http.ListenAndServe(":8080", nil)
}
layout.html
<!DOCTYPE html>
<html>
<head>
<title>{{.Title}} </title>
</head>
<body>
{{template "body" .}}
</body>
</html>
home.html
{{define "body"}}
<h1>home.html {{.Title}}</h1>
{{end}}
page.html
{{define "body"}}
<h1>page.html {{.Title}}</h1>
{{end}}
Also go has a nice documentation on how to use templates:
http://golang.org/pkg/text/template/
The use of if statements inside templates really is puzzling me.
I'm trying to put a class = "active" inside a nav list made with golang templates, to do a basic tab menu that detects the active tab.
Here's my attempt :
{{define "header"}}
<!DOCTYPE html>
<html>
<head>
<title>Geoprod</title>
{{template "stylesheet" .}}
</head>
<body>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<a{{if eq .Active "accueil"}} class="active"{{end}} href="/">Geoprod</a>
</div>
<div class="navbar-body">
<ul class="navbar-list">
<li{{if eq .Active "societe"}} class="active"{{end}}>Société</li>
<li{{if eq .Active "dossier"}} class="active"{{end}}>Dossier</li>
<li{{if eq .Active "temps"}} class="active"{{end}}>Temps</li>
<li{{if eq .Active "mails"}} class="active"{{end}}>Mails</li>
</ul>
</div>
</nav>
{{end}}
And in main.go :
var FuncMap = template.FuncMap{
"eq": func(a, b interface{}) bool {
return a == b
},
}
var templates = template.Must(template.ParseGlob("templates/*.html"))
and in func main()
templates.Funcs(FuncMap)
The program compiles, but i've found out adding the {{if eq .Active "something"}} class="active"{{end}} (^^ which I included here) causes the program to not display any text anymore. Any idea why?
I tried to convert your code into a minimal working example, and I believe your code and template works as expected. You can see my code (and run it) on the Go Playground.
My guess about what went wrong: Did you notice that {{define ...}} only defines a template for future use. You will still need to tell Go to actually use this template, either by using {{ template "header" }} or similar in a main template, or by using templates.ExecuteTemplate.