CMSでページの一部分をpjaxする場合テンプレート内で表示の分岐をさせるスクリプトを記述をする必要がありますが、MODXでは元々テンプレートがしっかり分離されているのでテンプレートを切り替える数行のプラグインを作るだけでいいので非常に簡単でした。私がMODX贔屓だからじゃなくて…いくつかのCMSで試してみましたがMODXはほんとにびっくりするぐらい簡単でした。

まず…pjaxとは！

pjaxとはAjaxでコンテンツを入れ替えるのと同時にURLも変更してくれるjQueryのプラグインの名前です。
Githubのようにスムーズでイケてるページ遷移を行います。

備忘録で汎用向けのpjaxの記事を書いています。先にこっちを読んでもらえるといいかも！

javascriptのpushStateなどのヒストリー関数とajaxやサーバーサイドスクリプトを組み合わせて作られているので、jQueryプラグインじゃなくても実装は可能です。実際この技術がなんと呼ばれるのかはわかりませんが、とりあえずpjax（pushState + ajax = pjax）で浸透してるみたいです。Chrome、Firefox、IE10以降などのブラウザで動作し、非対応のブラウザでは通常のページ遷移をします。

pjaxを使うとリンクをクリックしたとき普通にページに飛ぶのではなくajaxで遷移先のページの内容を読み込んで今見ているページの差分だけを更新します。レスポンスを早くしたり、ページ切り替えのエフェクトをつけたり出来ます。

デモ

demo（こんな感じに動きます ブラウザが対応していればスマホでも動きますね）

ダウンロード

jQuery本体と、jquery.pjax.jsをダウンロードします。

MODXでpjaxを使う！

pjaxが実行されるとpjaxはMODXに「pjaxからのリクエストだからそれ用の更新したい所だけのデータをください～」と言ってくるので、MODXはそれに応えて必要ない部分を省いたHTMLを吐いてpjaxに返します。

通常用のテンプレートを作る

非pjax用のテンプレートを作成します。すごく簡単な例はこんな感じです。
以下の例はクラス名にpjaxが付いているリンクをクリックしたときに#pjaxContentを書き換えます。

  
  
  
  
  


[(site_name)]
pageID:10

pageID:11



    
[*pagetitle*]
    
[*content*]