Gin是一款輕量級的Web框架，被廣泛應用於Go語言的Web開發中。在Gin中，Web應用程式通常只需要渲染一個模板即可完成頁面的展示。這種設計使得開發者可以更專注於業務邏輯的實現，簡化了開發流程。在php小編小新的觀點中，Gin的這種特性不僅提高了開發效率，還能減少資源的佔用，使得Web應用程式更有效率。同時，Gin也提供了豐富的中間件和插件，為開發者提供了更多的擴充性和靈活性。總之，Gin的簡潔而強大的特性使得它成為了許多開發者的首選框架。
問題內容
我有一個 Gin Web 應用程序，其中包含基於一組部分和一個基本模板的多個 HTML 模板。基本模板似乎與相關部分一起渲染得很好，但我的主要視圖、登入、索引和註冊沒有按預期渲染。每當我存取其中任何一個的 HTTP 端點時，只會呈現暫存器視圖。
以下文件中缺少或配置錯誤的內容導致我的路由無法呈現請求的頁面？
我的專案有以下結構。
├── app
...
│ ├── handlers
│ │ ├── general
│ │ │ └── general.go
│ │ └── routes.go
│ ├── main.go
│ ├── reloadDev.sh
│ ├── static
│ │ ├── css
│ │ ├── img
│ │ └── js
│ └── templates
│ ├── home
│ │ ├── index.tmpl.html
│ │ ├── login.tmpl.html
│ │ └── register.tmpl.html
│ ├── layouts
│ │ └── base.tmpl.html
│ └── partials
│ ├── footer.tmpl.html
│ ├── head.tmpl.html
│ └── navbar.tmpl.html
登入後複製
base.tmpl.html
{{ define "base" }}
<!DOCTYPE html>
<html lang="eng" data-bs-theme="dark">
{{ template "head" . }}
{{template "navbar" .}}
<body>
{{ block "content" . }}{{ end }}
</body>
{{template "footer" .}}
</html>
{{end}}登入後複製
註冊.tmpl.html
{{ template "base" . }}
{{ define "content" }}
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1>Register</h1>
<form action="/register" method="post">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password" required>
</div>
...SNIP...
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
{{ end }}登入後複製
index.tmpl.html（登入的結構與這兩個相同。）
{{ template "base" . }}
{{ define "title" }}Home{{ end }}
{{ define "content" }}
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<p>Welcome to Astra Porta.</p>
<p>Click <a href="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p>
</div>
</div>
</div>
{{ end }}登入後複製
HTML 範本使用 embed.FS 與二進位檔案捆綁在一起。
//go:embed templates/partials/* templates/layouts/* templates/home/*
var files embed.FS
func main() {
router := setupRouter()
err := router.Run()
if err != nil {
panic(err)
}
}
func setupRouter() *gin.Engine {
router := gin.Default()
subFS, e := fs.Sub(files, "templates")
if e != nil {
panic(e)
}
tmpl := template.Must(template.ParseFS(
subFS,
"layouts/*.html",
"partials/*.html",
"home/*.html",
))
router.SetHTMLTemplate(tmpl)
router.StaticFS("/static", http.Dir("static"))
err := router.SetTrustedProxies(nil)
if err != nil {
panic(err)
}
handlers.InitializeRoutes(&router.RouterGroup)
return router
}登入後複製
頁面在我的應用程式路由中呈現。此處的引用會對應到 *.tmpl.html 檔案的檔案名稱。
func SiteIndex(c *gin.Context) {
c.HTML(http.StatusOK, "index.tmpl.html", nil)
}
func GetRegister(c *gin.Context) {
c.HTML(http.StatusOK, "register.tmpl.html", nil)
}
func GetLogin(c *gin.Context) {
c.HTML(http.StatusOK, "login.tmpl.html", nil)
}登入後複製
解決方法
對於其他遇到此問題的人。 mkopriva 評論中指出的解決方案是正確的。我刪除了 base.tmpl.html 並使用更新的部分和目標頁面組成每個視圖。
標題
{{ define "header" }}
<!DOCTYPE html>
<html lang="eng" data-bs-theme="dark">
{{template "navbar" .}}
<body>
{{ block "content" . }}{{ end }}
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...SNIP...
<title>App</title>
</head>
{{end}}登入後複製
頁尾
{{define "footer"}}
<div class="container">
<footer class="py-3 my-4" data-bs-theme="dark">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="/" class="nav-link px-2 text-body-secondary">Home</a></li>
</ul>
<p class="text-center text-body-secondary">© 2024 .</p>
</footer>
</div>
</body>
</html>
{{end}}登入後複製
有問題的頁面
{{template "header"}}
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<p>Welcome to Astra Porta.</p>
<p>Click <a href="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p>
</div>
</div>
</div>
{{template "footer"}}登入後複製
以上是Gin Web 應用程式僅渲染一個模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！
