Assembleで複数の編集領域を使う #Assemble

Assembleで一つのページファイルに複数の編集領域を持たせる事ができたので、自分用メモとして残す。

レイアウトファイル

layout.hbs

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    {{> header}}

    <div class="content">
        {{> body}}
    </div>

    {{> footer}}

    <script src="common.js"></script>
    {{#block "footer-js"}}{{/block}}
</body>
</html>

ページファイル

page.hbs

---
title: ぺーじたいとる
---
{{! ここから「> body」に突っ込む内容 }}
<h1>Lorem Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ex excepturi hic deleniti odio expedita totam? Nisi eum eaque aliquam illum adipisci quibusdam, perspiciatis officia, nobis odio, officiis provident, eveniet!</p>

{{! ここから「#block "footer-js"」に突っ込む内容}}
{{#content "footer-js"}}
<script src="js/page.js"></script>
{{/content}}

ビルド結果

page.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ぺーじたいとる</title>
</head>
<body>
    <header>
        <h1>Site Title</h1>
    </header>
    <div class="content">
        <h1>Lorem Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ex excepturi hic deleniti odio expedita totam? Nisi eum eaque aliquam illum adipisci quibusdam, perspiciatis officia, nobis odio, officiis provident, eveniet!</p>
    </div>
    <footer>
        <p><small>Copy</small></p>
    </footer>
    <script src="js/common.js"></script>
    <script src="js/page.js"></script>
</body>
</html>

今まで別ファイルに書いて、自作ヘルパーから呼び出してました…。
ちくせう…。