Tornadoで共通のheaderやfooterを読み込みたいとき
TornadoはまだRailsやPHPほど日本語の記事がなく、やり方がわからず困っていました。
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