Layouts

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


    Using a Standard Layout

    It is quite common to want to use the same layout across most, if not all of an application. When creating a new render.Engine the HTMLLayout property can be set to a file that will automatically be used by the render.HTML function.

    var r *render.Engine
    
    func init() {
    	r = render.New(render.Options{
    		// ...
    		HTMLLayout:     "application.html",
    		// ...
    	})
    }
    
    <!-- templates/application.html -->
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="main">
          {{ yield }}
        </div>
      </body>
    </html>
    
    <!-- templates/hello.html -->
    <h1>Hello!!</h1>
    
    func Hello(c buffalo.Context) error {
      return c.Render(200, r.HTML("hello.html"))
    }
    
    <!-- result -->
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="main">
          <h1>Hello!!</h1>
        </div>
      </body>
    </html>
    

    Using a Custom Layout

    Sometimes, on certain requests, a different layout is needed. This alternate layout can be passed in as the second parameter to render.HTML.

    var r *render.Engine
    
    func init() {
    	r = render.New(render.Options{
    		// ...
    		HTMLLayout:     "application.html",
    		// ...
    	})
    }
    
    <!-- templates/custom.html -->
    <html>
      <head>
        <title>My Custom Layout</title>
      </head>
      <body>
        <div id="main">
          {{ yield }}
        </div>
      </body>
    </html>
    
    <!-- templates/hello.html -->
    <h1>Hello!!</h1>
    
    func Hello(c buffalo.Context) error {
      return c.Render(200, r.HTML("hello.html", "custom.html"))
    }
    
    <!-- result -->
    <html>
      <head>
        <title>My Custom Layout</title>
      </head>
      <body>
        <div id="main">
          <h1>Hello!!</h1>
        </div>
      </body>
    </html>