1. SIS Lab
  2. >
  3. Blog
  4. >
  5. Jekyllにタグクラウドを実装する

Jekyllにタグクラウドを実装する

更新日:2019.05.01 作成日:2014.12.01

タグクラウドが欲しくなったので、タグクラウドタグを実装した。

tag_generator.rb

module Jekyll

  class TagPage < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'

      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag

      tag_title_prefix = 'Tag: '
      self.data['title'] = "#{tag_title_prefix}#{tag}"
    end
  end

  
  class TagPageGenerator < Generator
    safe true

    def generate(site)
      if site.layouts.key? 'tag_index'
        dir = site.config['tag_path'] || 'tag'
        site.tags.keys.each do |tag|
          site.pages << TagPage.new(site, site.source, File.join(dir, tag), tag)
        end
      end
    end
  end


end

tag_index.html

---

---

{% raw %}{% assign posts = site.tags[page.tag] %}{% endraw %}

<h1>Tag: {{page.tag}}</h1>

<ul class="posts">
{% raw %}{% for post in posts %}{% endraw %}
  <li>
    <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
    <a href="{{ post.url }}" class="post-link">{{ post.title }}</a>
    <p>{{ post.content | strip_html | strip_newlines | truncate: 100 }}</p>
  </li>
{% raw %}{% endfor %}{% endraw %}
</ul>

tagcloud.rb

module Jekyll
  class TagCloud < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
    end

    def render(context)
      tag_array = []
      site = context.registers[:site]
      site.tags.each do |tag, tag_pages|
        tag_array << tag
      end
      tag_array.sort!

      tagcloud = ""
      tag_array.each do |tag|
        tagcloud << "<span><a href='#{site.baseurl}/blog/tag/#{tag}/'>#{tag}</a></span>\n"
      end
      "#{tagcloud}"
    end
  end
end

Liquid::Template.register_tag('tag_cloud', Jekyll::TagCloud)

利用箇所

{% raw %}{% tag_cloud %}{% endraw %}

TODO

このままだと、タグがそのまま羅列されているだけなので、カテゴリ別に出力するように変更する。

たのしいRuby 第5版
出版社:SBクリエイティブ
著者:高橋 征義後藤 裕蔵まつもと ゆきひろ
発売日: 2016.02.26
スポンサーリンク
Load more

Related contents

TECH

2014.12.13

Jekyllのタグとカテゴリを整理するために、一覧表示するWebアプリ(個人用)をつくった

TECH

2014.12.02

Jekyllに月別アーカイブを実装する

TECH

2014.11.29

UTF-8-MACとは何か?〜Jekyllのカテゴリ(タグ)ページで濁点を含むページが表示されない〜

TECH

2014.11.25

Macのsedで改行コードを出力させる 〜改行コードの違い再確認〜

TECH

2014.10.29

JekyllでPygmentsを使ってのシンタックスハイライト

TECH

2014.10.21

Jekyllでページ分割する -pagenation-

TECH

2014.09.03

YouTube埋め込みタグをレスポンシブ化する

TECH

2014.06.24

jekyll front matter