![[PukiWiki]](/pear/image/pukiwiki.png "[PukiWiki]")
http://dozo.matrix.jp/pear/index.php/PEAR/HTML_Tempalte_Flexy/startchildren.html
ヘッダー、フッター別テンプレート挿入 Flexy:include
ボディをそれらしく。
CSSとか入ってくると編集するときもきちっと見えるようにしたいでしょ。
別テンプレート挿入 Flexy:includeで、ヘッダーとボディー、フッターを分けたのですが、
HTML的に見づらくなりました。
いまは一ページを三つに分けただけなので、
これでもかまわないのですが、
ページ数が増えてくると見づらいというのはちょっといやかも。
そこで見た目を維持するためにFlexy:start, Flexy:startchildrenを使います。
Flexy:start, Flexy:startchildrenの違いは
Flexy:startは記述したタグを、
Flexy:startchildrenは記述したタグ内のタグをそれぞれ抽出します。
Flexy:Startの場合
<div>
<div flexy:start="here">
<span>hoge</hoge>
</div>
<div>
↓
<div>
<span>hoge</hoge>
</div>
Flexy:StartChildrenの場合
<div>
<div flexy:startchildren="here">
<span>hoge</hoge>
</div>
<div>
↓
<span>hoge</hoge>
Flexy:Startはタグ単位で表示・非表示、変化をさせたいときに、
Flexy:StartChildren?はヘッダー、フッターとボディを分けるときに使えそうです。
ヘッダー、フッター別テンプレート挿入 Flexy:includeのページで使ったボディーが、
こんな感じになります。
body.tpl <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>検索</title> </head> <body flexy:startchildren> <!-- ここから上は無視されます。 --> <flexy:include src="header.tpl" /> <div class="search"> <h4>検索</h4> <input type="text" /><br /> <input type="radio" name="kind" id="kind[1]" /><span style="font-size:8px">タイトル</span><br /> <input type="radio" name="kind" id="kind[2]" /><span style="font-size:8px">本文</span><br /> <input type="radio" name="kind" id="kind[3]" /><span style="font-size:8px">名前</span><br /> <input type="submit" value="検索" /> </div> <flexy:include src="footer.tpl" /> <!-- ここから下は無視されます。 --> </body> </html>
CSSが絡んでくると、
断然見え方が違ってきます。
Smartyを含む通常のテンプレートならばきっとこうなっています。
body.tpl <div class="search"> <h4>検索</h4> <input type="text" /><br /> <input type="radio" name="kind" id="kind[1]" /> <span style="font-size:8px">タイトル</span><br /> <input type="radio" name="kind" id="kind[2]" /> <span style="font-size:8px">本文</span><br /> <input type="radio" name="kind" id="kind[3]" /> <span style="font-size:8px">名前</span><br /> <input type="submit" value="検索" /> </div>
マニュアルには逆のパターンが載っているのですが、
そうするとページごとに値が変わるタイトルタグとかどうすればいいのかわからないので、
このような形で収めてます。
要望とか書いてみたり
ここから上だけ、ここから下だけみたいな要素があっても良いなぁ。 "here"自体に特別な意味がないのでこれを使って条件を変えられたりとか出来ると良いなぁ。
search_box_smarty.png
search_box_flexy.png
