在 Halo 博客的 Joe2.0 主题之中，添加最新的百度广告 js 代码

1. 介绍

此次主要阐述本站百度广告的集成方式。此前曾写过相关内容，但时间较久。

主题已历经多个版本的更新，尤其是在主题配置项方面，未找到合适的存放位置。（或许是我个人未发现）

基于 Joe2.0 主题的 1.0.10 版本进行配置。

此篇主要是为自己记录。

2. 操作

近来，对象存储 OSS 开始向我收费，网站上的图片存于阿里云的 OSS 中。随着访问量的增加，服务器的开支成本也不断上升。

真是令人惆怅。于是，我决定尝试挂上广告。

Joe2.0 所提供的广告，虽不会被浏览器插件默认屏蔽（但可手动添加屏蔽），然而链接和图片都需自行维护。这意味着广告内容需主动找寻，对于我这样的懒人而言，实在太过繁琐。

之后将广告的 js 添加至主题提供的自定义 css 中，位置却总是难以令人满意（主要是我觉得添加的位置太难看）。

只能自行尝试修改 js 。

查询 post.ftl 文件，发现将广告的 js 内容复制存储到约 108 行代码处：

代码语言：

复制

//在这里 直接插百度广告的 js 内容和 div 标签

以我有限的前端经验，插入完成后执行保存。

如此，广告内容便能完美显示了（配置完成后的显示效果，与本页面的广告内容显示效果相同）。

而后，我留意到 底部广告适配器。

这是 Joe2.0 主题中用于配置是否显示底部广告的选项。

灵机一动，我把广告 js 内容插入到这个广告适配器的 ftl 页面中，如此一来，便可通过主题控制是否显示广告。

找到：/ads/.ftl 文件进行编辑。

将内容添加至第四行以下，即：

代码的下方。这样通过主题控制是否显示底部广告和顶部广告即可实现，完整效果如下：

代码语言：

复制

(window.slotbydup = window.slotbydup || []).push({ id: “u6847511”, container: “_mfc7f5sh8y”, async: true }); (window.slotbydup = window.slotbydup || []).push({ id: “u6847510”, container: “_jsifpqtoab9”, async: true }); 广告

注意 1：配置完成后，需在主题配置的广告栏中，选择开启顶部广告，其将在文字标题下方显示，开启底部广告，则会在文章内容底部显示。

注意 2：若底部广告和顶部广告均开启，这两处将显示相同的广告（因我的示例中未做判断）。

注意 3：若看不到广告内容显示，不必惊慌。关闭浏览器的广告拦截插件对本页面的拦截，便能看到广告。

注意 4：收益甚微。毕竟本站访问人气不高，参考价值有限。

注意 5：这种修改是对主题的配置文件进行了改动，当主题升级时，针对.ftl 文件所做的修改会被覆盖，即配置的广告 js 会丢失。要么重新配置，或者查看新版本主题是否有更灵活的配置项。