サンプルテンプレートの内容を覗いてみました。テンプレートはhtml文書そのものの構造になっており、必要に応じてPHPプログラムやMODxのスニペットなどを挟み込めます。body部だけ取り出して少し整形したのが下の文書。
<body> <div id="wrap"> <div id="header"> <div id="title"> <h1><a href="[~[(site_start)]~]">[(site_name)]</a></h1> <p id="slogan">{{slogan}}</p> </div> <h2 class="hide">Main menu</h2> <div id="mainmenu">[!Wayfinder?startId=`0` &hereClass=`current` &level=`1` &outerClass=`topnav`!]</div> <div class="clear"></div> </div> <div id="leftside"> <div id="lmenu" style="display: none;"> <h2>Menu</h2> [!Wayfinder?startId=`0` &hereClass=`` &selfClass=`current` &outerClass=`sidemenu`!] </div> <h2>Search</h2> [[AjaxSearch? &AS_landing=`8` &moreResultsPage=`8` &showMoreResults=`1` &addJscript=`0` &extract=`0` &AS_showResults=`0`]] <h2>News</h2> [[Ditto? &startID=`2` &summarize=`1` &total=`1` &commentschunk=`Comments` &tpl=`nl_sidebar` &showarch=`0` &truncLen=`100` &truncSplit=`0`]] <h2>Login</h2> <div id="sidebarlogin">[!WebLogin? &tpl=`FormLogin` &loginhomeid=`[(site_start)]`!]</div> <h2>Styles</h2> {{styles}} </div> <div id="contentwide"> <h2>[*longtitle*]</h2> [*#content*] </div> <div id="footer"> <p> {{footer}}</p> <p>MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^].</p> </div> </div> </body>
ふーん、classじゃなくてid使ってるのね。id="contentwide"のdivがユーザーコンテンツを挟み込むところです。その前にヘッダー部、左メニュー部、後にフッター部が配置されていますが、これらはテンプレート作者(つまりサイト管理者)が自分の好きなように配置できます。私は最初MODxサイトを見たときページタイトルがH2であることが気に食わなかったのですが、それは
<div id="contentwide"> <h1>[*longtitle*]</h1> [*#content*] </div>
とすれば解決します。
「CSSを使ってページの見た目と内容を分離する」
と、かつては言われましたが、テンプレートを使うことでコンテンツと機能*1を分離することができるようになっています。
*1:ナビゲーションなど