twigのテンプレートエンジンでの
ヘッダー、フッターの続きです
デザイン的な所はtwitter bootstrapで逃げます
twitter bootstrap(Bootstrap)を
ダウンロードする
ダウンロード後にassetsというフォルダのまま
ファイルを置きます
これだけだと、gaeは認識できないので
appy.yamlを修正する
/appy.yaml
- url: /assets/css/ static_dir: assets/css - url: /assets/js/ static_dir: assets/js - url: /assets/fonts/ static_dir: assets/fonts - url: /assets/img static_dir: assets/img
ベースのテンプレートにcssやjsを読み込みの部分を追加する
(IE8対応は省略)
/views/base.html.twig
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }} | sitemap作成ツール</title> {% block head %} {% endblock head %} <!-- Bootstrap core CSS --> <link href="/assets/css/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="/assets/css/main.css" rel="stylesheet"> <script src="/assets/js/jquery-1.11.1.min.js"></script> <script src="/assets/js/hover.zoom.js"></script> <script src="/assets/js/hover.zoom.conf.js"></script> {% block headjs %} {% endblock headjs %}
ヘッダー部分にnavbarを追加する
/views/_header.html/twig
<!-- Static navbar --> <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{_top}}">SiteMap作成ツール</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="{{_top}}/createsitemap/index.php">sitemapの作成</a></li> <li><a href="{{_top}}/howto/index.php">sitemapの作成方法</a></li> <li><a href="{{_top}}/link/index.php">参考サイト</a></li> <li><a href="{{_top}}/blog/index.php">開発日記</a></li> </ul> </div><!--/.nav-collapse --> </div> </div>
フッター部分のテンプレートを作成する
/views/_footer.html/twig
<div id="footer"> <div class="container"> <div class="row"> <div class="col-lg-4"> <h4>SNS Links</h4> <p> <a href="https://twitter.com/masalib">Twitter</a><br> <a href="https://www.facebook.com/masanori.hirano.50">Facebook</a><br> <a href="https://plus.google.com/100263024879974240582/posts">google+</a> </p> </div><!-- /col-lg-4 --> <div class="col-lg-4"> <h4>BLOG</h4> <p> <a href="http://masalib.hatenablog.jp/">ネコと嫁との生活BLOG</a><br> <a href="http://masalib.hatenablog.com/">開発日記</a> </p> </div><!-- /col-lg-4 --> <div class="col-lg-4"> <h4>問い合わせ</h4> <p>何もないと思いますが<br> <a href="mailto:masalib@gmail.com">masalib@gmail.com</a>まで </p> </div><!-- /col-lg-4 --> </div> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="/assets/js/bootstrap.min.js"></script>
indexにメインコンテンツを修正する
/views/index.html.twig
{% block body %} <!-- +++++ Welcome Section +++++ --> <div id="ww"> <div class="container"> <div class="row"> <div class="col-lg-8"> <h1>sitemap作成top</h1> <p>サイトトップ文言<br> XXXXXXXXXXXXXXXX<br> </p> </div><!-- /col-lg-8 --> <div class="col-lg-4"> <h2>更新履歴</h2> <p>更新履歴xxxxxxx<br> 更新履歴xxxxxxx<br> 更新履歴xxxxxxx<br> 更新履歴xxxxxxx<br></p> </div><!-- /col-lg-4 --> </div><!-- /row --> </div> <!-- /container --> </div><!-- /ww --> {% endblock %}
これでtwitter bootstrapっぽくなりました
実行結果
誰もみないと思いますが
ソースを置いています
blog20150823.zip - Google ドライブ
お恥ずかしいですが
githubにあげればいいのですが
あまり理解していないので
gdriveのファイル共有にします