MODxでページごとに個別のid/class属性を出力する
ページごとのデザインをCSSなどで変えたい場合、親要素にid/class属性を追加するというのはよくやる方法だと思います。それをMODxでやってみようという内容です。
前提
使用するリソースは、汎用性を考えてPHx、replaceモディファイア、GetFieldとします。
エイリアスの接尾辞をなしに設定している場合で、ドキュメントのエイリアスに拡張子を含めた名前を設定している場合を前提にします。エイリアスにピリオドを含まない場合は、テンプレート変数の[*alias*]とGetFieldだけでもっと簡単に行えます。
次のようなドキュメントツリーを例にします。括弧内はドキュメントのエイリアスです。
- サイト
- ページ1(page1.html)
- カテゴリ(category1)
- ページ2(page2.html)
ページのエイリアスをid属性値に、親ドキュメントのエイリアスをclass属性値にすることにします。その際、エイリアスに拡張子を含んでいると、CSSでピリオドをエスケープするのが面倒なので、ピリオド以降は全て削除してしまいましょう。
方法
具体的には、id/class属性を出力したい部分に次のように書きます。
<body id="[*alias:replace=`/^(.*?)(\..*)?$/$1/`*]" class="[+phx:input=`[[GetField? &parent=`1` &field=`alias`]]`:replace=`/^(.*?)(\..*)?$/$1/`+]">簡単に説明すると、id属性値は、ドキュメントのエイリアス([*alias*])をreplaceモディファイアに渡して、ピリオド以降を削除しています。class属性値は、GetFieldで親ドキュメントのエイリアスを取得([[GetField]])した結果をPHxの入力値として、replaceモディファイアに渡しています。
出力結果は次のような感じになります。
- ページ1(page1.html)
<body id="page1" class="page1">
- カテゴリ(category1)
<body id="category1" class="category1">
- ページ2(page2.html)
<body id="page2" class="category1">
CSSでのスタイリングが楽になりますね。
MODxは、余計なものをごちゃごちゃ入れなくても、必要最小限のリソースを組み合わせることで色々なことを実現できます。より細かく設定したい場合には、それ用のテンプレート変数を作成するか、スニペットを作成しておくとよいでしょう。
余談
初めは、replaceモディファイアはreplace=`/^([^.]*).*$/$1/`のようにしていましたが、PHxのモデファイアの値にはブラケットを使うことができないということを思い出し、最初の例のように変更しました。キャッシュを使用していれば、どちらの正規表現でも速度的な違いはありませんが、モディファイアの値にはブラケット単体でも使用できないというのは盲点でした。
文字クラスを使わないと正規表現が書けない場合は、ブラケットをエスケープして使えるようにするか、チャンクを通して正規表現を渡すようにreplaceモディファイアを修正しないとダメそうですね。
また、親ドキュメントのエイリアスを取得するために、同梱されているUltimate Parentsを使ってみようとしたら、これはIDしか取得できないちょっと微妙なスニペットでした。祖先ドキュメントではなく、単に親ドキュメントのIDを取得したい場合には、テンプレート変数の[*parent*]が使えますので、こちらを使用した方がよいでしょう。GetFieldを同梱してくれるとうれしいですね。
コメント (3)
はじめまして。
replaceモディファイアは関係ないですね。
[[GetField? &parent=`1` &field=`alias`]]
だけでも親ドキュメント自身のエイリアスを出力できましたよ。
ちなみに、GetFieldは1.3 betaを使っています。
Phizeさん、ありがとうございます。
別の方法でなんとか解決したのですが、Phizeさんのコメントを見て、もう一度試してみたところしっかりと出力できました。
単なる私のミスだったかもしれませんね。失礼しました。＾＾；
念のため、色々な条件で試して、何かわかりましたらまた報告させてもらうかもしれません。
トラックバック (0)
この記事へのトラックバックはまだありません。
はじめまして。
このページを参考にさせていただき、なんとか子ドキュメントが親ドキュメントのエイリアスを取得できるようになりました。
[[GetField? &parent=`1` &field=`alias`]]
エイリアスにピリオドを含まないため上記のようにしたのですが、親ドキュメントは親自身のエイリアスを出力してくれません。
カテゴリ(category1)
body id=”category1″ class=”category1″
となっているのは、PHxの入力値として、replaceモディファイアに渡しているからなのでしょうか？
いきなり質問してしまいすいませんが、お時間ありましたらよろしくお願いします。