6.50 dtreeと連携してカテゴリリストを表示する
P.626
dtreeの設定
●head要素にlink要素とscript要素を追加
「ヘッダー」テンプレートモジュール
...前略...
<link rel="stylesheet" href="<mt:blogURL />dtree.css" type="text/css" />
<script type="text/javascript" src="<mt:blogURL />dtree.js"></script>
</head>
<body class="<mt:getVar name="page_layout" />"<mt:if name="body_onload"> onload="<mt:getVar name="body_onload" />"</mt:if>>
...後略...dtreeによるツリー表示について
サンプル
<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
d.add(1, 0,'カテゴリA','http://user-domain/test/');
d.add(2, 1,'カテゴリA-1','http://user-domain/test/test11/');
d.add(3, 2,'カテゴリA-1-1','http://user-domain/test/test11/test111/');
d.add(4, 2,'カテゴリA-1-2','http://user-domain/test/test11/test112/');
d.add(5, 1,'カテゴリA-2','http://user-domain/test/test12/');
d.add(6, 5,'カテゴリA-2-1','http://user-domain/test/test12/test121/');
d.add(7, 5,'カテゴリA-2-2','http://user-domain/test/test12/test122/');
d.add(8, 0,'カテゴリB','http://user-domain/test2/');
d.add(9, 8,'カテゴリB-1','http://user-domain/test2/test21/');
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>P.628
サンプル
...前略...
d.config.useCookies=false;
d.config.useIcons=false;
d.add(0, -1,'Categories','javascript: void(0);');
...後略...dtreeでカテゴリリストを表示する
「カテゴリアーカイブ」ウィジェットテンプレート
<mt:ifArchiveTypeEnabled archive_type="Category">
<mt:if tag="blogCategoryCount">
<dt class="sidetitle">カテゴリ一覧</dt>
<dd class="side">
<script type="text/javascript">
//<![CDATA[
this.icon = {
root : '<mt:blogURL />img/base.gif',
folder : '<mt:blogURL />img/folder.gif',
folderOpen : '<mt:blogURL />img/folderopen.gif',
node : '<mt:blogURL />img/page.gif',
empty : '<mt:blogURL />img/empty.gif',
line : '<mt:blogURL />img/line.gif',
join : '<mt:blogURL />img/join.gif',
joinBottom : '<mt:blogURL />img/joinbottom.gif',
plus : '<mt:blogURL />img/plus.gif',
plusBottom : '<mt:blogURL />img/plusbottom.gif',
minus : '<mt:blogURL />img/minus.gif',
minusBottom : '<mt:blogURL />img/minusbottom.gif',
nlPlus : '<mt:blogURL />img/nolines_plus.gif',
nlMinus : '<mt:blogURL />img/nolines_minus.gif'
};
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="0" />
<mt:setVar name="level" value="0" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:unless name="level">
d.add(<mt:getVar name="cat_number" />, 0,'<mt:categoryLabel escape="html" />','<mt:if tag="categoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:else></mt:if>');
<mt:else>
d.add(<mt:getvar name="cat_number" />, <mt:getVar name="level" op="--" setvar="parent_level" /><mt:getVar name="tree[$parent_level]" />,'<mt:categoryLabel escape="html" />','<mt:if tag="categoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:else></mt:if>');
</mt:unless>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
if(document.getElementById('sd0')){
document.getElementById('sd0').style.display = 'none';
}
if(document.getElementById('id0')){
document.getElementById('id0').style.display = 'none';
}
//]]>
</script>
<p style="text-align:center">
<a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a>
</p>
</dd>
</mt:if>
</mt:ifArchiveTypeEnabled>P.629
ブログ記事タイトルを表示する
<mt:entries>
<mt:entriesHeader>
<mt:setVar name="level" op="++" />
</mt:entriesHeader>
<mt:setVar name="cat_number" op="++" />
d.add(<mt:getVar name="cat_number" />, <mt:getvar name="level" op="--" setvar="parent_level" /><mt:getVar name="tree[$parent_level]" />,'<mt:entryTitle escape="html" />','<mt:entryPermalink />');
<mtentriesFooter>
<mt:setVar name="level" op="--"$>
</mt:entriesFooter>
</mt:entries>
