Fenrir's BLog: テンプレート共通化とJavaScriptによる軽量化を参考にして、今後エントリーが増えてきた時のためJavaScriptによるテンプレート共通化を実験してみる。PHP化によるモジュール化を試みたのだけれどなんか難しそうだったのでjavascriptにしてみた。
方針としては、以下のようにしてあります。
(1)共通の部分は新たにテンプレートを作り、JavaScriptの外部ファイル(いわゆる拡張子がjsのファイル)として吐き出すようにする。このファイルの中にはJavaScriptの関数が記載されている。
(2)記事のテンプレート(Main IndexやIndividual Archiveなど)では、(1)で作成された外部JavaScriptファイルを読み込み、その中に書いてあるJavaScript関数を実行するだけにする。
Fenrir's BLogより
(1)共通の部分は新たにテンプレートを作り、JavaScriptの外部ファイル(いわゆる拡張子がjsのファイル)として吐き出すようにする。このファイルの中にはJavaScriptの関数が記載されている。
(2)記事のテンプレート(Main IndexやIndividual Archiveなど)では、(1)で作成された外部JavaScriptファイルを読み込み、その中に書いてあるJavaScript関数を実行するだけにする。
Fenrir's BLogより
MovableTypeの編集画面で、「テンプレート」の「インデックス」タブにおいて「テンプレートを新規作成 」
「テンプレート名」→部品JS
「出力ファル名」→myModule.js
「このテンプレートにリンクするファイル」→空欄
「出力ファル名」→myModule.js
「このテンプレートにリンクするファイル」→空欄
として、
function getRecentEntry(){
var html = '<div class="module-archives module">';
html += '<h2 class="module-header">最近のエントリー</h2>';
html += '<div class="module-content">';
html += '<ul class="module-list">';
<MTEntries lastn="10">
html += '<li class="module-list-item">';
html += '<a href="<$MTEntryPermalink$>">';
html += '<$MTEntryTitle$>'.substr(0, 20);
html += '</a></li>';
</MTEntries>
html += '</ul>';
html += '<a href="<$MTBlogURL$>atom.xml">';
html += 'このブログのフィードを取得';
html += '</a><br />';
html += '[<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]';
html += '</div>';
html += '</div>';
return html;
}と入力し、「保存と再構築」を押下。このルーチンはこのブログの「最近のエントリー」の部分です。
繰り返し部分の「<MTEntries lastn="10">」「</MTEntries>」は構築しても文字列を吐き出さないからjavascriptから外すんだ！なるほど。
「メインページ」テンプレートのヘッダ部分に、
<script language="javascript" type="text/javascript" src="<$MTBlogURL$>myModule.js"></script>
を記述し、今までの「最近のエントリー」の部分に<!-- 最近のエントリー -->
<script language="javascript" type="text/javascript">
<!--
document.write(getRecentEntry());
//-->
</script>
と記述。<script language="javascript" type="text/javascript">
<!--
document.write(getRecentEntry());
//-->
</script>
これで再構築すると、何事も無かったように正しく表示されます。
ついでに、タイトルバナー部分も
function getTitle(){
var html = '<div id="banner">';
html += '<div id="banner-inner" class="pkg">';
html += '<h1 id="banner-header">';
html += '<a href="<$MTBlogURL$>" accesskey="1">';
html += '<$MTBlogName encode_html="1"$>';
html += '</a></h1>';
html += '<h2 id="banner-description">';
html += '<$MTBlogDescription$>';
html += '</h2>';
html += '</div>';
html += '</div>';
return html;
}<!-- タイトルバナー -->
<script language="javascript" type="text/javascript">
<!--
document.write(getTitle());
//-->
</script>
<script language="javascript" type="text/javascript">
<!--
document.write(getTitle());
//-->
</script>
として記述し再構築。これで全てのエントリーに於てタイトル部分をいちいち構築する必要が無くなった。
カテゴリー、月別アーカイブの関数も作ってみよう。
でもここまでモジュール化の理解が進むとPHPによるモジュール化でもよかったんでないか？とも思う。まぁいいやのりかかったふねだ。
