跳到主要内容
版本: v1.8.3_v1.x.x

HTML

Release Discord Test Security Linter

HTML 是官方的 Go 模板引擎 html/template，查看原始语法文档请点击此处

信息

指定视图目录中的所有模板都会在开始时进行分析和编译，以提高使用时的性能。因此需要注意的是，不应存在同名的 definition，否则它们会相互覆盖。对于模板化，应使用 {{embed}} 标签

基本示例​

./views/index.html

{{template "partials/header" .}}

<h1>{{.Title}}</h1>

{{template "partials/footer" .}}

./views/partials/header.html

<h2>Header</h2>

./views/partials/footer.html

<h2>Footer</h2>

./views/layouts/main.html

<!DOCTYPE html>
<html>
  <head>
    <title>Main</title>
  </head>

  <body>
    {{embed}}
  </body>
</html>
package main

import (
	"log"

	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/template/html/v2"
)

func main() {
	// Create a new engine
	engine := html.New("./views", ".html")

	// Or from an embedded system
	// See github.com/gofiber/embed for examples
	// engine := html.NewFileSystem(http.Dir("./views", ".html"))

	// Pass the engine to the Views
	app := fiber.New(fiber.Config{
		Views: engine,
	})

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

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

	app.Get("/layouts-nested", func(c *fiber.Ctx) error {
		// Render index within layouts/nested/main within layouts/nested/base
		return c.Render("index", fiber.Map{
			"Title": "Hello, World!",
		}, "layouts/nested/main", "layouts/nested/base")
	})

	log.Fatal(app.Listen(":3000"))
}

使用 embed.FS 的示例​

package main

import (
    "log"
    "net/http"
    "embed"

    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html"
)

//go:embed views/*
var viewsfs embed.FS

func main() {
    engine := html.NewFileSystem(http.FS(viewsfs), ".html")

    // Pass the engine to the Views
    app := fiber.New(fiber.Config{
        Views: engine,
    })


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

    log.Fatal(app.Listen(":3000"))
}

并将起点更改为视图目录

./views/index.html

{{template "views/partials/header" .}}

<h1>{{.Title}}</h1>

{{template "views/partials/footer" .}}

使用 innerHTML 的示例​

package main

import (
    "embed"
    "html/template"
    "log"
    "net/http"

    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html"
)

//go:embed views/*
var viewsfs embed.FS

func main() {
    engine := html.NewFileSystem(http.FS(viewsfs), ".html")
    engine.AddFunc(
        // add unescape function
        "unescape", func(s string) template.HTML {
            return template.HTML(s)
        },
    )

    // Pass the engine to the Views
    app := fiber.New(fiber.Config{Views: engine})

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

    log.Fatal(app.Listen(":3000"))
}

并将起点更改为视图目录

./views/index.html

<p>{{ unescape .Title}}</p>

html 输出

<p>Hello, <b>World</b>!</p>