11月です。だいぶ放置状態のこのブログ…季節同様冷えてまいりました。
さてさて、先日発見した超便利Smarty組み込み関数、"{capture}"。 ３年ほど使っていて知らなかった悔しさと、発見した嬉しさでご紹介！
{capture}って何？？
先ずはSmartyのドキュメントの説明から！
何が便利なのか
Smartyを使う際、テンプレートを「ヘッダー」「ボディ」「フッター」などなど分ける事が多々あると思います。 そういった場合、テンプレートはボディ部分のみを編集していきますよね。
そんな時に『この画面でだけこのJSを使いたい！』と思った時、ヘッダー用テンプレートを変更する訳にはいかないのでボディ用テンプレートに、つまり<body>タグ内に直接<script>を書いていました。。
こんな感じ↓
{% codeblock html header.html %}
{% codeblock html body.html %} {include file=“header.html”}
動作としては問題ないのですが、非常に気持ち悪いです。
やはり<script>や<style>は<head>に書きたいのです！！
“{capture}“を使えばそれが簡単にできる。
使い方
“{capture}“を使った場合はこんな感じのコードになります。
<html>
<head>
<title>すっしっくいっねー♪</title>
<link type="text/css" rel="stylesheet" href="/css/sushi.css" />
<script src="/css/sushi.css"></script>
{$smarty.capture.header}
</head>
<body>
{capture name="header"}
<script type="text">
$(function(){
console.log('Hi,SUSHI!');
});
</script>
{/capture}
{include file="header.html"}
<div id="wrapper">
<h1>おいしいお寿司が食べたい！</h1>
<p>
焼肉でも…いいんだぞっ！
</p>
</div>
{include file="footer.html"}
そして、生成されるコードはこちら。
<html>
<head>
<title>すっしっくいっねー♪</title>
<link type="text/css" rel="stylesheet" href="/css/sushi.css" />
<script src="/css/sushi.css"></script>
<script type="text">
$(function(){
console.log('Hi,SUSHI!');
});
</script>
</head>
<body>
<div id="wrapper">
<h1>おいしいお寿司が食べたい！</h1>
<p>
焼肉でも…いいんだぞっ！
</p>
</div>
{capture name=“hoge”}〜{/capture}で囲まれたコードが{$smarty.capture.hoge}に格納されるのです！ かゆいところに手が届くとは正にこの事！
注意点
“{capture}“をこの様な目的で使う場合、一点注意が必要です。 PHPはあくまでも上から順に実行されて行くので、header.html と body.html の読み込み順を考えなくてはいけません。。 フレームワークなどで「ヘッダー」「ボディ」「フッター」を全て読み込む様なテンプレートを利用している場合は下記のようにする必要があります。
{capture name="body"}
{include file="body.tpl"}
{/capture}
{include file="header.tpl"}
{$smarty.capture.body}
{include file="footer.tpl"}
“{capture}“を使う為に”{capture}“をかます…。 なんともダサイですが、こうする事で利用できます。。。
＃ もっとスマートな書き方、教えて！えろい人！！
でわでわ、ちょっと便利な”{capture}“の紹介でした！