golangでhtmlファイルの一部を別ファイルに分けるには

Posted by kwmt on Tue, Jun 5, 2012

まえおき

前回のエントリーで、「template.ParseFiles()の引数には、

複数ファイルを指定することができ、

たとえば、header.html、main.html、footer.htmlなどに分けることができます。」と書きましたが、

具体的にどうしたらよいかをまとめておこうと思います。

どうしたいのか

前回と同じHTMLですが、このファイルをmain.htmlとしましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
    div.tl  {width:600px;}
    table,td {border: solid; border-collapse: collapse;}
</style>
</head>
<body>
<div class="tl">
<table border cellspacing=0>
{{range .}}
    <tr>
    <td>
    日時:{{.Created_at}}<br/>
    ツイート:{{.Text}} <br/>
    スクリーン名:{{.User.Screen_name}}
    </td>
    </tr>
{{end}}
</table>
</div>
</body>
</html>

これを、たとえば、ツイッターの内容の部分を別ファイルにするということを考えます。

対策

まず内容の部分は<div class="tl">から</div>までなので、それを切り取り別ファイルに移動しましょう。

移動先のファイル名はcontent.htmlとでもしときます。

{{define "content"}}
<div class="tl">
<table border cellspacing=0>
{{range .}}
    <tr>
    <td>
    日時:{{.Created_at}}<br/>
    ツイート:{{.Text}} <br/>
    スクリーン名:{{.User.Screen_name}}
    </td>
    </tr>
{{end}}
</table>
</div>
{{end}}

<div class="tl">から</div>の部分を{{define "content"}}{{end}}

で挟んでいますが、これは<div class="tl">から</div>までを"content"として定義しますよという宣言です。

次に、元のmain.htmlはどうなるかというと、次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div.tl  {width:600px;}
        table,td {border: solid; border-collapse: collapse;}
    </style>
</head>
<body>
    {{template "content" .}}
</body>
</html>

内容があった部分が{{template "content" .}}に変わっていることがわかると思います。

この"content"は先程content.html

{{define "content"}}で定義した"content"です。

そして、今回の場合だとこの"content"のあとに .(dot)が必要になります。

この.(dot)がないと、きちんとcontent.htmlの内容を表示してくれません。

最後に、template.ParseFiles()の引数にcontent.htmlを追加します。

基本的には以上が書きたかったことです。が、もうちょっとだけ。

{{tempalte "content" .}}.(dot)について

上記で「今回の場合だとこの"content"のあとに .(dot)が必要になります。」

と書きましたが、他の場合は.(dot)はいらないのか?というと、いらない場合もあります。

たとえば、copyrightのような文言を別ファイルにして、メインファイルに読み込ませたいとします。

{{define "copyright"}}
Copyright <img src="http://blog.seesaa.jp/images_e/e/F074.gif" alt="コピーライトマーク" width="15" height="15" border="0" /> 2012 xxxxxx All Rights Reserved.
{{end}}

これをmain.htmlに読み込ませたいとすると、

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            div.tl  {width:600px;}
            table,td {border: solid; border-collapse: collapse;}
        </style>
    </head>
    <body>
        {{template "content" .}}
        {{template "copyright"}}
    </body>
</html>

と、このようになり、"copyright"のあとには.(dot)がありません。

(もちろん、template.ParseFiles()の引数にcopyright.htmlを追加してください。)

つまり、別ファイルにした際、.(dot).Screen_nameなどがあれば、{{template "content" .}}

のように.(dot)をつけ、そのような変数がなければ、{{template "copyrighte"}}のように.(dot)無しとして使います。

(今のところそういう認識)

以上です。

参考



comments powered by Disqus