Loading [MathJax]/jax/output/CommonHTML/config.js
部署DeepSeek模型,进群交流最in玩法!
立即加群
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Halo 博客Joe2.0主题下,添加最新的百度广告js

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

作者头像
zinyan.com
发布于 2023-07-14 03:03:07
发布于 2023-07-14 03:03:07
55101
代码可运行
举报
文章被收录于专栏:zinyanzinyan
运行总次数:1
代码可运行

1. 介绍

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

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

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

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

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

2. 操作

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

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

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

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

只能自己尝试修改js了。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            <#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)>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<#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会丢失。要么重新配置,或者看看新版本主题有没有更灵活的配置项了。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-10-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 zinyan 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
百度联盟SSP媒体广告异步加载代码最优解决方案
相信很多站长跟我一样,建站之后第一时间就会去做百度、谷歌等联盟广告,原因很简单,就是希望能给自己增加一丢丢的收入,虽然可能几个月才收到100块(百度真小气,一个月一百块都不给我),毕竟苍蝇再小也是肉啊,有就总比没有强,但是谷歌还好,除了申请比较费劲,因人而已,有些人一次通过,有些人N次都不通过,比如,,,我的站。
李洋博客
2023/03/03
8830
百度联盟SSP媒体广告异步加载代码最优解决方案
Joe 主题美化记录
刚放入上面代码还是不够的,我的目标是用这个代替原先的页脚信息,因此需要把原来页脚的部分代码加入到<div class="site-p"></div>
公爵
2022/09/28
9060
Joe 主题美化记录
typecho博客Joe主题修改首页滚动广告及加入文章顶部广告
{tabs-pane label="首页"} 因为首页已经有广告位了,所以直接替换就行了 将主题 index.php 的以下代码直接替换为新代码
老K博客
2024/02/19
4720
typecho博客Joe主题修改首页滚动广告及加入文章顶部广告
【Butterfly主题】添加二级跳转页
在逛别人的博客的时候,发现了有一种叫go.php的东西,可以经过自己站点的网页再跳转出去,方便SEO优化。但是像Hexo这类静态博客,想要从源HTML修改链接难度有点大,这里我们采用JavaScript动态修改。
pai233
2022/05/04
1.4K0
【Butterfly主题】添加二级跳转页
Halo添加自定义页面
halo框架很强大,这里就简单记录一下集成系统外的内容到自定义页面。 以下都是改主题,主题换了的话,页面也不会正常显示 新增页面模板 下载主题文件 解压主题文件 新增sheet_开头的ftl文件 文件内写入自定义的内容 例: 新建自定义页面 进入halo后台 点击新建页面 输入标题 点击发布 在高级选项中选择我们定义的模板,后发布即可; 新增相册页 效果如上 步骤和前面两个部分一致,新建shet_pic.ftl 模板内代码: <
MinChess
2022/12/26
2.7K0
Halo添加自定义页面
Hexo博客主题优化
在 themes/*/source/css/_custom/custom.styl 中添加如下代码:
达达前端
2019/07/03
8690
Hexo博客主题优化
『教程』首页及文章页滚动广告栏
因为之前在很多网站上都能看到广告,虽然但是,这对很多博主来说也是一笔额外的收入,我一直是入不敷出!
云计算小黑
2022/12/28
1.1K0
『教程』首页及文章页滚动广告栏
个人博客主题美化
个人博客主题美化 选择主题 Hexo默认的主题是landscape,推荐以下主题: snippet Hiero JSimple BlueLake 详见:https://github.com/searc
小小咸鱼YwY
2019/09/11
1.4K0
个人博客主题美化
halo博客主题美化
代码如下,在需要的页面加入或者统一放在header.ftl中,应为大部分页面都会用到header.ftl
晓果冻
2022/09/08
1.1K0
halo博客主题美化
给静态博客加入链接安全跳转页
在逛别人的博客的时候,发现了有一种叫go.php的东西,可以经过自己站点的网页再跳转出去,方便SEO优化。但是像Hexo这类静态博客,想要从源HTML修改链接难度有点大,这里我们采用JavaScript动态修改。
pai233
2022/01/12
1.1K0
给静态博客加入链接安全跳转页
hexo-theme-next @modified LRH
如无必要,不再更新!(2019.09.13) 今晚我做出了一个慎重的决定,由于博主时间精力有限,需要更多的时间来工作和学习。所以我将放弃对 next 的主题的自定义修改,next 主题官方已经更新到了 7.0+的版本,喜欢 next 主题风格的朋友可以在 github 更新。 我这也算是上古版本了,版本差距实在过大,所以我也将放弃博客使用主题的更新。 以下仍为当前博客使用主题,lib 资源已打包 github。
Cell
2022/02/25
2910
hexo-theme-next @modified LRH
基于 Hexo 从零开始搭建个人博客(五)
修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改站点配置文件_config.yml。部分参数如下,详细参数可参考官方的配置描述。
唐志远
2022/10/27
1.2K0
基于 Hexo 从零开始搭建个人博客(五)
博客从 typecho 迁移到 Hexo
Hexo 环境搭建 使用 coding 和 github.io 的 pages 服务,绑定了自己的域名,做了双线解析,国内用户解析到 coding ,国外用户解析到 github.io,访问速度很满意(本来就是静态文件,访问速度很快)。 Hexo 环境的搭建,这里不再赘述,主要介绍如何导出 typecho 的数据和 Hexo 站点的配置以及 Next 主题的配置及优化。 typecho 数据导出 文章数据的导出 花了点时间把 typecho 的文章全部改写成 Markdown 的格式,方便我导出为 md 文
tanmx
2018/07/16
2.4K0
Hexo的Next主题优化教程
陈某的独立博客搭建已经有三年多时间了,使用Hexo+Git,一直使用的主题是jacman,前几天女票看到说太LOW了,这哪能忍,必须换一个逼格高点的。
爱撒谎的男孩
2023/08/25
1.2K0
Hexo的Next主题优化教程
Hexo安装并使用Butterfly主题
本片文章为本人想要换hexo的主题时所写。因此省略node和hexo的安装,直接在初始化博客开始
Dreamy.TZK
2020/04/09
5.2K0
hexo-butterfly-基础操作
​ 基本配置信息可参考“博客项目基本操作”文档说明进行配置,此处针对一些个性化设置做简单配置说明
hahah
2022/06/14
2.9K0
Hexo Next主题添加版权信息
主题配置文件下,搜索关键字 post_copyright , 将 enable 改为 true:
smartsi
2019/08/07
2.1K0
GitHub page接入Google广告
今天突然上 Google-Analytics 看了看,发现我的博客突然多了很多流量,我擦,写的这篇路由器访问国外网站的文竟然还有这么多人看,还是挺欣慰的,这个小破站建立已经一年多了,不比在大平台写博客,GitHub pages 搭的个人博客基本没有什么推广的,能看到都是别人在浏览器里面搜到的,顶多通过友链进来,而且百度还不收录 GitHub page 搭的网站,因此流量更是少得可怜,稍微有人看一下都很高兴了。
棒棒鸡不棒
2022/09/02
1.8K0
GitHub page接入Google广告
hexo博客主题推荐_wordpress社交主题
备用地址: https://wang-qz.gitee.io/crystal-blog/
全栈程序员站长
2022/09/27
69.1K0
hexo博客主题推荐_wordpress社交主题
基于 Hexo 从零开始搭建个人博客(六)
2021-04-27 butterfly3.4.0 -> butterfly3.7.1
唐志远
2022/10/27
1.1K0
基于 Hexo 从零开始搭建个人博客(六)
相关推荐
百度联盟SSP媒体广告异步加载代码最优解决方案
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验