晓观点右侧三联图和底部banner随内容展示对应图片
- 工作日记
- 2小时前
- 36热度
- 0评论
开发背景
晓观点提高转化率，优化广告的展示内容，需要跟当前内容页面的内容匹配上，例：如果是BPO产品，banner显示bpo,如果是机器人应用，显示机器人应用banner，且不受导航栏目限制，取消旧版的按照栏目来设定banner的方式。
实现逻辑是：通过判断标题里的关键词，来实现对应的图片展示效果。
效果图如下：
HTML代码块
<h1 class="entry-title">BPO智能客服装修技巧又有哪些呢？淘宝店铺手机端装修全攻略：5大技巧助你流量翻倍！</h1>
<aside class="sidebar" style="left: auto;">
<div class="widget widget_image_myimg"> <a href="https://enterprise.xiaoduoai.com/enuser/login?callback=https%3A%2F%2Fwww.xiaoduoai.com%2Fapp%2Fdetail%2Fapp_robot%3FeditType%3D%E6%99%93%E8%A7%82%E7%82%B9_%E5%86%85%E9%A1%B5%E5%B0%8Fbanner_%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D%E6%9C%BA%E5%99%A8%E4%BA%BA " target="_blank" rel="noopener">
<img class="j-lazy" src="https://insight.xiaoduoai.com/wp-content/uploads/2025/05/img_v3_02mi_52e7c208-b117-4e3b-ba8b-a31e224e428g.jpg" data-original="//insight.xiaoduoai.com/wp-content/uploads/2025/05/img_v3_02mi_52e7c208-b117-4e3b-ba8b-a31e224e428g.jpg" alt="智能客服机器人" img-loaded="true"> </a>
</div><div class="widget widget_image_myimg"> <a href="https://enterprise.xiaoduoai.com/enuser/login?callback=https%3A%2F%2Fwww.xiaoduoai.com%2Fapp%2Fdetail%2Fapp_aggregated_reception%3FeditType%3D%E6%99%93%E8%A7%82%E7%82%B9_%E5%86%85%E9%A1%B5%E5%B0%8Fbanner_%E8%81%9A%E5%90%88%E6%8E%A5%E5%BE%85 " target="_blank" rel="noopener">
<img class="j-lazy" src="https://insight.xiaoduoai.com/wp-content/uploads/2025/05/img_v3_02mi_d3ce3bea-59a9-4b7e-a7ae-4af9fcc638fg.jpg" data-original="//insight.xiaoduoai.com/wp-content/uploads/2025/05/img_v3_02mi_d3ce3bea-59a9-4b7e-a7ae-4af9fcc638fg.jpg" alt="聚合接待" img-loaded="true"> </a>
</div><div class="widget widget_image_myimg"> <a href="https://enterprise.xiaoduoai.com/enuser/login?callback=https%3A%2F%2Fwww.xiaoduoai.com%2Fapp%2Fdetail%2Fapp_robot%3FeditType%3D%E6%99%93%E8%A7%82%E7%82%B9_%E5%86%85%E9%A1%B5%E5%B0%8Fbanner_%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D%E6%9C%BA%E5%99%A8%E4%BA%BA " target="_blank" rel="noopener">
<img class="j-lazy" src="https://insight.xiaoduoai.com/wp-content/uploads/2024/07/image-798.png" data-original="//insight.xiaoduoai.com/wp-content/uploads/2024/07/image-798.png" alt="智能客服机器人" img-loaded="true"> </a>
</div> </aside>底部banner HTML代码块，增加id="footer_banner"
<a href="http://insight.xiaoduoai.com/wp-content/uploads/2025/07/20250701-101142-1.png" id="footer_banner" target="_blank" rel="noopener">
<img src="http://insight.xiaoduoai.com/wp-content/uploads/2025/07/20250701-101142-1.png" style="margin-bottom:10px;width:100%">
</a>JS执行代码块
<!-- 详情页图片切换js -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const titleEl = document.querySelector("h1.entry-title");
if (!titleEl) return;
const titleText = titleEl.textContent.trim();
// 关键词分类映射：每个分类有多个触发词 + 对应的图片数组
const keywordGroups = [
{
triggers: ["机器人", "智能客服","客服系统"],
images: [
{
link: "https://enterprise.xiaoduoai.com/enuser/login?callback=https%3A%2F%2Fwww.xiaoduoai.com%2Fapp%2Fdetail%2Fapp_robot",
src: "https://insight.xiaoduoai.com/wp-content/uploads/2025/05/img_v3_02mi_52e7c208-b117-4e3b-ba8b-a31e224e428g.jpg",
alt: "智能客服1"
},
{
link: "https://enterprise.xiaoduoai.com/enuser/login?callback=https%3A%2F%2Fwww.xiaoduoai.com%2Fapp%2Fdetail%2Fapp_aggregated_reception",
src: "https://insight.xiaoduoai.com/wp-content/uploads/2025/05/img_v3_02mi_d3ce3bea-59a9-4b7e-a7ae-4af9fcc638fg.jpg",
alt: "智能客服2"
},
{
link: "https://enterprise.xiaoduoai.com/enuser/login?callback=https%3A%2F%2Fwww.xiaoduoai.com%2Fapp%2Fdetail%2Fapp_robot",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081209182860.png",
alt: "智能客服3"
}
],
footerBanner: {
link: "https://enterprise.xiaoduoai.com/enuser/login?callback=https%3A%2F%2Fwww.xiaoduoai.com%2Fapp%2Fdetail%2Fapp_robot%3FeditType%3D%E6%99%93%E8%A7%82%E7%82%B9_%E6%96%87%E7%AB%A0%E9%A1%B5%E4%B8%8B%E6%96%B9banner_%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D%E6%9C%BA%E5%99%A8%E4%BA%BA",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/07/20250701-101142-1.png",
alt: "底部机器人广告"
}
},
{
triggers: ["AI训练场", "客服培训", "培训客服","客服训练","训练客服","AI训练平台","AI训练系统"],
images: [
{
link: "https://www.xiaoduoai.com/app/detail/app_barracks",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208423025.png",
alt: "AI训练场1"
},
{
link: "https://www.xiaoduoai.com/app/detail/app_barracks",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208423021.png",
alt: "AI训练场2"
},
{
link: "https://www.xiaoduoai.com/app/detail/app_barracks",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208422953.png",
alt: "AI训练场3"
}
],
footerBanner: {
link: "https://www.xiaoduoai.com/app/detail/app_barracks",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208422824.png",
alt: "AI训练场"
}
},
{
triggers: ["聚合接待", "接待","聚合"],
images: [
{
link: "https://www.xiaoduoai.com/app/detail/app_aggregated_reception",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208351549.png",
alt: "聚合接待-分组接待"
},
{
link: "https://www.xiaoduoai.com/app/detail/app_aggregated_reception",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208351520.png",
alt: "聚合接待-回复超时预警"
},
{
link: "https://www.xiaoduoai.com/app/detail/app_aggregated_reception",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208351793.png",
alt: "聚合接待-亮灯提示"
}
],
footerBanner: {
link: "https://www.xiaoduoai.com/app/detail/app_aggregated_reception",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208351674.png",
alt: "聚合接待"
}
},
{
triggers: ["客服外包", "BPO", "AI+BPO","外包客服","星环"],
images: [
{
link: "https://www.xiaoduoai.com/app/detail/app_bpo",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208393622.png",
alt: "客服外包-降本增效"
},
{
link: "https://www.xiaoduoai.com/app/detail/app_bpo",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208393678.png",
alt: "客服外包-售后"
},
{
link: "https://www.xiaoduoai.com/app/detail/app_bpo",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208393514.png",
alt: "客服外包-人力紧缺"
}
],
footerBanner: {
link: "https://www.xiaoduoai.com/app/detail/app_bpo",
src: "http://insight.xiaoduoai.com/wp-content/uploads/2025/08/2025081208393468.png",
alt: "客服外包"
}
}
];
// 找到 sidebar 里的所有 widget_image_myimg
const imgWidgets = document.querySelectorAll(".sidebar .widget_image_myimg");
// 遍历每个关键词分组
for (const group of keywordGroups) {
if (group.triggers.some(trigger => titleText.includes(trigger))) {
// 替换对应的三张图片
imgWidgets.forEach((widget, index) => {
if (group.images[index]) {
const linkEl = widget.querySelector("a");
const imgEl = widget.querySelector("img");
if (linkEl) linkEl.href = group.images[index].link;
if (imgEl) {
imgEl.src = group.images[index].src;
imgEl.setAttribute("data-original", group.images[index].src);
imgEl.alt = group.images[index].alt;
}
}
});
// 新增文章底部banner图片和链接替换
const footerLink = document.getElementById("footer_banner");
if (footerLink && group.footerBanner) {
// 更新链接
if (group.footerBanner.link) {
footerLink.href = group.footerBanner.link;
}
// 更新图片
const imgEl = footerLink.querySelector("img");
if (imgEl) {
imgEl.src = group.footerBanner.src;
imgEl.setAttribute("data-original", group.footerBanner.src);
if (group.footerBanner.alt) {
imgEl.alt = group.footerBanner.alt;
}
}
}
break; // 找到一个匹配分组就停止
}
}
});
</script>
<!-- 详情页图片切换js end-->这里抓标题用到了h1标签下的entry-title样式来获取，所以如果自己要使用请修改你自己的元素选择器即可。
开发者：李辉
优化日期：2025年8月中旬