[Go言語]GinでHTMLテンプレート共通部分

どうも、インド人はカレーのナンを左手を使わず食べると聞いてから、自分も右手だけでちぎって食べるようになったざわです!

今回はGinのHTMLテンプレートで共通部分の作り方メモです。

importの追加

"html/template" を追加する

import (
    "github.com/gin-gonic/gin"
    "html/template"
)

ルーター設定

/index にアクセスしたら base.tmpl(共通部分)index.tmpl の内容を埋め込む設定です

import (

    "github.com/gin-gonic/gin"
    "html/template"
)

func main() {
    router := gin.Default()
    router.LoadHTMLGlob("templates/*.tmpl")

    router.GET("/index", func(c *gin.Context) {
        // テンプレート設定       
        html := template.Must(template.ParseFiles("templates/base.tmpl", "templates/index.tmpl"))
        router.SetHTMLTemplate(html)
        c.HTML(http.StatusOK, "base.tmpl", gin.H{})
    })
}

base.tmpl

コンテンツを呼び出すほう

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ベーす</title>
  <!-- 共通のCSSなど -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"/>
  <!-- 共通のJSなど -->
  <script src="https://ajax.googleapis.com/ajaxlibs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div>    
  ここはBASE部分
  <!-- 呼び出し方 -->
  {{template "content"}}
  ここはBASE部分
</div>
</body>
</html>

index.tmpl(コンテンツ部分)

呼び出されるほう。{{define "content"}}{{end}} で囲みます。`

define "コンテンツ名" です

{{define "content"}}
<div class="text-center">
コンテンツ呼び出されましたー
</div>
<script>
 // 画面固有の実装など
</script>
{{end}}

結果

http://localhost:8080/index アクセスしてみます

期待通り動きました

サーバサイドエンジニア。オムライスが好物

シェアする

  • このエントリーをはてなブックマークに追加

フォローする