tagリストの導入(Pelican)

そろそろ tag 一覧を出したい。

1 plugin の導入

pelicanconf.py にtag cloud を設定。

PLUGIN_PATHS = ['pelican-plugins']
PLUGINS = ['assets', 'tag_cloud']       # tag_cloudを有効化

TAG_CLOUD_STEPS = 4                     # tag_cloud表示のfontを表示分け
TAG_CLOUD_MAX_ITEMS = 100               # 表示する最大tag数

2 template

theme/theme名/base.html (style linkを埋め込むべき template file) に 以下のように記述する。

 <aside>
    <h2>Tag</h2>
    <ul class="tagcloud">
      {% for tag in tag_cloud %}
      <li class="tag-{{ tag.1 }}"><a href="/tag/{{ tag.0 }}/">{{ tag.0 }}</a></li>
      {% endfor %}
    </ul>
 </aside>

3 style

scss でこんな感じ。

ul.tagcloud {
    list-style: none;
    padding-left: 16px;
    width: 80%;
    margin: 0;
    line-height: 200%;

    li {
      display: inline-block;
      
      &.tag-1 {
        font-size: 175%;
      }
      &.tag-2 {
        font-size: 150%;
      }
      &.tag-3 {
        font-size: 125%;
      }
      &.tag-4 {
        font-size: 110%;
      }
    }

    .list-group-item {
      span.badge {
        background-color: grey;
        color: white;
      }
    }
}