English
Atom Login Admin

Seeds of mention

Tag Cloud(タグクラウド)をJinja2のCustom Filterで実現する。

lakshmi@cloudysunny14.org
mentioned on Sunday,January 27,2013

Jinja2テンプレートエンジンはとてもパワフルで、様々な応用が出来る。
今回はJinja2 Custom Filtersを使ってTag Cloud(タグクラウド)を作ってみた。
コードは下記の通り。

  • custom_filters.py
TAG_RANK = ("tagRank10","tagRank9",
"tagRank8","tagRank7","tagRank6",
"tagRank5","tagRank4","tagRank3",
"tagRank2","tagRank1")

class Tag(object):
  """Holds tag properties """
  def __init__(self, title, tag_level):
    self._title = title
    self._tag_level = tag_level

  @property
  def title(self):
    return self._title

  @property
  def tag_level(self):
    return self._tag_level

def compute_rank(tag_title, count, totalcount):
  """Compute taglevel from frequency of tag"""
  index = int(float(count)/float(totalcount)*10)
  return Tag(tag_title, TAG_RANK[index])

def create_tag_rank(articles):
  """Create tag rank"""
  tag_count_dict = {}
  total_count = 0
  for article in articles:
    count = tag_count_dict.get(article.tag, None)
    total_count += 1
    if count is None:
      tag_count_dict[article.tag] = 1
    else:
      count += 1
      tag_count_dict[article.tag] = count
  tags = []
  for tag_title in tag_count_dict.keys():
    tags.append(compute_rank(tag_title, tag_count_dict[tag_title],
        total_count))
  return tags
  • flask_profiler.py
import jinja2
jinja2.filters.FILTERS['create_tag_rank'] = custom_filters.create_tag_rank
  • tags.html
<div class=tags>
  {% for tag in articles | create_tag_rank %}
  <ul>
    <li class={{tag.tag_level}}><a href={{ url_for('blogs', tag=tag.title) }} title="{{tag.title}}">{{tag.title}}</a></li>
  </ul>
  {% endfor %}
</div>
  • style.css
.tags {
    overflow: hidden;
    margin: 10px auto 30px;
    padding: 20px;
    line-height: 1.6em;
}
.tags li {
    float: left;
    min-width: 100px;
    height: 3em;
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 20px;
    letter-spacing: -1px;
    font-family: Georgia,"Times New Roman",Serif;
}
.tags li a {
    position: relative;
    top: 0px;
    left: -10px;
    z-index: 10;
    margin: 0;
    padding: 0 5px;
    color: #000;
    font-size: 1em;
    text-decoration: none;
}
#contents .tags li a:hover {
    text-decoration: underline;
    position: relative;
    z-index: 50;
    color: #F00;
}
.tags li.tagRank1 {
}
.tags li.tagRank1 a {
    font-size: 2.8em;
}
.tags li.tagRank2 a {
    font-size: 2.6em;
    color: #222;
}
.tags li.tagRank3 a {
    font-size: 2.4em;
    color: #333;
}
.tags li.tagRank4 a {
    font-size: 2.2em;
    color: #444;
}
.tags li.tagRank5 a {
    font-size: 2em;
    color: #555;
}
.tags li.tagRank6 a {
    font-size: 1.8em;
    color: #666;
}
.tags li.tagRank7 a {
    font-size: 1.6em;
    color: #777;
}
.tags li.tagRank8 a {
    font-size: 1.4em;
    color: #888;
}
.tags li.tagRank9 a {
    font-size: 1.2em;
    color: #999;
}
.tags li.tagRank10 a {
    font-size: 1em;
    color: #AAA;
}

すると、こんな感じで出来る。
tagcloud

こんな感じでJinja2のテンプレートやその他の強力な機能について
紹介していきたい。

Comments

Add Comment

Login
This entry was tagged #Jinja2 #Flask