Halo 博客Joe2.0主题下，添加最新的百度广告js

1. 介绍

主要介绍本站的百度广告的集成方式，原先写了一篇 https://zinyan.com/?p=251 ，但是比较久了。

主题都已经更新了不少版本了，

特别是主题配置项中，并没有合适的存放地方。（PS，也许是我自己没有找到吧）

基于Joe2.0主题，1.0.10版本做的配置。

本篇主要是记录给自己看的。

2. 操作

最近对象存储OSS也找我收费了，网站上的图片存储在了阿里云的OSS上。访问量有了，服务器的开支成本也在上升。

惆怅啊。所以我决定还是挂上个广告试试了。

Joe2.0中提供的广告，虽然不会被浏览器的插件默认屏蔽掉（但是也可以手动添加屏蔽）。但是链接和图片都要自己维护。也就是说广告内容需要我们主动去找，对于我这种懒人来说，太繁琐了。

然后将广告的js添加在主题提供的自定义css中，位置又老是不让人满意（主要是我不满意，添加的位置太丑了）。

只能自己尝试修改js了。

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

            <#include "template/module/post_operate.ftl">
            <#import "template/macro/post_copyright.ftl" as pc>
            <@pc.post_copyright post_url="${post.fullPath}"/>
            //在这里 直接插百度广告的js内容和div标签
            <@adpost.ads_post type="bottom" />
          </div>

就我浅薄的前端经验。插入完毕之后执行保存。

那么广告内容就可以完美显示了（配置完毕后的显示效果，就和本页面的广告内容显示效果一样的）。

然后，我看到了 <@adpost.ads_post type="bottom" /> 底部广告适配器。

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

灵机一动，我将广告js内容插到这个广告适配器的ftl页面中，那么我就可以通过主题控制，是否显示广告了啊。

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

将内容添加到第四行以下，也就是： <#if (type=='top' && settings.enable_post_ads_top==true) || (type=='bottom' && settings.enable_post_ads_bottom == true)>

代码的下面。这样我们通过主题控制是否显示底部广告和是否显示顶部广告，就能够控制了。完整效果如下所示：

<#macro ads_post type='top'>
  <#if settings.enable_clean_mode != true && post.status != 'DRAFT'>
    <#if (type=='top' && settings.enable_post_ads_top==true) || (type=='bottom' && settings.enable_post_ads_bottom == true)>
      <div class="_mfc7f5sh8y"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u6847511",
            container: "_mfc7f5sh8y",
            async: true
        });
    </script>
<div class="_jsifpqtoab9"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u6847510",
            container: "_jsifpqtoab9",
            async: true
        });
    </script>
<!-- 多条广告如下脚本只需引入一次 -->
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
    </script>
 <#assign cover = (type=='top')?then(settings.post_ad_cover_top, settings.post_ad_cover_bottom)>
      <#assign link = (type=='top')?then(settings.post_aside_ad_link_top, settings.post_aside_ad_link_bottom)>
      <#if cover != '' && link != ''>
        <section class="joe_advert-large">
          <a target="_blank" rel="noopener noreferrer nofollow" href="${link}" title="广告">
            <img class="omit" width="100%" src="${cover}" onerror="Joe.errorImg(this)" alt="广告"/>
            <span class="icon">广告</span>
          </a>
        </section>
      </#if>
    </#if>
  </#if>
</#macro>

注意1：配置完毕后，需要在主题配置中的广告栏配置，选择开启顶部广告，那么就会在文字标题下面显示，开启底部广告，就会在文章内容的底部显示广告了。

注意2：你如果底部广告和顶部广告都开启了，那么这两个地方都会显示一样的广告，（因为我的示例中没有做判断。）

注意3：你如果看不到广告内容显示，不慌。将你的浏览器的广告拦截插件关闭对本页面的拦截，你就能看到广告了。

注意4：收益聊胜于无的感觉。毕竟本站访问人气并不高哦。可参考价值不足。

注意5：这种修改，我们是改动了主题的配置文件哦，当主题进行升级的时候。你针对的ads_post.ftl 文件做的修改会被覆盖掉。

也就是我们配置的广告js会丢失。要么重新配置，或者看看新版本主题有没有更灵活的配置项了。

目录CONTENT

Halo 博客Joe2.0主题下，添加最新的百度广告js

1. 介绍

2. 操作

评论区