logo Buffalo slack logo
Templating
Frontend

Templating#

This document only applies when using https://github.com/gobuffalo/buffalo/tree/main/render. Please see github.com/gobuffalo/plush for more details on the underlying templating package.

Buffalo defaults to using plush as its template engine.

Introduction to Plush#

Plush - Tips, Tricks and Testing#

General Usage#

Plush allows you to capture the context variables to use anywhere in your templates.

actions/index.go
templates/index.plush.html
Output
func myHandler(c buffalo.Context) error {
  c.Set("name", "John Smith")
  return c.Render(http.StatusOK, r.HTML("index.plush.html"))
}

Plush Examples#

Conditional Statements#

IF
ELSE
ELSE IF
Multiple Conditions
<%= if (true) { %>
  <!-- some template content -->
<% } %>
actions/main.go
templates/index.plush.html
Output
func MyHandler(c buffalo.Context) error {
	// ...
	c.Set("userName", "John Smith")
	return c.Render(http.StatusOK, r.HTML("templates/index.plush.html"))
}

Iterating#

Through Slices#

When looping through slices, the block being looped through will have access to the “global” context.

The for statement takes 1 or 2 arguments. When using the two arguments version, the first argument is the “index” of the loop and the second argument is the value from the slice.

actions/main.go
Loop using 2 Arguments
Loop using 1 Arguments
func MyHandler(c buffalo.Context) error {
  c.Set("names", []string{"John", "Paul", "George", "Ringo"})
  return c.Render(http.StatusOK, r.HTML("index.plush.html"))
}

Through Maps#

Looping through maps using the each helper is also supported, and follows very similar guidelines to looping through arrays.

When using the two argument version, the first argument is the key of the map and the second argument is the value from the map:

actions/main.go
Loop using 2 Arguments
Loop using 1 Arguments
func ColorsHandler(c buffalo.Context) error {
	colors := map[string]interface{}{
		"White":  "#FFFFFF",
		"Maroon": "#800000",
		"Red":    "#FF0000",
		"Purple": "#800080",
	}

	c.Set("colors", colors)
	return c.Render(http.StatusOK, r.HTML("home/colors.plush.html"))
}
You can see more examples in plush repository.