Chapter 16: HTML Sorting & Layouts
"Don't build a new house for every guest. Just change the furniture."
In the "Basic Server" chapter, we served simple HTML. But what if we want to show 100 books? We can't write 100 HTML files. We need Templates.
16.1 The Mechanic: html/template
Go has a powerful standard library for this. It takes a skeleton (Template) and data (Go Struct), and merges them.
// Skeleton
<h1>Hello, {{.Name}}!</h1>
// Data
User{Name: "Alice"}
// Result
<h1>Hello, Alice!</h1>16.2 Structure: The Layout Pattern
Professional apps don't copy-paste the <head> and <footer> into every file. We use the Layout Pattern (The Sandwich).
- Layout (
base.html): The Bread. Contains<html>,<body>, generic CSS. It defines a "hole" for the content. - Page (
home.html): The Meat. Contains only the unique content for that page. - Partial (
footer.html): The Pickle. Small reusable bits.
The Code
Layout (The Bread):
{{define "base"}}
<html>
<body>
{{template "content" .}} <!-- The Hole -->
</body>
</html>
{{end}}Page (The Meat):
{{define "content"}}
<h1>Welcome!</h1>
{{end}}16.3 The Dot (.)
You will see . everywhere. {{template "footer" .}}
What is it? The Dot is the Data you passed to the template.
- If you pass a
Userstruct,.is the User. - If you pass
{{.Name}}, you are saying "Look inside the Data (Dot) and find Name".
When you include a partial: {{template "footer" .}}, you are passing the same data down to the footer. If you wrote {{template "footer"}} (no dot), the footer would receive nothing and crash if it tried to print the Year.
16.4 Practice: Refactoring
We have refactored our cmd/web-demo to use this structure.
layouts/base.htmlpages/home.htmlparts/header.html
Go ahead and explore the templates/ folder!
🎓 Knowledge Check: Why do we pass the Dot . to partials?
Answer: To give the partial access to the data (like .Year or .User). Without the dot, the partial receives nil data.