【Hugo】記事の真ん中あたりに広告コードを挿入する方法

Hugoでは、実際にHTMLファイルを吐くためのテンプレートをスクリプトによって生成することが可能です。 Hugoのスクリプトは可読性が良くなくて、評判が良いとはいえないのですが、 Hugo自体が強力なフレームワークなのと、そう複雑なことをするわけではないことが多いので、 まぁ妥協されて使われています。

グーグル・アドセンスでは自動広告を選択することによって 広告を自動配置することが出来ますが、 他の広告サービスでは自動広告はないので、 例えば「記事内広告を自動的に挿入したい」という要求があると思います。

もちろん、記事ごとに地道に広告を貼っていくことも可能なのですが、 例えば、使う広告サービスを乗り換えたい場合とか、 やっぱその位置に貼るのはやめようと思った時に、 記事がこのテストステ論のように何百となくとも、何十くらいの規模であっても かなり手間です。


この記事では、記事の真ん中あたりに 広告を自動挿入する方法について紹介します。

参考にしたサイト

HugoでMarkdownのランダムな位置にGoogle AdSenseのコードを挿入する

リンク先の記事に書いてあるコードを参考にしました。 しかし、そのコードにはバグが2つあります。 私の紹介するコードはそれを修正したものとなります。

記事の真ん中に広告を挿入するコード

{{ .Content }}

{{ $p_tag := findRE "<p>(.|\n)+?</p>" .Content }}
{{ $position := div (len $p_tag) 2 }}
{{ $contents := split .Content "\n" }}
{{ $.Scratch.Set "Content" "" }}
{{ $.Scratch.Set "Counter" 0 }}
{{ range $contents }}
    {{ if hasPrefix . "<p>" }}
        {{ $.Scratch.Add "Counter" 1 }}
        {{ if eq ($.Scratch.Get "Counter") $position }}
            {{ $.Scratch.Add "Content" (partial "ad_mid.html") }}
        {{ end }}
    {{ end }}
    {{ $.Scratch.Add "Content" (print . "\n") }}
{{ end }}
{{ $.Scratch.Get "Content" | safeHTML }}

に書き換えてください。

解説

  1. まず、Contentの中からpタグが囲まれた部分を抽出します。元のコードは、ここの正規表現に余計な文字]が入ってるので削りました
  2. 真ん中位置のpタグを計算します
  3. Content自体を改行コードで分割します
  4. 分割したものを一つずつたどり、pの開始タグを探します。もし、目指す位置に到達していた場合はそこにpタグを挿入します。ここで元コードは、if hasPrefixの前に分割したContentを挿入しているのですが、この順序だと、<p>xxxxADyyyy</p>のような形になる場合があります。そうではなく、AD<p>xxxxyyyy</p>を実現したいです。なので、見つかった<p>xxxxより先に広告を挿入します
  5. 最後に、コードで作成したContentを出力します

このエントリーをはてなブックマークに追加

See also