Movable Type 4.2 のデフォルトのテンプレート(既存のブログ)のヘッダー構造を一つにまとめてみました。 デフォルトのテンプレートのヘッダー部分は、本当に共通する部分のみ「HTMLヘッダー」というテンプレートモジュールになっていて、その他は各テンプレートに直接書かれています。 これは構造は、Webデザイナーにとってもテンプレートの構造をイメージしやすいようにと、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はテンプレートによって異なります。
これが良いか悪いかは人それぞれだと思いますが、僕はヘッダーに関することは一つのテンプレートで完結した方が管理しやすいし、サイト全体のイメージも掴みやすいので好きです。
再構築のテストをしてみました。
結果は次のとおりでした。
結果はそれほど大差はありませんでした。