3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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>

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

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?