fiber/docs/guide/templates.md

6.0 KiB

id title description sidebar_position
templates 📝 Templates Fiber supports server-side template engines. 3

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

Templates are a great tool to render dynamic content without using a separate frontend framework.

Template Engines

Fiber allows you to provide a custom template engine at app initialization.

app := fiber.New(fiber.Config{
    // Pass in Views Template Engine
    Views: engine,

    // Default global path to search for views (can be overriden when calling Render())
    ViewsLayout: "layouts/main",

    // Enables/Disables access to `ctx.Locals()` entries in rendered views
    // (defaults to false)
    PassLocalsToViews: false,
})

Supported Engines

The Fiber team maintains a templates package that provides wrappers for multiple template engines:

:::info Custom template engines can implement the Views interface to be supported in Fiber. :::

type Views interface {
    // Fiber executes Load() on app initialization to load/parse the templates
    Load() error

    // Outputs a template to the provided buffer using the provided template,
    // template name, and binded data
    Render(io.Writer, string, interface{}, ...string) error
}

:::note The Render method is linked to the ctx.Render() function that accepts a template name and binding data. :::

Rendering Templates

Once an engine is set up, a route handler can call the ctx.Render() function with a template name and binded data to send the rendered template.

func (c Ctx) Render(name string, bind Map, layouts ...string) error

:::info By default, ctx.Render() searches for the template name in the ViewsLayout path. To override this setting, provide the path(s) in the layouts argument. :::

app.Get("/", func(c fiber.Ctx) error {
    return c.Render("index", fiber.Map{
        "Title": "Hello, World!",
    })

})
<!DOCTYPE html>
<html>
    <body>
        <h1>{{.Title}}</h1>
    </body>
</html>

:::caution If the Fiber config option PassLocalsToViews is enabled, then all locals set using ctx.Locals(key, value) will be passed to the template. It is important to avoid clashing keys when using this setting. :::

Advanced Templating

Custom Functions

Fiber supports adding custom functions to templates.

AddFunc

Adds a global function to all templates.

func (e *Engine) AddFunc(name string, fn interface{}) IEngineCore
// Add `ToUpper` to engine
engine := html.New("./views", ".html")
engine.AddFunc("ToUpper", func(s string) string {
    return strings.ToUpper(s)
}

// Initialize Fiber App
app := fiber.New(fiber.Config{
    Views: engine,
})

app.Get("/", func (c fiber.Ctx) error {
    return c.Render("index", fiber.Map{
        "Content": "hello, World!"
    })
})
<!DOCTYPE html>
<html>
    <body>
        <p>This will be in {{ToUpper "all caps"}}:</p>
        <p>{{ToUpper .Content}}</p>
    </body>
</html>

AddFuncMap

Adds a Map of functions (keyed by name) to all templates.

func (e *Engine) AddFuncMap(m map[string]interface{}) IEngineCore
// Add `ToUpper` to engine
engine := html.New("./views", ".html")
engine.AddFuncMap(map[string]interface{}{
    "ToUpper": func(s string) string {
        return strings.ToUpper(s)
    },
})

// Initialize Fiber App
app := fiber.New(fiber.Config{
    Views: engine,
})

app.Get("/", func (c fiber.Ctx) error {
    return c.Render("index", fiber.Map{
        "Content": "hello, world!"
    })
})
<!DOCTYPE html>
<html>
    <body>
        <p>This will be in {{ToUpper "all caps"}}:</p>
        <p>{{ToUpper .Content}}</p>
    </body>
</html>

Full Example

package main

import (
    "log"
    "github.com/gofiber/fiber/v3"
    "github.com/gofiber/template/html/v2"
)

func main() {
    // Initialize standard Go html template engine
    engine := html.New("./views", ".html")
    // If you want to use another engine,
    // just replace with following:
    // Create a new engine with django
    // engine := django.New("./views", ".django")

    app := fiber.New(fiber.Config{
        Views: engine,
    })
    app.Get("/", func(c fiber.Ctx) error {
        // Render index template
        return c.Render("index", fiber.Map{
            "Title": "Go Fiber Template Example",
            "Description": "An example template",
            "Greeting": "Hello, World!",
        });
    })

    log.Fatal(app.Listen(":3000"))
}
<!DOCTYPE html>
<html>
    <head>
        <title>{{.Title}}</title>
        <meta name="description" content="{{.Description}}">
    </head>
<body>
    <h1>{{.Title}}</h1>
        <p>{{.Greeting}}</p>
</body>
</html>