プログラミング

つい最近、このとんよー。ブログhexoにリニューアルしました。
その際、記事の中に Adsense 広告を入れたくて、いろいろと試行錯誤してました。

「マークダウンの中に Adsense コードを直接書いちゃう。」という手段があると言えばあるのですが、
すべてのファイルに Adsense コードを書いていくのは、管理の手間を考えると悪手です。
なによりスマートではありません。

元のマークダウンを変更せずに、ジェネレート時に、自動的に記事内へ Adsense コードを挿入したい。
さて、どうすればいいか…

答えを言いますと、hexo のFilterを使うことで、実現できました。
今回は私の備忘録も兼ねて、hexo の Filter を使って、ジェネレート時に記事内へ任意のテキストを挿入する方法を紹介します。

hexo の Filter

Filter とは、その言葉通り、hexo の内部処理の要所に設定されたフィルターの事です。
Filter には記事データが渡されます。記事データを加工する関数を仕込んでおくことで、記事の内容を書き換えることができます。
hexo には、デフォルトで、before_post_render や after_post_render などの Filter が用意されています。

くわしくはFilterをご覧ください。


以下が、Filter の例です。記事のタイトルを小文字に変換しています。

1
hexo.extend.filter.register('before_post_render', function(data){
2
  data.title = data.title.toLowerCase();
3
  return data;
4
});

dataとは、記事のオブジェクトです。
記事のタイトルはdata.title。url はdata.url
…などなど、記事に関するさまざまな情報が入っています。

ポイントはreturn data;です。
return 文で、data を返さないと、加工した記事データは反映されません。



さて、例を踏まえて、私が組んだコードはこんな感じです。

1
hexo.extend.filter.register('after_post_render', function(data) {
2
  let num = 0;
3
  const adCode = '<ins>…</ins><script>…</script>';
4
5
  data.content = data.content.replace(/<h2/g, function(match) {
6
    num++;
7
    if (num % 2 == 0) {
8
      return `<div class="ad-article">${adCode}</div><h2`;
9
    } else {
10
      return match;
11
    }
12
  });
13
14
  return data;
15
});

構築時の私の目的は、記事内の偶数番目の<h2>タイトルの上に、広告を表示したいでした。

したがって、filter.register の第一引数には、記事がレンダリングされた後のフィルターであるafter_post_renderを入れます。
これで、レンダリング後の記事に、処理を挟めるようになります。


第二引数には、実際の処理を記述します。

今回は、記事の内容を変更したいので、data.contentを使っていきます。

data.contentにレンダリング後の記事が入っていますので、replace と正規表現をつかって、<h2>を探します。
次に if 文で、偶数番目に adsense コードが入るように記述します。
最後に、data を return すれば処理は完了です。


ちなみにですが、hexo でジェネレートすると、▼ こんな感じで、マークダウン内の<hn>タグの内容が id として挿入されます。

1
## hoge
2
3
<h2 id="hoge">hoge</h3>

したがって、上記の replace 文で/<h2>/gではなく、/<h2/gとしています。
設定を変更する事で、id を出力させない方法があるかもしれません。

--- 広告 ---

scripts に js ファイルを置く

制作した filter の関数を、js ファイルとして保存し、scriptsフォルダに格納します。
scriptsフォルダに格納された js ファイルは、hexo が初期化中に自動的にロードして、処理してくれます。
なので、あとはジェネレートするだけです。

記事内の偶数番目の<h2>タイトルの上に、Adsense コードが記述されたファイルが生成されていきます。


より複雑な処理をしたい場合は、Plugin として保存すると良いらしいです。
> hexo - Plugin

まとめ

hexo で、記事内に任意のテキストを挿入したい時は、下記のコードを調整し、scriptsフォルダに格納すると良いでしょう。
うまく応用すれば、文字列の置換にも使えます。

1
hexo.extend.filter.register('after_post_render', function(data) {
2
3
  data.content = data.content.replace(/入れたい箇所/g, function(match) {
4
    return `入れる文字列 ${match}`;
5
  });
6
7
  return data;
8
});

では、また!