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

    ×