Pickles Framework は、ウェブサイトを「サイトマップ」「コンテンツ」「テーマ」の3要素に分解して構築するフレームワークです。コンテンツは、ページレイアウト全体のうち、サイトアイデンティティやナビゲーション部分を含まない領域を担当します。テーマを入れ物とするならば、内容の部分を指します。
原則として、コンテンツは各ページに固有の内容部分を担当します。
ページの内容に当たらない要素(例えば、ヘッダー、フッター、ナビゲーション、h1見出し など)は、テーマの担当ですので、コンテンツには記述しません。
外部の CSS や JavaScript ファイルを読み込むことができます。 $px->bowl()->put($code,'head') 、 $px->bowl()->put($code,'foot') にソースを送り、headセクション内 や bodyセクションの最後にコンテンツのソースを配置します。
(詳しくは後述)
その他、テーマが独自に定義する領域にコンテンツを配置できる場合があります。
この場合、テーマは独自の命名で $px->bowl()->put() にソースを送るように要求します。
デフォルトでは、main(または省略)、head、foot が予約されています。テーマは、それ以外の任意の名前でコンテンツエリアを定義できます。
<p>普通に書いたHTMLソースは、メインコンテンツになります。</p>
<!--
メインコンテンツは、
`$px->bowl()->put('<p>HTMLコード</p>', 'main')`
あるいは名前を省略し、
`$px->bowl()->put('<p>HTMLコード</p>')`
とすることもできます。
-->
<?php $px->bowl()->put(
'<p>これもメインコンテンツ</p>',
'main'
); ?>
<?php $px->bowl()->put(
'<p>これもメインコンテンツ</p>'
); ?>
<!-- headセクションに送るソース -->
<?php $px->bowl()->put(
'<style></style>',
'head'
); ?>
<!-- bodyセクションの末尾に送るソース -->
<?php $px->bowl()->put(
'<script></script>',
'foot'
); ?>
<!-- その他、テーマの独自拡張のエリアに送るソース -->
<?php $px->bowl()->put(
'<p>例えば、右ナビバーの下に配置</p>',
'rnavi'
); ?>
慣例として、テーマは コンテンツのHTMLソースを class="contents" に包んで出力します。 したがって、コンテンツの担当範囲はこの要素の内側となります。
この慣例は、テーマとコンテンツの責任範囲を分解するために設けられました。 テーマがコンテンツのCSSを間違いなくロードするため、また、コンテンツがテーマのスタイルを意図せず破壊してしまわないために必要です。
ローカルリソースファイルとは、コンテンツが独自に使用する画像やCSS、JavaScriptなどのファイル群を指します。どこに設置しても機能的な制限はありませんが、他のコンテンツのリソースと混ざって区別が付かなくなると、後々取り扱いに困ることがあるため、次のルールでコンテンツ単位に独自の領域を設けます。
_files に置き換えた名前の専用のディレクトリを設置し、全てのリソースはその中で管理します。例えば、/aaa/hoge.html というコンテンツであれば、/aaa/hoge_files/* に全てのリソースファイルを格納します。
このパスのルールは、コンフィグ $conf->path_files で変更することができます。
ここでは、コンテンツ独自の CSS や JavaScript ファイルの読み込み方について説明します。
CSSはヘッドセクション内に記述する必要がありますが、コンテンツの領域内には <head> セクションを含まないため、特別な手順でこのソースを登録する必要があります。
$px->bowl()->put($code,'head') に渡されたソースはheadセクション内に、 $px->bowl()->put($code,'foot') に渡されたソースはbodyセクションの末尾に出力されます。
<?php ob_start(); ?>
<!-- CSSの記述 -->
<style type="text/css">
.contents .cont_hoge{
color:#ff0000;
}
</style>
<!-- CSSを外部化する場合 -->
<link rel="stylesheet" href="./hoge_files/contents.css" type="text/css" />
<?php $px->bowl()->put( ob_get_clean(), 'head' ); ?>
<?php ob_start(); ?>
<!-- JavaScriptの記述 -->
<script>
/*
JavaScriptの実装
*/
</script>
<!-- JavaScriptを外部化する場合 -->
<script src="./hoge_files/contents.js"></script>
<?php $px->bowl()->put( ob_get_clean(), 'foot' ); ?>
<div class="cont_hoge">
<p>ここはコンテンツの領域です。</p>
</div>
コンテンツソースにはPHPコードを埋め込むことができます。
例えば次のサンプルコードは、 for文を使って 0〜9 の連番を表示する例です。
<p>コンテンツのHTMLソースです。</p>
<ul>
<?php
for( $i = 0; $i < 10; $i ++ ){
print '<li>'.$i.'</li>';
}
?>
</ul>
コンテンツ内では、 $px を参照することができます。次のサンプルコードは、 カレントページのページタイトルを表示する例です。
<p><?= htmlspecialchars($px->site()->get_current_page_info('title')); ?></p>
コンテンツには、次のような種類が定義されています。
これらは、コンフィグ項目の $conf->paths_proc_type で、拡張子やパスのパターンに関連付け、 $conf->funcs->processor に加工処理を設定します。 プラグインを設定すると、extension の種類を追加できたり、振る舞いを変更することができます。
コンテンツの種類は、拡張子で変更することができます。
例えば、 sample.html というファイル名のコンテンツは $conf->funcs->processor->html の処理が適用されますが、拡張子 .md を付加し sample.html.md とすると、 $conf->funcs->processor->md に設定された処理が適用されるようになります。
(デフォルトでは、 .md は Markdown の書式を処理します)
CSS と JavaScript ファイルもコンテンツとして処理されます。
CSSは、 sample.css では通常のCSS、 sample.css.scss とすると、SASS書式で記述できるようになります。
コンテンツとして処理される CSS, JavaScript ファイルは、HTMLコンテンツと同様に ソース内に PHP コードを埋め込むことができます。この挙動を変更したい場合、 $conf->paths_proc_type で direct または pass が適用されるように設定してください。