2020-08-26
Craft CMS でつかえる html/css/jsタグの生成部分を見てみた #craftcms
Craft 3.5.6 がリリースされた。
3.5.6で jsタグ、cssタグにパスを指定することで読み込みを追加できるようになったらしいので試してみる。
[FR] Add a new `jsFile` Twig tag · Issue #6671 · craftcms/cms
https://github.com/craftcms/cm...
[FR] Add a new `cssFile` Twig tag · Issue #6672 · craftcms/cms
https://github.com/craftcms/cm...
Craft 3.5.0でhtmlタグも追加されているのでそれもセットで試す。
[FR] Provide Twig Method to Add to End Body · Issue #5955 · craftcms/cms
https://github.com/craftcms/cm...
ベーステンプレート
こんな感じでベースの _layout.twig を用意する。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
{% block main %}
<p>ここはmainブロックです</p>
{% endblock %}
{% block footer %}
<p>ここはfooterブロックです</p>
{% endblock %}
</div>
</body>
</html>確認用テンプレート
表示用のテンプレートはこんな感じで用意してみる
{% extends "_layout.twig" %}
{% block main%}
<p>main ブロックの中身です。</p>
{% endblock %}
{% html %}
<p>htmlタグ default は /body 直前</p>
{% endhtml %}
{% html at beginBody %}
<p>htmlタグ at beginBody</p>
{% endhtml %}
{% html at head%}
<p>htmlタグ at head２</p>
{% endhtml %}
{% html %}
<p>htmlタグ２２２２</p>
{% endhtml %}
{% html %}
<script defer>console.log("hogehoge")</script>
{% endhtml %}
{% html at head%}
<!--htmlコメント -->
{% endhtml %}出力されるHTMLはこんな感じになる
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<p>htmlタグ at head２</p>
<!--htmlコメント -->
</head>
<body> <p>htmlタグ at beginBody</p>
<div>
<p>main ブロックの中身です。</p>
<p>ここはendblockです</p>
</div>
<p>htmlタグ default は /body 直前</p>
<p>htmlタグ２２２２</p>
<script defer>console.log("hogehoge")</script>
</body>
</html>htmlタグのデフォルトは body の閉じタグ直前に挿入される。
差し込む場所は at head , at beginBody も設定できる。
表示される場所（head内、bodyタグ直後、body閉じタグ直前）ごとにテンプレート上でセットした順番で表示される。
jsタグ、cssタグと組み合わせた時の動作を確認する
jsタグ、cssタグもあるのでこれらも使ったときにどういう並びになるのか？を試してみる。
jsタグ
まずjsタグをいれた表示テンプレートはこのような感じにしてみる。
{% extends "_layout.twig" %}
{% block main%}<p>main ブロックの中身です。</p>{% endblock %}
{% html %}<p>htmlタグ default は /body 直前</p>{% endhtml %}
{% js at beginBody %}
console.log("at beginBody");
{% endjs %}
{% html at beginBody %}<p>htmlタグ at beginBody</p>{% endhtml %}
{% html at head%}<p>htmlタグ at head２</p>{% endhtml %}
{% html %}<p>htmlタグ２２２２</p>{% endhtml %}
{% js %}
console.log("default");
{% endjs %}
{% html %}<script defer>console.log("hogehoge")</script>{% endhtml %}
{% js 'http://code.jquery.com/jquery-3.5.0.min.js' %}
{% js at head %}
console.log("at head");
{% endjs %}
{% html at head%}<!--htmlコメント -->{% endhtml %}
{% js %}
console.log("default 222");
{% endjs %}出力はこのようなかんじになる。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<p>htmlタグ at head２</p>
<!--htmlコメント -->
<script>console.log("at head");</script></head>
<body> <p>htmlタグ at beginBody</p>
<script>console.log("at beginBody");</script>
<div>
<p>main ブロックの中身です。</p>
<p>ここはendblockです</p>
</div>
<p>htmlタグ default は /body 直前</p>
<p>htmlタグ２２２２</p>
<script defer>console.log("hogehoge")</script>
<script src="http://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>console.log("default");
console.log("default 222");</script></body>
</html>ぱっと見わかりにくいが、並び順としては html タグ＞ js タグの順序になっている。
js タグ同士の中でも js のパスを指定している場合が先に読み込まれて、script の内容は後に読み込まれる。
js タグが複数指定してあればそれも一緒にしてくれる。
<script src="http://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>console.log("default");
console.log("default 222");</script></body>js タグも差し込む場所はbody閉じタグ前がデフォルトで、他に at head , at beginBody を指定できる。
cssタグ
css タグも設定してみる。
こんな感じでテンプレート側を用意する。
{% extends "_layout.twig" %}
{% block main%}<p>main ブロックの中身です。</p>{% endblock %}
{% html %}<p>htmlタグ default は /body 直前</p>{% endhtml %}
{% js at beginBody %}console.log("at beginBody");{% endjs %}
{% html at beginBody %}<p>htmlタグ at beginBody</p>{% endhtml %}
{% html at head%}<p>htmlタグ at head２</p>{% endhtml %}
{% html %}<p>htmlタグ２２２２</p>{% endhtml %}
{% js at head %}console.log("default");{% endjs %}
{% html %}<script defer>console.log("hogehoge")</script>{% endhtml %}
{% css %}
body {
color: red;
}
{% endcss %}
{% js 'http://code.jquery.com/jquery-3.5.0.min.js' %}
{% css '/hogehoge.css' %}
{% js at head %}console.log("at head");{% endjs %}
{% html at head%}<!--htmlコメント -->{% endhtml %}
{% js at head %}console.log("default");{% endjs %}こんな感じで出力される
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<p>htmlタグ at head２</p>
<!--htmlコメント -->
<link href="/hogehoge.css" rel="stylesheet">
<style> body {
color: red;
}
</style>
<script>console.log("default");
console.log("at head");</script></head>
<body> <p>htmlタグ at beginBody</p>
<script>console.log("at beginBody");</script>
<div>
<p>main ブロックの中身です。</p>
<p>ここはendblockです</p>
</div>
<p>htmlタグ default は /body 直前</p>
<p>htmlタグ２２２２</p>
<script defer>console.log("hogehoge")</script>
<script src="http://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>console.log("default 222");</script></body>
</html>css もパスを指定した方が先に読み込まれて、style を設定したものが後になる。
また、読み込まれる順序としては htmlタグ ＞ cssタグ ＞ jsタグ、の順序になっている。
これまで head 内用、body閉じタグ直前用の block を用意しておいて使ったりしていたが、それらをつかわずともhtmlタグだけでいけるような気がする。