2011年2月26日

月別アーカイブの折りたたみ+ツリー化

カテゴリアーカイブについては、先日の作業で折りたたみ+ツリー化ができているので、今回は月別アーカイブの折りたたみ+ツリー化をしたいと思います。

ただ、折りたたんだり、ツリー化するほど記事がたくさんありませんので、私のブログにはあまり役に立ちません...。

それはさておき、早速、いつもの小粋空間さんのホームページを開き、該当の記事を探します。

すると、月別アーカイブリストの年別表示(ツリー化+折りたたみ)という記事がヒットしましたので、手順どおり作業を進めたいと思います。

もともと、menufolder.jsを使ったサイドメニューの折り畳みをしていますので、そのあたりの作業は割愛するのと、カテゴリアーカイブで折りたたみ用のスタイルシートを設定しているので、それを流用する為に、


<div class="categories">

を挿入します。

月別アーカイブリストの年別表示(ツリー化+折りたたみ)では、月のツリー化はできても、年のツリー化ができないので、後々年のツリー化をする為にも、カテゴリアーカイブのスタイルシートを流用することにします。

で結果的に作業は完了し、年単位の折りたたみ+ツリー化が完了しました。

で、ここからが難敵、年のツリー化です。

はっきりいってどこから手を突けたらいいのかすら分かりません。

考え方としては、月別アーカイブの最後の年だけtree_endを出力するようにすればいいはずなのですが...。

とりあえず、monthly Archivesの中で一番古い記事の年(end_year)を取得します。


<mt:ArchiveList archive_type="Monthly"><mt:ArchiveDateEnd format="%Y" setvar="end_year" /></mt:ArchiveList>

でいいのかな。

次に、 作業中の記事の年(current_year_s)を取得し、先ほどのend_yearと一致すればtree_endを出力します。

<mt:archiveDate format="%Y" setvar="current_year_s" />
<mt:if name="current_year_s" ne="$end_year"><li class="tree"><mt:else><li class="tree tree_end"></mt:if>

ということになります。

それ以外に、月の記事数の表示をカテゴリアーカイブでいうところの、subcategoriesとして処理する為に、若干の修正を加え、無事、完成しました!?

全体としてはこんな感じで仕上げてみました

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<div class="sidetitle" id="st7name">Monthly Archives</div>
<div class="side" id="st7list">

<div class="categories">
<ul class="tree">
<mt:ArchiveList archive_type="Monthly"><mt:ArchiveDateEnd format="%Y" setvar="end_year" /></mt:ArchiveList>
<mt:ArchiveList archive_type="Monthly" sort_order="descend">
<mt:ArchiveListHeader>
<mt:archiveDate format="%Y" setvar="current_year_s" />
<mt:if name="current_year_s" ne="$end_year"><li class="tree"><mt:else><li class="tree tree_end"></mt:if>
<div class="subcategories" id="archive<mt:archiveDate format="%Y" />name"><span><mt:archiveDate format="%Y&#24180;" /></span></div>
<div id="archive<mt:archiveDate format="%Y" />list">
<ul class="tree">
<mt:archiveDate format="%Y&#24180;" setvar="year" />
<mt:setVarBlock name="monthly_fold_script">FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);</mt:setVarBlock>
</mt:ArchiveListHeader>
<mt:archiveDate format="%Y&#24180;" setvar="current_year" />
<mt:archiveDate format="%Y" setvar="current_year_s" />
<mt:if name="current_year" ne="$year">
<li class="tree tree_end"><mt:getVar name="month_title" /></li>
</ul>
</div>
</li>

<mt:if name="current_year_s" ne="$end_year"><li class="tree"><mt:else><li class="tree tree_end"></mt:if>
<div class="subcategories" id="archive<mt:archiveDate format="%Y" />name"><span><mt:getVar name="current_year" /></span></div>
<div id="archive<mt:archiveDate format="%Y" />list">
<ul class="tree">
<mt:setVarBlock name="monthly_fold_script" prepend="1">FoldNavigation('archive<mt:archiveDate format="%Y" />','off','false');</mt:setVarBlock>
<mt:else>
<mt:unless name="__first__">
<li class="tree"><mt:getVar name="month_title" /></li>
</mt:unless>
</mt:if>
<mt:getVar name="current_year" setvar="year" />
<mt:setVarBlock name="month_title"><a href="<mt:archiveLink />" title="<mt:archiveDate format="%Y&#24180;%m&#26376;">" ><mt:archiveTitle regex_replace="/\d+&#24180;/","" /> [<mt:archiveCount />]</a></mt:setVarBlock>
<mt:ArchiveListFooter>
<li class="tree tree_end"><mt:getVar name="month_title" /></li>
</ul>
</div>
</li>
</mt:ArchiveListFooter>
</mt:ArchiveList>
</ul>
</div>
</div>

<script type="text/javascript">
FoldNavigation('st7','off',false);
<mt:getVar name="monthly_fold_script" />
</script>
</mt:ifArchiveTypeEnabled>

こんな力技じゃなく、もう少しスマートに処理できるんでしょうけど、なんせチュートハンパなものですから...。

トラックバックURL

このエントリーのトラックバックURL:
http://blog.776town.net/mt/mt-tb.cgi/19

コメントする