masalibの日記

システム開発、運用と猫の写真ブログです

クローラーのサービスを作る その5:TWIGの調査3{{ title }} | sitemap作成ツール

twigのテンプレートエンジンでの
ヘッダー、フッターの続きです

masalib.hatenablog.com


デザイン的な所は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っぽくなりました
実行結果

f:id:masalib:20150823234153j:plain

誰もみないと思いますが
ソースを置いています

blog20150823.zip - Google ドライブ


お恥ずかしいですが
githubにあげればいいのですが
あまり理解していないので
gdriveのファイル共有にします

今後

クローラーの部分から離れている・・・

もう少しTWIGを調査して
本丸(クローラー)に攻めたいです