Hexo

HexoにGoogle Adsenseをセットアップする

Hexo

HexoにGoogle Adsenseをセットアップする

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
Hexoに、Google Adsenseを設定して広告をつけようと思います。

HexoにGoogle Adsenseをセットアップする

Google Adsenseの広告設定は済ませている前提で進めていきます。
HTMLのコードは取得できる状態ということです。

組み込む方法は?

EJSテンプレートエンジンを使っていますのでテーマに
テンプレートを追加します。

テンプレートに新規のフォルダを作ります。

後で管理しやすいように、新規のフォルダにして
customと名前をつけておきます。

themes/landscape/layout/_custom_ad/google_adsense.ejs

ad.ejsの中身には、Google AdsenseのHTMLのコードだけです。

layout.ejsを編集する

themes/landscape/layout/layout.ejs

<%- partial('_partial/head') %>
<body>
  <div id="container">
    <div id="wrap">
      <%- partial('_partial/header', null, {cache: !config.relative_link}) %>
      <!-- ad start -->
      <%- partial('_custom_ad/google_adsense') %>
      <!-- ad end -->
      <div class="outer">
        <section id="main"><%- body %></section>
        <% if (theme.sidebar && theme.sidebar !== 'bottom'){ %>
          <%- partial('_partial/sidebar', null, {cache: !config.relative_link}) %>
        <% } %>
      </div>
      <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
    </div>
    <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
    <%- partial('_partial/after-footer') %>
  </div>
</body>
</html>

これでおしまいです。

まとめ

広告をはると、ブログっぽくなりますね。
今回紹介した方法が、ページに自由度が生まれて活用できそうです。

補足、おまけ

今回は、ありません。

参考資料・リンク

http://www.embeddedjs.com/