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
このままだと、タグがそのまま羅列されているだけなので、カテゴリ別に出力するように変更する。
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を抽出する