Movable Type のデフォルトのテンプレートのヘッダー部分を一つにまとめてみた

Movable Type 4.2 のデフォルトのテンプレート(既存のブログ)のヘッダー構造を一つにまとめてみました。

デフォルトのテンプレートのヘッダー部分は、本当に共通する部分のみ「HTMLヘッダー」というテンプレートモジュールになっていて、その他は各テンプレートに直接書かれています。

これは構造は、Webデザイナーにとってもテンプレートの構造をイメージしやすいようにと、Movable Type 4.2 から取り入れられたんだったと思います。

例えば、メインページ(main_index)であれば次のような構造になっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
    <$mt:Include module="HTMLヘッダー"$>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
    <title><$mt:BlogName encode_html="1"$></title>
</head>

確かにこれだけ見ると、テンプレートの構造は理解しやすいです。

しかし、例えば「xml宣言を入れよう」と思ったとき、関連する全テンプレートを修正しなければならないので、ちょっと手間です。

また、テンプレートの種類によっては、「HTMLヘッダー」モジュールをインクルードする前後どちらかに JavaScript が書かれていたり、前後のアーカイブページへの link要素があったりと、サイト全体を通してイメージが掴みにくいように思います。

そこで、デフォルトのテンプレートのヘッダー部分を一つにまとめてみました。

ただし、純粋にデフォルトのままではなく、meta要素の keywords と description は以下の記事の考え方を取り入れています。あと、一応 xml宣言も入れてあります。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<mt:If name="main_index">
  <mt:Ignore><!-- メインページ --></mt:Ignore>
  <title><$mt:BlogName encode_html="1"$></title>
  <meta name="keywords" content="キーワード" />
  <meta name="description" content="<$mt:BlogDescription$>" />
<mt:ElseIf name="archive_index">
  <mt:Ignore><!-- アーカイブインデックス --></mt:Ignore>
  <title><$mt:BlogName encode_html="1"$>: アーカイブ</title>
  <meta name="keywords" content="<mt:Entries lastn="2"><mt:If name="__first__"><mt:EntryCategories glue=","><$mt:CategoryLabel$></mt:EntryCategories><mt:ElseIf name="__last__"><mt:EntryIfTagged>,<mt:EntryTags glue=","><$mt:TagName$></mt:EntryTags></mt:EntryIfTagged></mt:If></mt:Entries>" />
  <meta name="description" content="<mt:Entries lastn="5"><$mt:EntryTitle encode_html="1"$>,</mt:Entries>" />
<mt:ElseIf name="entry_template">
  <mt:Ignore><!-- ブログ記事アーカイブ --></mt:Ignore>
  <title><$mt:EntryTitle encode_html="1"$> - <$mt:BlogName encode_html="1"$></title>
  <meta name="keywords" content="<$mt:EntryKeywords$>" />
  <meta name="description" content="<$mt:EntryExcerpt$>" />
<mt:ElseIf name="archive_listing">
  <mt:Ignore><!-- カテゴリーアーカイブ・月別アーカイブ --></mt:Ignore>
  <title><$mt:BlogName encode_html="1"$>: <$mt:ArchiveTitle$>アーカイブ</title>
  <meta name="keywords" content="<mt:Entries lastn="2"><mt:If name="__first__"><mt:EntryCategories glue=","><$mt:CategoryLabel$></mt:EntryCategories><mt:ElseIf name="__last__"><mt:EntryIfTagged>,<mt:EntryTags glue=","><$mt:TagName$></mt:EntryTags></mt:EntryIfTagged></mt:If></mt:Entries>" />
  <meta name="description" content="<mt:Entries lastn="5"><$mt:EntryTitle encode_html="1"$>,</mt:Entries>" />
<mt:ElseIf name="page_template">
  <mt:Ignore><!-- ウェブページアーカイブ --></mt:Ignore>
  <title><$mt:PageTitle encode_html="1"$> - <$mt:BlogName encode_html="1"$></title>
  <meta name="keywords" content="<$mt:PageKeywords$>" />
  <meta name="description" content="<$mt:PageExcerpt$>" />
<mt:ElseIf name="comment_confirmation">
  <mt:Ignore><!-- コメント完了(即時公開) --></mt:Ignore>
  <$mt:Var name="page_title" value="確認"$>
  <$mt:Var name="message" value="<p>コメントを投稿しました。</p>"$>
  <title><$mt:BlogName encode_html="1"$>: <$mt:Var name="page_title"$></title>
<mt:Else name="comment_pending">
  <mt:Ignore><!-- コメント完了(承認待ち) --></mt:Ignore>
  <$mt:Var name="page_title" value="コメントありがとうございます。"$>
  <$mt:Var name="message" value="<p>コメントは現在承認されるまで公開を保留されています。</p>"$>
  <title><$mt:BlogName encode_html="1"$>: <$mt:Var name="page_title"$></title>
<mt:Else name="comment_error">
  <mt:Ignore><!-- コメント投稿エラー --></mt:Ignore>
  <$mt:Var name="page_title" value="コメント投稿エラー"$>
  <mt:SetVarBlock name="message"><p>コメントを投稿できませんでした。エラー: <$mt:ErrorMessage$></p></mt:SetVarBlock>
  <title><$mt:BlogName encode_html="1"$>: <$mt:Var name="page_title"$></title>
<mt:ElseIf name="comment_preview_template">
  <mt:Ignore><!-- コメント確認 --></mt:Ignore>
  <title><$mt:BlogName encode_html="1"$>: コメントの確認</title>
<mt:ElseIf name="search_results_template">
  <mt:Ignore><!-- 検索結果 --></mt:Ignore>
  <title><$mt:BlogName encode_html="1"$>: 検索結果</title>
<mt:ElseIf name="dynamic_publishing_error">
  <mt:Ignore><!-- ダイナミック・パブリッシング・エラー --></mt:Ignore>
  <title><$mt:BlogName encode_html="1"$>: ページが見つかりません。</title>
</mt:If>
  <meta http-equiv="content-style-type" content="text/css" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <link rel="start" href="<$mt:BlogURL$>" title="Home" />
  <link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<mt:If name="main_index">
  <mt:Ignore><!-- メインページ --></mt:Ignore>
  <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
<mt:ElseIf name="entry_template">
  <mt:Ignore><!-- ブログ記事アーカイブ --></mt:Ignore>
  <mt:EntryPrevious><link rel="prev bookmark" href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>" /></mt:EntryPrevious>
  <mt:EntryNext><link rel="next bookmark" href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>" /></mt:EntryNext>
<mt:ElseIf name="archive_listing">
  <mt:Ignore><!-- カテゴリーアーカイブ・月別アーカイブ(日付ベースのアーカイブであれば前後のリンクを含む) --></mt:Ignore>
  <mt:If name="datebased_archive">
  <mt:ArchivePrevious><link rel="prev" href="<$mt:ArchiveLink$>" title="<$mt:ArchiveTitle encode_html="1"$>" /></mt:ArchivePrevious>
  <mt:ArchiveNext><link rel="next" href="<$mt:ArchiveLink$>" title="<$mt:ArchiveTitle encode_html="1"$>" /></mt:ArchiveNext>
  </mt:If>
<mt:ElseIf name="entry_archive">
  <mt:Ignore><!-- ブログ記事アーカイブ・ウェブページアーカイブ --></mt:Ignore>
  <$mt:EntryTrackbackData$>
</mt:If>
  <!-- stylesheet -->
  <link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
  <!-- javascript -->
<mt:If name="comment_preview_template">
  <mt:Ignore><!-- コメント確認 --></mt:Ignore>
  <script type="text/javascript">
  /* <![CDATA[ */
  var user = <$mt:UserSessionState$>;
  var is_preview = true;
  /* ]]> */
  </script>
<mt:ElseIf name="search_results_template">
  <mt:Ignore><!-- 検索結果 --></mt:Ignore>
  <script type="text/javascript">
  /* <![CDATA[ */
  var user = <$mt:UserSessionState$>;
  /* ]]> */
  </script>
</mt:If>
  <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<mt:If name="search_results_template">
  <script type="text/javascript">
  /* <![CDATA[ */
  <mt:IfMoreResults>
  function getResults(page) {
    page = parseInt(page);
    if (timer) window.clearTimeout(timer);
    var xh = mtGetXmlHttp();
    if (!xh) return false;
    var res = results[page];
    if (!res) return;
    var url = res['next_url'];
    if (!url) return;
    xh.open('GET', url + '&format=js', true);
    xh.onreadystatechange = function() {
      if ( xh.readyState == 4 ) {
        if ( xh.status && ( xh.status != 200 ) ) {
          // error - ignore
        } else {
          try {
            var page_results = eval("(" + xh.responseText + ")");
            if ( page_results['error'] == null )
              results[page + 1] = page_results['result'];
          } catch (e) {
          }
        }
      }
    };
    xh.send(null);
  }
  function swapContent(direction) {
    if ( direction == undefined ) direction = 1;
    var page_span = document.getElementById('current-page');
    if (!page_span) return true;
    var next_page = direction + parseInt(page_span.innerHTML);
    var res = results[next_page];
    if (!res) return true;
    var content = res['content'];
    if (!content) return true;
    var div = document.getElementById('search-results');
    if (!div) return true;
    div.innerHTML = content;
    timer = window.setTimeout("getResults(" + next_page + ")", 1*1000);
    window.scroll(0, 0);
    return false;
  }
  <mt:Else><mt:IfPreviousResults>
  function swapContent(direction) {
    return true;
  }</mt:IfPreviousResults>
  </mt:IfMoreResults>
  /* ]]> */
  </script>
</mt:If>
</head>

このようなテンプレートを「HTMLヘッダー」テンプレートモジュールとして保存すると、関連するテンプレートのヘッダー部分は全て次のようになり、とてもすっきりします。

<$mt:Include module="HTMLヘッダー"$>
<body class="mt-main-index <$mt:Var name="page_layout"$>">
※bodyのclassはテンプレートによって異なります。

これが良いか悪いかは人それぞれだと思いますが、僕はヘッダーに関することは一つのテンプレートで完結した方が管理しやすいし、サイト全体のイメージも掴みやすいので好きです。

【2009-06-12 追記】

再構築のテストをしてみました。

  • ブログ記事 : 1,060件
  • コメント : 536件

結果は次のとおりでした。

  • デフォルトテンプレート : 3分34秒、3分35秒
  • 記事のカスタマイズ後 : 3分22秒、3分31秒

結果はそれほど大差はありませんでした。

  • このエントリーをはてなブックマークに追加
Just a second...