hexo NexT主題增加AdSense

發表於 2019-04-02 更新於 2021-06-13 分類於 HEXO Disqus：

AdSense終於審核通過啦！之前一直沒廣告，讓我以為是自己語法有錯誤…偏偏網路上關於NexT主題增加AdSense的文章少之又少，根本不知道自己死在哪裡…

Deprecated!
此為舊版侵入式修改，NEXT 8版本以後，建議參照版更HEXO NEXT 6→8，以非侵入式修改整合AdSense、like coin、修正gitlab-ci文章更新時間錯誤的問題

前言

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

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

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

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

作法

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

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

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

到themes\next\layout\_custom\head.swing

裡面填上Google提供要放在Head的程式碼

{#
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>

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

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

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

<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

<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>

打開themes\next\layout\_macro\sidebar.swig，在最下面加上廣告欄位

沒加在HEXO提供的sidebar自定義區塊(themes\next\layout\_custom\sidebar.swig)，是因為這邊只會在本站概要時呈現，TOC頁面不會顯示廣告
而我是想說sidebar下面空空的，不如廣告就放在這

此處有加上自定義的class gooAd，後面會在js增加語法，用在TOC長度變化時動態調整廣告位置，避免檔住TOC

      {% 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 %}

打開themes\next\source\js\src\utils.js，增加js語法，隨TOC長度動態調整廣告位置。放在// Initialize Sidebar & TOC Width.的註解上方就可以了

+    // add by typeart.cc
+    $(window).on("scroll", () => {
+      $(".gooAd").css("margin-top", $(".affix").height() + +NexT.utils.getSidebarb2tHeight() + 15 + "px");
+    });
// Initialize Sidebar & TOC Width.

完成！推上github或gitlab吧！廣告沒有馬上出現是正常的，只能靜待Google審核了。至於要多久我也不知道了…

系列文章

HEXO系列文章

前言

作法

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

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

系列文章

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