LoginSignup
1
3

More than 5 years have passed since last update.

Go管理画面テンプレート

Last updated at Posted at 2017-08-26
1 / 7

Go管理画面

Goで管理画面を作った。

その時の記事はこちら。
Goで管理画面を作る

管理画面はヘッダーやメニュー
ログイン情報など共通部分が多い。

全部のテンプレートに書くのは
あとから変える時に大変なので
まとめて共通テンプレートで作ることにした。


テンプレートをそれぞれ作る

共通で以下のテンプレートを作成。
中身は普通のHTML/CSS(bootstrap)

・menu.html
・login.html
・header.html
・footer.html
・get.html


テンプレートの中身

・menu.html

{{define "menu"}}
<div class="panel panel-primary">
    <div class="panel-heading">
        メニュー
    </div>
    <ul class="nav nav-pills nav-stacked">
        {{with .Menu}}
            <li><a href="/report"><i class="glyphicon glyphicon-duplicate"></i> レポート</a></li>
            <li><a href="/message"><i class="glyphicon glyphicon-comment"></i> メッセージ</a></li>
        {{end}}
    </ui>
</div>
{{end}}

各ページから指定する

ページから共通テンプレートを読む。
{{ template ~ }} を指定すればOK。

指定する名前は
{{define ~}} で定義したもの。

{{define "index"}}<!doctype html>
<html>
    <head>
        {{ template "header" . }}
    </head>
    <body>
        {{ template "login" . }}
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    {{ template "menu" . }}
                </div>
              ・
              ・
              ・

             以下省略

テンプレートをまとめて読む

あとは読む時に全部まとめて読めばOK。
大体こんな感じ。

tfs := []string{"header.html", "login.html", "menu.html"}

ms.templates["dashboard.html"] = template.Must(template.New("").ParseFiles("dashboard.html", tfs...))

(だいぶ省略しています。
 全部見たい方がいたらコメントください!)


これでOK

これで共通部が変更になっても
全ページ変えずに済むので楽ですね (^^)

フロントはあまり得意じゃないのですが
そうも言ってられないので
もっと勉強していい管理画面を作っていきます。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3