2018-05-18

継承するテンプレートを作成

/layouts/base.html をつくる

継承しそうな範囲を@sectionで囲み、ファイル名をbase.htmlに変更しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  @section(head-meta)
  @include("/include/head/meta.html")
  @endsection
  
  @section(head-link)
  @include("/include/head/link.html")
  @endsection
  
  @section(head-js)
  @include("/include/head/js.html")
  @endsection
</head>
<body class="page-head-push">
  @section(body-start)
  @endsection

  @section(header)
  <header class="page-header" role="banner">
    <div class="container">
      <a href="%{HOME_URL}" class="brand">%{DOMAIN}</a>
      <span class="acms-hide-pc acms-hide-tablet"><a class="js-offcanvas-btn js-offcanvas-btn-r" href="#offcanvas"><i class="acms-icon-sort"></i></a></span>
    </div>
  </header>
  @endsection
  
  <main role="main">

    @section(page-title)
    <section class="jumbotron">
      <div class="container">				
        <!-- BEGIN_IF [%{VIEW}/eq/top] -->
        <h1 class="site-name">%{BLOG_NAME}</h1>
        <!-- ELSE -->
        <p class="site-name"><a href="%{BASE_URL}">%{BLOG_NAME}</a></p>
        <!-- END_IF -->
        <p class="lead">%{META_DESCRIPTION}</p>
      </div>
    </section>
    @endsection
    
    @section(topic-path)
    @endsection
    
    <!-- BEGIN_MODULE Touch_Login -->
    <div class="admin-action">
      <div class="container">
        @include("/admin/action.html")
      </div>
    </div>
    <!-- END_MODULE Touch_Login -->
    
    <section class="section">
      <div class="container">
        <div class="article-index">
          @section(main)
          @include("/include/entry/body.html", {"module_id": "entryBody"})
          @endsection
      </div>
        <aside class="article-aside">
          <div class="js-offcanvas" id="offcanvas">
            @section(aside)
            @include("/include/parts/search.html")
            @endsection
          </div>
        </aside>
      </div>
    </section>
  </main>

  <!-- BEGIN_MODULE Touch_Entry -->
  <!-- GET_Rendered id="serialNavi" -->
  <!-- END_MODULE Touch_Entry -->
  
  @section(footer)
  <footer class="page-footer" role="contentinfo">
	  <div class="container">
      <p class="micro">&copy; HISATO ISHIKAWA</p>
    </div>
  </footer>
  @endsection
  
  @section(body-end)
  @endsection
</body>
</html>

index.html に読み込む

index.html には、@extends で継承するファイルを読み込む。

// index.html は、以下の１行のみ
@extends(/layouts/base.html)

G: @extendsを使ってテンプレートを最適化してみよう | 2018春合宿 | ハンズオン | a-blog cms developer

a-blog cms developer

Ver. 2.8.0 よりテンプレートを継承できる機能が追加されました。このハンズオンでは、継承機能（@extends）を使ってテンプレートをわかりやすくて管理しやすい形にしていきます。 1. ハン...

Silicon

/layouts/base.html をつくる

index.html に読み込む