Harukaのnote

Linuxやプログラミング,写真,旅行等の記録帳

TornadoのHTML内でHTMLを読み込む

Tornadoで共通のheaderやfooterを読み込みたいとき

TornadoはまだRailsPHPほど日本語の記事がなく、やり方がわからず困っていました。
jQueryなどでhtmlファイルからhtmlファイルを呼び出せないかあがいていましたが、Tornado側から非常に簡単に呼び出すことができることがわかりました。
まず、header.html、footer.htmlをtemplates下に作成します。
header.htmlなどにはやなどは書かず、必要な部分のみ書きます。
今回はナビゲーションバーが欲しかったため、以下のように記述しました

header.html
<nav class="navbar navbar-default ">
  <div class="container-fluid">
  <!-- ヘッダー部分 ================ -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstap</a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_target">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
  <!-- 中央のナビゲーション部分 ================ -->
    <div class="collapse navbar-collapse" id="nav_target">
      <ul class="nav navbar-nav">
        <!-- リンクのみ -->
          <li class="active"><a href="#">Nav 1</a></li>
          <li><a href="#">Nav 2</a></li>
        <!-- Nav3 ドロップダウン -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav3 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">link 1</a></li>
              <li><a href="#">link 2</a></li>
              <li class="divider"></li>
              <li><a href="#">link3</a></li>
            </ul>
          </li>
        <!-- Nav4 ドロップダウン -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav4 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">link 1</a></li>
              <li><a href="#">link 2</a></li>
              <li class="divider"></li>
              <li><a href="#">link3</a></li>
            </ul>
          </li>
      </ul>
  <!-- 右寄せになる部分 ================ -->
      <ul class="nav navbar-nav navbar-right">
        <!-- リンクのみ -->
          <li><a href="#">Nav 5</a></li>
        <!-- Nav6 ドロップダウン -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav6 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">link 1</a></li>
              <li><a href="#">link 2</a></li>
              <li class="divider"></li>
              <li><a href="#">link3</a></li>
            </ul>
          </li>
      </ul>
    </div>
  </div>
</nav>

後は、index.html(任意のファイル)内で、以下のように{% include "header.html" %}を書くだけです。

index.html
<!DOCTYPE>
<html>
  <body>
    <!-- header部分 -->
    {% include "header.html" %}

    <!-- body部分 -->
    Hello World!!

    <!-- footer部分 -->
    {% include "footer.html" %}
  </body>
<html>

簡単すぎます。
悩んだ時間を返してほしいです(笑)

ナビゲーションバーは以下のサイトの記事を参考にさせて頂きました。
studio-key.com