hexo NexT主題增加AdSense

前言

拖了許久,終於把AdSense弄好了!之前試了許久,審核時一直出現

AdSense被拒絕的理由是:網站處於關閉或停擺狀態

也去Google官方討論區提問過,但仍沒解決問題
索性就放著不理會了
結果有天在回查以前的筆記資料時,突然發現有廣告了?!
在回去看許久未開過的AdSense,還真的有收入進來了!
也許是Google後來審核過了吧?

由於NexT主題本身並未提供AdSense綁定,需要修改到NexT主題的原始碼
若之後有版更主題,得要記得將修改的部份一併移植過去,不然好不容易出現的AdSense就不見啦

作法

申請AdSense什麼的就不再提了,直接跳到主題修改這部份

若懶得到Google那邊複製廣告程式碼,可以直接貼上我的,記得將google_ad_client改成自己的ID就可以了

首先在Head 加入Google提供的程式碼,便於Google判定

  1. themes\next\layout\_custom\head.swing
  2. 裡面填上Google提供要放在Head的程式碼
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {#
    Custom head.
    #}
    + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    + <script>
    + (adsbygoogle = window.adsbygoogle || []).push({
    + google_ad_client: "ca-pub-5359135355025668",
    + enable_page_level_ads: true
    + });
    + </script>

sidebar下面 與 文章中間 增加廣告

此部份有做侵入式修改,未來版更主題請注意配合調整

  1. 進入目錄themes\next\layout\_custom\,增加2個檔案post_ad.ejssidebar_ad.ejs,裡面放上Google AdSense提供的廣告單元

    • post_ad.ejs,若不想要文章中間有廣告,則不必增加post_ad

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- typeart_ads -->
      <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-5359135355025668"
      data-ad-slot="7921369588"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    • sidebar_ad.ejs

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <ins class="adsbygoogle"
      style="display:block"
      data-ad-format="fluid"
      data-ad-layout-key="-gw-3+1f-3d+2z"
      data-ad-client="ca-pub-5359135355025668"
      data-ad-slot="6625829740"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
  1. 打開themes\next\layout\_macro\sidebar.swig,在最下面加上廣告欄位

    • 沒加在HEXO提供的sidebar自定義區塊(themes\next\layout\_custom\sidebar.swig),是因為這邊只會在本站概要時呈現,TOC頁面不會顯示廣告
    • 而我是想說sidebar下面空空的,不如廣告就放在這
    • 此處有加上自定義的class gooAd,後面會在js增加語法,用在TOC長度變化時動態調整廣告位置,避免檔住TOC
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
            {% if theme.sidebar.b2t %}
      <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
      {% if theme.sidebar.scrollpercent %}
      <span id="scrollpercent"><span>0</span>%</span>
      {% endif %}
      </div>
      {% endif %}
      </div>
      + <div class="gooAd sidebar-inner" style="display: block;">
      + <!-- Google AdSense start -->
      + {% include '../_custom/sidebar_ad.ejs' %}
      - <!-- 若不想要文章中間有廣告,下方的post_ad要記得刪除掉,不然前面沒建立此檔案的話,會找不到檔案導致渲染失敗 -->
      + {% include '../_custom/post_ad.ejs' %}
      + <!-- Google AdSense end -->
      + </div>
      </aside>
      {% endmacro %}
  2. 打開themes\next\source\js\src\utils.js,增加js語法,隨TOC長度動態調整廣告位置。放在// Initialize Sidebar & TOC Width.的註解上方就可以了

1
2
3
4
5
+    // add by typeart.cc
+ $(window).on("scroll", () => {
+ $(".gooAd").css("margin-top", $(".affix").height() + +NexT.utils.getSidebarb2tHeight() + 15 + "px");
+ });
// Initialize Sidebar & TOC Width.
  1. 完成!推上github或gitlab吧!廣告沒有馬上出現是正常的,只能靜待Google審核了。至於要多久我也不知道了…

建議閱讀順序

  1. 為什麼我推薦hexo部署到Gitlab
  2. HEXO基礎配置教學
  3. Git基礎設定
  4. 部署HEXO到GitLab Page
  5. Gitlab使用自訂域名搭配Cloud Flare免費升級成https
  6. hexo NexT主題增加AdSense
  7. hexo NexT主題版更心得