Blog

ブログ

MovableTypeでウェブページのデザインをスマートに切り替える

コンテンツトップ

コンテンツ個別

MovableTypeで上の画像のような、コンテンツトップと個別ページでデザインが大きく変わるページを作る場合、「フォルダ/ウェブページ」ではなく「カテゴリー/エントリー」で構成するのが一般的です。

ウェブページにはコンテンツトップの役割をするアーカイブがないため、ウェブページ用テンプレートの中でコンテンツトップと個別ページを切り替えるための細工をしなければならないからです。
先頭に「@」を付けた「隠しタグ」を記事に付与したり、カスタムフィールドを使うのが定番です。

ですが、デザインが違うのがフォルダごとに1ページだけなら、もっとスマートな方法があります。

ウェブページはエントリーページと違い、フォルダ構成とファイル名をきちんと指定することが前提になっています。

その考えでいけば、コンテンツトップのファイル名は絶対に「index」になるはずです。

なので、以下のように現在のページのファイル名を変数で習得して
「ファイル名がindex/indexではない」を判定させれば、コンテンツトップのみ全くレイアウトが違うウェブページを出力できます。

<mt:Ignore>
### 下記条件でレイアウトが変わります
### ファイル名がindex=インデックスページ
### ファイル名がindexではない=通常ページ
</mt:Ignore>
<mt:SetVarBlock name="Page_Basename"><$mt:PageBasename$></mt:SetVarBlock>
<mt:If name="Page_Basename" eq="index">
<p>コンテンツトップページです</p>
<mt:Else>
<p>個別のウェブページです</p>
</mt:If>

これを応用すると、フォルダ内のローカルナビゲーションも
「コンテンツトップが必ずリストの先頭に来る」ように出力することが可能です。

<mt:SetVarBlock name="Folder_Label"><$mt:FolderLabel$></mt:SetVarBlock>
<ul>
<mt:Pages folder="$Folder_Label" sort_order="ascend" limit="99">
<mt:SetVarBlock name="Local_Basename"><$mt:PageBasename$></mt:SetVarBlock>
<mt:If name="Local_Basename" eq="index">
<li><a href="<$mt:PagePermalink$>" class="navi-index"><$mt:PageTitle encode_html="1"$></a></li>
</mt:If>
</mt:Pages>

<mt:Pages folder="$Folder_Label" sort_order="ascend" limit="99">
<mt:SetVarBlock name="Local_Basename"><$mt:PageBasename$></mt:SetVarBlock>
<mt:Unless name="Local_Basename" eq="index">
<li><a href="<$mt:PagePermalink$>"><$mt:PageTitle encode_html="1"$></a></li>
</mt:Unless>
</mt:Pages>
</ul>

classを付ければ、CSSでボタンの装飾を少し豪華に変えたりできます。


私自身は、MovableTypeは4も5も、「ウェブページの必要性が感じられない」というのが正直なところです。

「ファイル名」を出力するURLに反映させることは、エントリーアーカイブでも設定次第でできますし、ひとつのCMSシステムの中に操作感が同じなのに役割の全く違う投稿画面がある状況は混乱します。
さらに、MovableType5になってから「ウェブサイト」と「ブログ」の管理画面の構成が紛らわしくなり、今編集しているのがウェブページなのかエントリーなのかさえ迷ってしまうようになりました。
MovableTypeに慣れていないクライアントに操作を説明する時も難儀します。

なので、クライアントから特に要望がない限り、ウェブページはあまり積極的に使わないようにしています。
管理画面に関しては、今後のバージョンアップで改善してほしいものです…


サンプルページには以下の人物写真素材を使用しています。

写真素材 足成