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

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秒

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