HTMLコメント記法でテンプレートを書く方法
MODXの使い方を知らないウェブデザイナーさんと共同でサイトを作る際、便利な方法があります。
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>記事のタイトル</h1>
<div>
本文テキスト 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
</div>
</body>
</html>
デザイナーさんから上記のようなHTMLファイルを預かったとします。これをテンプレート化するのですが、
<html>
<head>
<title>[*pagetitle*]</title>
</head>
<body>
<h1>[*pagetitle*]</h1>
<div>
[*content*]
</div>
</body>
</html>
通常はこう書きますね。
<html>
<head>
<!--@MODX:<title>[*pagetitle*]</title>-->
<!--@IGNORE:BEGIN-->
<title>タイトル</title>
<!--@IGNORE:END-->
</head>
<body>
<!--@MODX:<h1>[*pagetitle*]</h1>-->
<!--@IGNORE:BEGIN-->
<h1>記事のタイトル</h1>
<!--@IGNORE:END-->
<div>
<!--@MODX:[*content*]-->
<!--@IGNORE:BEGIN-->
本文テキスト 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
<!--@IGNORE:END-->
</div>
</body>
</html>
こう書くこともできます。コード量が少し増えますが、この書き方には下記のような特徴があります。
- MODXの動作に関係する記述をHTMLコメント内に隠す
- ページを表示する際にダミーテキストを削除
この方法を用いると、ウェブデザイナーとMODX管理担当者の間で同じHTMLコードを共有できます。デザインを変更する必要が生じた際に、HTMLの変更部分を観察してテンプレートとして反映し直す手間が不要なので、スムーズに共同作業を進めることができます。
ウェブデザイナーの視点から見ると、MODXのタグをHTMLコメントで隠しているので、ブラウザで開いた時の見た目が全く変わりません。このため、MODXをデザイナーに意識させずに製作を進めることができます。
http://chibinowa.net/modx/tutorial/commenttag.html
その他、上記のような使い方もできます。
MODXはもともとウェブデザイナーとの相性がよいCMSなので、慣れてきたら、ウェブデザイナーさんにもMODXの操作方法を習得していただくとよいでしょう。
