階層化カテゴリ/ページリスト for Blogengine.net 1.6

先日、改造中としていたカテゴリリストの階層化について、なんとか形になりました。

どちらも、元のPageList及び、CategoryListのソースを流用して作成しています。

今回の階層化はulタグとliタグのみを使用し、下の階層は、liタグの中にulタグを配置する、ulのネストを行っています。
(ブログロールもそんな感じのようですね)

できるだけコアに手を入れずに作りたかったので、もうコードが悲惨なことに(号泣

今回はファイルをアップしますが、細かい説明はいたしません><

BlogEngine.netのカテゴリリストは、親カテゴリを指定して階層化できますが、表示については、ハイフォンで名前をすべてつないで表示するため、3階層くらいになりますと、長くて見づらい状態になります。

従来の表記

  • カテゴリA
  • カテゴリA-カテゴリB

階層化カテゴリリストは、これを階層構造のリストに変換して表示します。

階層化カテゴリリストの表記

  • カテゴリA
    • カテゴリB
    まあ、やり方としては、コアエンジンから取得したカテゴリのListから、それぞれ親の数を数え、下の階層ならULタグをスタックにいれてその下に、上の階層ならスタックからUlを外して・・・などと・・・昔の力技のようなやり方です。

正直言いまして、ソースは見るに堪えないかと><

階層化カテゴリリストについて、ひとつ注意点があります。
従来のカテゴリリストは、ポストが0の場合のカテゴリを表示しないようにしておりますが、階層化をした場合、階層が崩れてしまう為、LayeredCategoryListではポスト0でも強制で表示します。

尚、以前からStructuredPageListとして公開していた階層化ページリストについては、LayeredPageListとして、同じ手法になおしたものも含まれています。

おもにPSUぶろぐにて、このLayeredのほうを使用しています。
こちらでは、CSSの絡みで、以前の改造版のままいこうかな^^;

コントロールとウィジェットをまとめたファイルはこちらです。
 LayeredCategoriesPages.7z (4.70 kb) (4/19 Readmeに追記を追加)

追記

ULタグの入れ子で、階層構造を表現しておりますが、もし、正常に動作しない場合、CSSのCLASSを割り当ててあります。

2番目の階層より、L1,L2,L3~と指定してありますので、必要であれば、
お使いのテーマのCSSファイルに

li.L1 { margin-left:12px;}
li.L2 { margin-left:24px;}
li.L3 { margin-left:36px;}

などと指定することで、強制的にずらすことが可能です。

コメント (1) -

Guy Nethery
2010/04/17 7:46:09 #

I believe this is exactly what I was looking for.  I look forward to implementing this weekend.

コメントを書く

Month List