top

ブログの最終更新日付を表示する(スタティック版)

基本このサイトはダイナミック用なのですが、言及ついでに静的生成用の覚え書きも書いておこうと思います。以下はMTに限らず普通のWEBサイトでも応用できることなので、自分のための覚え書きも兼ねて。

■趣旨と目的
MTの静的生成で、どの頁でもリアルタイムで常に最新の「ブログの最終更新日」を表示させられるようにします。
なお、覚え書きを書く前にMTタグの動きに関する注意事項を少しおさらいしておこうと思います。

<$MTDate$>の罠
<$MTDate$>は「頁の再構築された日時」を表示するタグです。そのため、エントリーの投稿・更新・コメント・トラバ全てで再構築が行われるindex.htmlにこれを記述しておくと、結果として「そのブログの最終更新日」として使えることになります。
しかし、「ブログ全体」の最終更新日として使えるのはあくまでもindexファイル(もしくはindexファイルが再構築した時に一緒に再構築するにチェックを入れているファイル)に限られ、アーカイブテンプレートで使うと「ブログ全体の更新日」ではなく「その頁の更新日」になってしまいます。これは投稿やコメントで再構築が行われるのはindexファイル以外では該当エントリー及びそのエントリーに関連するアーカイブしか再構築されないというMTの仕様によるものです。
従って静的生成時でも全ての頁で「ブログ全体の更新日」として使うためにはインデックステンプレートで更新日専用のファイルを作成し、それを各頁内に読み込むということが必要になります。

<MTEntries>の罠
<MTEntries>もindexファイルとアーカイブファイルでは動きの異なるタグです。<MTEntries lastn="1">とした場合、indexファイルでは「全エントリーの中から最新の1件」になりますが、カテゴリーアーカイブでは「そのカテゴリ内での最新の1件」、月別アーカイブでは「その月の中での最新の1件」になり、必ずしも「ブログ全体の最新の1件」にはなりません。
従って、全てのアーカイブで「ブログ全体の最新の1件」として表示するためにはインデックステンプレートで「最新の1件」専用のファイルを作成し、それを各頁内に読み込むということが必要になります。

<$MTInclude$>の罠
このタグで読み込まれるのは「その頁が再構築された時点での情報」です。上で述べた通り、MTに動きがあった場合に再構築されるのはindexファイル以外では該当エントリー及びそのエントリーに関連するアーカイブだけなので、静的生成では<$MTInclude$>で全ての頁に最新の情報を反映させることができません(そこがダイナミック時と大きく違うところです)。わざわざ再構築をかけない限り情報は新しくならないので、静的生成ではダイナミックとは違う方法で「読み込み」を行う必要が出てきます。

では<$MTInclude$>が使えない静的生成ではどういう方法を使えばいいのか? phpを使う方法は多くのサイトで紹介されているので、ここでは「拡張子はhtmlのままで静的頁に動的に表示する方法」を書いてみます。やり方は2通りあります。

■iframeを使う

1.メインインデックスのテンプレートで新しいテンプレートを作成し、以下の内容を書き込んで、update.htmlなどという名前で保存します。
「インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する」にチェックを入れることを忘れないように。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="<$MTProductName version="1"$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<title>最終更新日</title>
</head>
<body class="updatebody">
最終更新日:<$MTDate$>
</body>
</html>

コメント・トラバは抜きで「最新エントリーが一番最後に更新された日時」をブログの更新日としたい場合は赤字の部分を以下の青字に差し替えます。

<MTEntries lastn="1">最終更新日:<$MTEntryModifiedDate$></MTEntries>

2.スタイルシートに以下を追加
読み込むファイルと読み込まれるファイルで背景色や背景画像の有無などを調整する必要のある場合。

.updatebody {
background-color: #FFFFFF;
background-image: none;
}

3.各頁に以下のタグを使って上の内容を読み込みます。
iframeの縦横サイズ(赤字の部分)は使用環境によって調整します。

<iframe width="250" height="30" src="<$MTBlogURL$>update.html" scrolling="no" frameborder="0" marginwidth="0" marginheight="0">
</iframe>

■javascriptを使う
今回はinnerHTMLでやってみました。

1.メインインデックスのテンプレートで新しいテンプレートを作成し、以下の内容を書き込んで、update.jsなどという名前で保存します。
「インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する」にチェックを入れることを忘れないように。

window.onload = function() {
var up = "最終更新日:<$MTDate$>";
document.getElementById("update").innerHTML = up;
}

コメント・トラバは抜きで「最新エントリーが一番最後に更新された日時」をブログの更新日としたい場合は赤字の部分を上のiframe例の青字の部分に差し替えて下さい。

2.<head>~</head>に以下を追加

<script type="text/javascript" src="<$MTBlogURL$>update.js"></script>

3.各頁の更新日を表示したいところに以下を追加。

<div id="update"></div>

必要に応じて適当なclassを指定して調整するといいと思います。

これで静的生成でも各頁に常に最新のブログ更新日が表示されることになります。どちらを使うかはブログの方針に合わせて。

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。