このサイトがどう作成されているかについて。
このサイトが利用しているMODxのtemplate, chunk, snippetについて。


このサイトの作成方法

このページではこのサイトをどう作成しているかを説明します。


「このサイトについて」 のページで既に説明した通り、このサイトはMODxというCMSを利用して作成しています。 このページではMODxを利用して、このサイトと同じようなサイトを作成するのに必要な情報を提供したいと 思います。MODxでサイトを作成しようとしている人には参考になるかもしれません。


MODxでサイトを作成するということは

  • どんなSite templateを作成・利用するか
  • どのSnippetを利用するか
  • どんなChunkを作成・利用するか
  • どのPluginを利用するか

ということなので、以下で提供するのも結局Site template、Snippet、Chunk、Pluginについての 情報となります。

Snippet、Chunkがどういうものかは私の下手な説明を聞くよりも、 ちゃんとした解説書を読んだほうがずっとわかりやすいので、ここでは省略します。書籍や別のサイト等を見てください。 MODxを説明したサイトはここでたくさん紹介しています。

ファイル

  • st_resources_20080420.zip: このサイトで利用しているtemplateファイル、cssファイル、Chunk等をまとめたもの。

以下ででてくるファイルはこのzipファイルに入っています。

[注] このファイルによるデザインは2008年4月20日現在のものです。 それ以後、サイトのデザインを変更していますが、このファイルではそれは反映されていません。

Site Template(サイトテンプレート)

Site templateはサイトの見た目を決める役割を持ちます。 Site templateは、通常htmlのコードとCSSファイルから構成されます。

本サイトでは、templateは次の4つのパターンを利用しています。

  • 英語トップページ用 (top_page_en.html)
  • 日本語トップページ用 (top_page_ja.html)
  • 英語サブページ用 (sub_page_en.html)
  • 日本語サブページ語用 (sub_page_ja.html)

どれもbanzaiさんという方が作成しているax07という Site template をベー スにしているのですが、自分用にかなり変更したので、オリジナルのax07とは見た目はかなり違います。


カッコ内はtemplateファイルの名前です。


templateファイル内でcssファイルを読み込んでいますが、cssファイルもax07のものを流用しています。 cssファイルは全般の設定をするstyle.cssとヘッダーにあるメニュー用のmenu.cssからなります。 cssファイルも他のページと同じようにドキュメントの一つとして扱っています。

Chunk(チャンク)

chunkもたくさん利用しています。chunkについては上のzipファイルを見てください。

Snippet(スニペット)

Snippetについては基本的に他の方が作成してくれたものだけを利用しています。自分では作っていません。 以下が利用しているsnippetのリストです。どれもMODxの公式サイトから入手できるはずです。

  • Ditto
  • Wayfinder
    • これはSitemapを作成するのに利用しています。
  • Breadcrumbs
    • これはパン屑リストを作成するのに利用しています。
    • 「パン屑リスト」とはヘッダー部分の"Home » ホームページ(日本語) » サイトマップ"というようなものです。
  • eForm
    • フォームに入力されたものをメールで配信するための機能です。
    • このコンタクト用のページで利用しています。
  • AjaxSearch
  • CopyYears
    • 著作権表示の部分でよく利用する「2000-xxxx」という表現のxxxx年の部分を自動で選択するためのものです。
    • フッター部分で利用しています。
  • DateTime
    • 日付・時間を表示するための機能。
    • ヘッダー部分(右上)で利用しています。
  • GoogleSiteMap_XML
    • Googleに提供するためのサイトマップを作成する機能です。

plugin(プラグイン)

利用しているpluginのリスト。

  • Page TOC Generator
    • これは目次を作成するためのpluginです。heading用のタグから自動的にそのページの目次を作成してくれます。
    • このページでも利用しています。