HTML Views

Layouts

The layout generally contains the HTML skeleton such as the <head>, <body>, and other elements that your page may need. It leaves stubs for the page by defining template areas. These areas are defined by the page and are filled in dynamically.

By default, Copper generates the web/src/layouts/main.html. You can create as many layouts here as your app needs.

web/src/layouts/main.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Command Center</title>
  </head>
  <body>
    {{ template "content" }}
  </body>
</html>

Pages

A page represents the document that is rendered for a specific URL path. It is contained inside of a layout. It must define each template required by the layout.

web/src/pages/index.html

{{ define "content" }}
<p>
    {{ range .Rockets }}
        {{ partial "rocket" . }}
    {{ end }}
</p>
{{ end }}

Partials

Finally, partials provide a way to move HTML snippets into their own components. These are defined in the web/src/partials directory. A partial named "rocket" must be defined in rocket.html.

web/src/partials/rocket.html

<div>
    This is rocket: {{ .Name }}
</div>

Writing HTML Responses

Copper provides chttp.ReaderWriter that can be used to write HTML responses. chttp.ReaderWriter is available by default on Routers generated by the Copper CLI.

Use the WriteHTML method to take advatange of the layouts, pages, and partials defined in the web/ directory.

ro.rw.WriteHTML(w, r, chttp.WriteHTMLParams{
	PageTemplate:   "index.html",
	LayoutTemplate: "main.html",
	Data: map[string][]posts.Post{
		"Rockets": allRockets,
	},
})

In the example above, the main.html layout is used to render the index.html page. We also pass in data that can be accessed within the Go templates.

PreviousRead & Write JSON NextMiddleware

Last updated 2 years ago

Was this helpful?

HTML Views

Layouts

By default, Copper generates the web/src/layouts/main.html. You can create as many layouts here as your app needs.

web/src/layouts/main.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Command Center</title>
  </head>
  <body>
    {{ template "content" }}
  </body>
</html>

Pages

A page represents the document that is rendered for a specific URL path. It is contained inside of a layout. It must define each template required by the layout.

web/src/pages/index.html

{{ define "content" }}
<p>
    {{ range .Rockets }}
        {{ partial "rocket" . }}
    {{ end }}
</p>
{{ end }}

Partials

Finally, partials provide a way to move HTML snippets into their own components. These are defined in the web/src/partials directory. A partial named "rocket" must be defined in rocket.html.

web/src/partials/rocket.html

<div>
    This is rocket: {{ .Name }}
</div>

Writing HTML Responses

Copper provides chttp.ReaderWriter that can be used to write HTML responses. chttp.ReaderWriter is available by default on Routers generated by the Copper CLI.

Use the WriteHTML method to take advatange of the layouts, pages, and partials defined in the web/ directory.

ro.rw.WriteHTML(w, r, chttp.WriteHTMLParams{
	PageTemplate:   "index.html",
	LayoutTemplate: "main.html",
	Data: map[string][]posts.Post{
		"Rockets": allRockets,
	},
})

In the example above, the main.html layout is used to render the index.html page. We also pass in data that can be accessed within the Go templates.

PreviousRead & Write JSON NextMiddleware

Last updated 2 years ago

Was this helpful?