Jump to the content

これは抑えておきたい!JekyllでWordPressのようにbodyにクラスを追加する方法

Jekyll

これは抑えておきたい!JekyllでWordPressのようにbodyにクラスを追加する方法

WordPressって簡単で便利ですよね。デフォルトからいろいろできて。当然みんな使ってるのも頷ける。
でもね、それJekyllでも同じことできるよ。

Jekyllでbodyにクラスを追加する

問題

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]
---

参考

注目記事

最近の記事

ぼくが書いてます

イソップ

フロントエンドエンジニア

イソップ

ページの先頭に戻る

Search results

×