継承するテンプレートを作成
Posted in: テンプレート
/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">© HISATO ISHIKAWA</p> </div> </footer> @endsection @section(body-end) @endsection </body> </html>
index.html に読み込む
index.html
には、@extends
で継承するファイルを読み込む。
// index.html は、以下の1行のみ @extends(/layouts/base.html)
![]()
G: @extendsを使ってテンプレートを最適化してみよう | 2018春合宿 | ハンズオン | a-blog cms developer
a-blog cms developer
Ver. 2.8.0 よりテンプレートを継承できる機能が追加されました。 このハンズオンでは、継承機能(@extends)を使ってテンプレートをわかりやすくて管理しやすい形にしていきます。 1. ハン...