Vanblog基于客制化实现文章内嵌广告位

首先，预设好你的广告位 `class`，比如我使用的div：

```html
<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>
```

所有js重点操作就是找出页面中的这个div并渲染！


<!-- more -->

## 客制化脚本

- 在自定义Script中填入下面的代码，如果有其他自己的客制化脚本，请自行合并！

```js
var url;
window.onload = async function () {
    url = window.location.href;
    // 加载广告组件
    await loadGoogleAdsJs();

    // 监听网站主体部分，在页面变化时重新渲染广告
    listener_body();
}

/**
 * 谷歌广告js加载
 */
async function loadGoogleAdsJs() {
    let script = document.createElement("script");
    script.setAttribute("async", "");
    script.setAttribute("crossorigin", "anonymous");
    // 记得修改你的脚本参数哦！！！
    script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684";
    document.body.appendChild(script);
    // console.log('loadGoogleAds');
}

/**
 * 监听body变化，实现页内刷新广告
 */
async function listener_body() {
    // 首次初始化广告
    show_ads();

    var footers = document.getElementsByClassName("footer-icp-number");
    var height = footers[0].offsetTop;
    // console.log(height);
    // 选择要观察的目标节点
    const body = document.body;

    // 观察器的配置（需要观察什么变动）
    var config = { childList: true };

    // 当观察到变动时执行的回调函数
    var callback = function (mutationsList, observer) {
        let footer = document.getElementsByClassName("footer-icp-number");
        var new_height = footer[0].offsetTop;
        if (height != new_height) {
            height = new_height;
            // 页面变化时，重新渲染星空背景，1效果不对，2很卡
            // clear_stars();
            // show_stars();
            // 页面变动时重新加载广告
            if (url != window.location.href) {
                url = window.location.href;
                show_ads();
            }
        }
    };

    // 创建一个观察器实例并传入回调函数
    var observer = new MutationObserver(callback);

    // 用配置文件初始化观察器实例
    observer.observe(body, config);
    // console.log('listener_body');
}

/**
 * 显示广告
 */
async function show_ads() {
    initAds = 0;
    // 1.文章内广告位设置
    let article_ads = document.getElementsByClassName("article-ads");
    for (var ad = 0; ad < article_ads.length; ad++) {
        article_ads[ad].innerHTML = "<ins class=\"adsbygoogle ads-custome\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8842635629279684\" data-ad-slot=\"4336551477\"></ins>";
    }

    // 2.读取所有自定义的广告位
    let adsbygoogles = document.getElementsByClassName("ads-custome");
    console.log(adsbygoogles.length);
    // 3.给所有广告位拉取一遍广告
    for (var ad = 0; ad < adsbygoogles.length; ad++) {
        (adsbygoogle = window.adsbygoogle || []).push({});
    }

    // console.log('show_ads');
}

```