先日、改造中としていたカテゴリリストの階層化について、なんとか形になりました。
どちらも、元のPageList及び、CategoryListのソースを流用して作成しています。
今回の階層化はulタグとliタグのみを使用し、下の階層は、liタグの中にulタグを配置する、ulのネストを行っています。
(ブログロールもそんな感じのようですね)
できるだけコアに手を入れずに作りたかったので、もうコードが悲惨なことに(号泣
今回はファイルをアップしますが、細かい説明はいたしません><
BlogEngine.netのカテゴリリストは、親カテゴリを指定して階層化できますが、表示については、ハイフォンで名前をすべてつないで表示するため、3階層くらいになりますと、長くて見づらい状態になります。
従来の表記
階層化カテゴリリストは、これを階層構造のリストに変換して表示します。
階層化カテゴリリストの表記
- カテゴリA まあ、やり方としては、コアエンジンから取得したカテゴリの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;}
などと指定することで、強制的にずらすことが可能です。