MODXタグと書き方
MODXのテンプレートは内容が変化する部分にMODXタグ(変数)を記述して作っていきます。
タグや条件分岐の書き方は他のCMSと比べると少し独特なので最初は覚えるのが大変かもしれませんが、一通り覚えてしまうとテンプレートにそのままPHPを使用していない分、制作やメンテがとてもしやすいです。
- MODXのタグ一覧
- 名前の付け方
- MODXタグのネスト(入れ子)
- パラメータ
- モディファイア
- MODXタグを使用出来る場所
- 名前の変更
MODXのタグ一覧
MODXの機能 | タグの書き方 Evolution |
タグの書き方 Revolution |
---|---|---|
リンクURL | [~id~] | [[~id]][[!~id]] |
リソース変数 | [*name*] | [[*name]][[!*name]] |
テンプレート変数 | [*name*] | [[*name]][[!*name]] |
チャンク | {{name}} | [[$name]][[!$name]] |
スニペット | [[name]][!name!] | [[name]][[!name]] |
プレースホルダ | [+name+] | [[+name+]][[!+name+]] |
レキシコン(言語) | なし |
[[ %name% ]] |
システム設定 | [(name)] | [[++name]] |
ベンチマーク | [^name^] | [^name^] |
通常は左側のキャッシュありを使います。
右側のように「!」を付けて呼ぶと呼び出し結果のキャッシュをしません。
画像のようにタグにプロパティやモディファイア(装飾)をつけることが出来ます。
名前の付け方
テンプレート変数、スニペット名、チャンク名などMODXタグの名前となる部分には英数字の他に日本語も使用できるので、自分で見て分かりやすい名前を付けることができます。
あとで検索しやすくなるので文章中に頻繁に出現しそうな短い単語ではなく、若干かぶりにくい名前がお勧めです。
[[サムネ作成? &url=`image.png`]]
MODXタグのネスト(入れ子)
MODXタグ同士はネストする事が出来ます。スニペットの結果をスニペットのパラメータにしたり、長くなる場合はネストされるコードをチャンクにしておくことも出来ます。
例1)現在のページをメニューの開始位置にする。
[[Wayfinder? &startId=`[*id*]`]]
例2)名称そのものに使用することもできます。(可変変数みたいな使い方)
{{[*注意事項*]}}
例3)欲しい記事のIDを取得する処理まで自作して、表示はDittoにお任せする。
[[Ditto &documents=`[[ランキング商品ID取得]]`]]
あまり複雑過ぎるネストやモディファイアの乱用はソースの見通しを悪くしたりパフォーマンスを悪化させるみたいなのでほどほどにしておいた方がよさそうです。
パラメータ
スニペットタグではスニペット側に渡すパラメータを記述できます。Revoではスニペット以外も出来るようになっています。
このパラメータを渡すことで、スニペットのプロパティを上書きする事ができます。
記述方法は、スニペット名のあとに「?」を付け、「&名前=`値`」で記述します。
URLと似ているので馴染みやすいかもしれません。
パラメータが長くなる場合は改行やコメントもできます。
//¶m1=`val1`
¶m2=`val2`
]]
モディファイア
モディファイアは呼び出し結果を装飾して出力します。内容によって出力の条件をつけたり、タグの除去や呼び出す文字数の制限をつけたり出来ます。EvoはPHxというプラグインを使って行いますが、Revoでは標準でPHxレベルのモディファイアが使えます。EvoでもPHxプラグインなしでもある程度の装飾は出来るようになっています。
モディファイアは変数名に続けて「:」コロンで繋げて記述します。
例1)戻り値がない場合パンくずの代わりにサイトスローガンを表示します。
[[TopicPath:ifempty=`[(site_slogan)]`]]
例2)複数繋げる事もできます。
[*memo:limit=`150`:esc*]
MODXタグを使用出来る場所
基本的に画面上に表示されるような所ならあらゆる場所で使用できます。
例えばチャンク内、リソースのリソース名部分、管理画面のテンプレート変数のカスタム入力タイプだったり。
名前の変更
テンプレート変数やチャンクの名前を後から変更した場合、リソースや他のチャンクにタグ付きで記述されている場合は自動的に新しいものに変換されますが、拡張機能のテンプレートとして使っているタグ無しのチャンク名やスニペットコールやmm_rulesなど、コード内の記述は自分で修正する必要があります。念のためリソース検索などで使っている場所を確認しておいた方がいいでしょう。