Jekyllで最初のh2タグ上にGoogle AdSenseなどの広告コードを挿入する方法を紹介します。方法としては、カスタムプラグインを作成し、本文記事に対してフィルターをかけることで実現しています。

環境

  • Jekyll 3.8.5

_pluginsディレクトリの作成

プロジェクトのルートに_pluginsディレクトリをまだ作成していない場合は、作成します。 _pluginsディレクトリにあるrbファイルは、プラグインとしてJekyllがサイトを生成するときに読み込まれます。

カスタムプラグインの配置

任意の名前(例:google_adsense_filter.rb)のrbファイルを_pluginsディレクトリに作成し、以下のコードを記述します。

module Jekyll
  module GoogleAdenseFilter
    def add_ad_code_before_first_h2(html)
      ad_code =
'//////////////////////////
/// ここに広告コードを記述 ///
//////////////////////////
'
     
      first_h2 = html.match(/<h2.*?>/)
      return html unless first_h2

      html.sub(/<h2.*?>/, ad_code + first_h2.to_s)
    end
  end
end

Liquid::Template.register_filter(Jekyll::GoogleAdsenseFilter)

プラグインの使用方法

記事用のレイアウトに使っているファイルでは{{ content }}で、記事の本文を取得していると思うので、そこにフィルターとしてプラグイン内のメソッドを追記します。

{{ content | add_ad_code_before_first_h2 }} 

参考サイト

Wordpressの記事ですが、このサイトを参考にしました。