テンプレートを覗いてみる

サンプルテンプレートの内容を覗いてみました。テンプレートは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:ナビゲーションなど