Rinat's Blog

Блог о моих мыслях и не только...

Добавляем облако тегов (Tag Cloud) в Octopress

| Comments

Ну что ж, пришло время разобраться с категориями, решил выводить их не только перечислением, но и облаком тегов. На сайтах я часто встречал облако тегов, но ни разу не задумывался над реализацией. Естественно, изучение началось с google =). Гугл привел меня к TagCanvas - javascript-класс для прорисовки и анимации облака тегов, автор распространяет её бесплатно под лицензией LGPL v3.
Теперь расскажу по подробнее, как я интегрировал TagCanvas в Octopress.
Для начала необходимо скачать tagcanvas.js и скопировать его в source/javascripts.
Добавим строчку кода categories = categories.keys if categories.class == Hash в plugins\category_generator.rb, нас интересует функция category_links.

plugins/category_generator.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    def category_links(categories)
      dir = @context.registers[:site].config['category_dir']
      categories = categories.keys if categories.class == Hash
      categories = categories.sort!.map do |item|
        "<a class='category' href='/#{dir}/#{item.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase}/'>#{item}</a>"
      end

      case categories.length
      when 0
        ""
      when 1
        categories[0].to_s
      else
        "#{categories[0...-1].join(', ')}, #{categories[-1]}"
      end
    end

Создадим файл source/_includes/tagcanvas.html со следующим содержимым.

(20120525_tagcanvas.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="{{ root_url }}/javascripts/tagcanvas.js" type="text/javascript"></script>
<script type="text/javascript">
  window.onload = function() {
  try {
    TagCanvas.Start('myCanvas','tags',{
    textColour: '#EC9A36',
    outlineColour: '#ff00ff',
    reverse: true,
    depth: 0.5,
    maxSpeed: 0.03,
    textHeight: 25,
    minBrightness: 0.5
    });
  } catch(e) {
  // something went wrong, hide the canvas container
    document.getElementById('myCanvasContainer').style.display = 'none';
    }
  };
</script>

Теперь добавим строку include tagcanvas.html в source/_includes/head.html.
Осталось только добавить отображение всей этой красоты на странице, для этого редактируем файл source/_includes/asides/recent_posts.html.

(20120525_recent_posts.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section>
  <h1>Категории</h1>
  <ul>
      <li>
          {{ site.categories | category_links }}
    </li>
  </ul>
  <div id="myCanvasContainer">
      <canvas width="260" height="205" id="myCanvas">
        <p>Anything in here will be replaced on browsers that support the canvas element</p>
      </canvas>
    </div>
    <div id="tags">
      <ul>
          {{ site.categories | category_links }}
      </ul>
      </div>
  <h1>Последние записи</h1>
  <ul id="recent_posts">
    {% for post in site.posts limit: site.recent_posts %}
      <li class="post">
        <a href="{{ root_url }}{{ post.url }}">{{ post.title }}</a>
      </li>
    {% endfor %}
  </ul>
</section>

Теперь по мере добавления категорий в Octopress, они будут добавляться в список и облако тегов.

Полезные ссылки:

Comments