WordPressって簡単で便利ですよね。デフォルトからいろいろできて。当然みんな使ってるのも頷ける。
でもね、それJekyllでも同じことできるよ。
問題
JekyllでもWordPressみたいにBody要素にカテゴリやページ固有のクラスを設定したい。
解決方法
次の内容の body_class.rb を作って _plugins ディレクトリに放り込む。
body_class.rb
class BodyClassTag < Liquid::Tag
def generate_body_class(prefix, id)
id = id.gsub(/\.\w*?$/, '').gsub(/[\/]/, '-').gsub(/^_/, '').downcase # Remove extension from url, replace '/' with underscore, Remove leading '_'
case prefix
when "class"
prefix = ""
when "categories"
prefix = "category-"
when "tags"
prefix = "tag-"
else
prefix = "#{prefix}-"
end
"#{prefix}#{id}"
end
def render(context)
page = context.environments.first["page"]
classes = []
%w[class url categories tags layout].each do |prop|
next unless page.has_key?(prop)
if page[prop].kind_of?(Array)
page[prop].each { |proper| classes.push generate_body_class(prop, proper) }
else
classes.push generate_body_class(prop, page[prop])
end
end
classes.join(" ")
end
end
Liquid::Template.register_tag('body_class', BodyClassTag)
bodyに出力用のタグを仕込む
<body class="{% body_class %}">
出力結果
この記事だと次のようになります。
<body class="url--archive-2016-01-16-jekyll-body-class category-jekyll layout-posts">
- urlのパス
default: ページのURL、スラッシュ[/]はハイフン[-]に置換 - レイアウト名
default: ページのレイアウト名 - タグ
default: nil - カテゴリ
default: nil - ページで設定したクラス
default: nil
形式はプレフィックスと値のセット。
出力は全て小文字です。
[prefix]-[value]
prefix
- url
- layout
- category
- tag
value
- urlのパス
default: ページのURL、スラッシュ[/]はハイフン[-]に置換 - レイアウト名
default: ページのレイアウト名 - タグ
default: nil - カテゴリ
default: nil - ページで設定したクラス
default: nil
ページで設定したクラスはYAML Front Matterで定義したものが出力されます。
ここでページごとに固有のクラスを設定することができます。
---
class: [post]
---