Django Mezzanine の Blog のカテゴリページを details タグを使って実装する

このブログのカテゴリページは、特にプルダウンもなく、カテゴリごとのページのリンクを全て展開して表示していましたが、結構長くなって見づらい感じになっていました。
details タグと summary タグを使うと、折り畳み表示が実現できそうでしたので、Django template を使って実装してみました。

details タグ、summary タグについて

detailsタグ、summaryタグには以下のような特徴があります。

• HTMLタグだけで、折り畳み要素を表現できる

• CSSでデザインをコントロールできる

• IE、レガシーEdge では使えない。
  

polyfillが公開されており、IE、レガシーEdge に対応する場合は、追加で導入するべきかと思います。
* details-element-polyfill - npm
* details-polyfill-es6 - npm

作ったページ

• categories.html

  • mezzanine-theme-clean-blog/categories.html at master · kemsakurai/mezzanine-theme-clean-blog
    カテゴリーページのtemplateファイルです。
    0件時のメッセージ表示のために、Built-in template tags and filters | Django documentation | Djangoを使っています。

• CategoriesView

  • mezzanine-theme-clean-blog/views.py at master · kemsakurai/mezzanine-theme-clean-blog CategoryのModel と、Categoryに紐づくページ保持のため、category_posts_rel.update({category: posts}) で辞書に登録、context に設定するようにしました。

参考

以下、ページ作成時に参考にした記事です。

• details: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN

• HTML5 details in GitHub
  Github Markdown で details タグを使う例。

• detailsタグ、summaryタグについて - Qiita

• The details and summary elements | scottohara.me

以上です。