东营码良软件开发
  • 首页
  • 产品与服务
    抖音软件
  • 开发案例
  • 新闻资讯
    二级菜单A
  • 关于我们
  • GEO 优化
  • Ai超市
咨询客服
企业咨询
会员中心
登录注册找回密码
东营码良软件开发
首页›
产品与服务›
开发案例›
新闻资讯›
二级菜单A›
关于我们›GEO 优化›Ai超市›
会员中心
首页产品与服务开发案例新闻资讯我的
Dongying Maliang Software

码良软件开发

企业软件开发·微信小程序·网站建设·GEO 优化·AI 应用落地

咨询客服

导航

  • 首页
  • 产品与服务
  • 开发案例
  • 新闻资讯
  • 关于我们
  • GEO 优化
  • Ai超市

服务

  • 软件开发定制
  • GEO 搜索优化
  • 软件资源商城
  • 会员服务
  • 在线客服

行业方案

  • 零售门店
  • 教育培训
  • 医疗健康
  • 商务服务
  • 本地生活
  • 生产制造

联系电话

1886546092715154670927

地址

山东省东营市垦利区兴隆路8-5号

扫码

码良软件开发 · 品牌入驻
品牌入驻手机端查看商城、案例与在线咨询

Copyright © 2014-2026 东营码良软件开发 Inc. 版权所有鲁ICP备2025202136号-2豫公网安备41019602002340经营许可证编号:豫B2-20190103
开发资讯 > 资讯详情

可关闭的广告位怎么做才不闪烁?一次 SSR + Cookie 的实践

2026-10-04 17:37:16阅读 3
广告
码良软件/小程序开发

码良软件/小程序开发

全栈技术团队 + 资深工程师开发 · 按需定制 · 源码交付 · 长期维护 · 东营本地可对接

小程序定制API接口设计bug修复升级改版软件开发企业管理系统
立即咨询 18865460927备用电话 15154670927

一句话:给「文章详情页」做了一套后台可配、前台可关闭的广告位系统 —— 一套配置管理三种广告形态,访客点 ✕ 就不再被打扰,且保证「先看见再消失」的闪烁和布局跳动都不会发生。

功能点

能力说明
三种形态、三个位置横幅(正文上方)、侧栏(矩形 300×250 或原生信息流二选一)、底部横条(正文/评论/相关阅读之后、页脚之前)
一套内容配置驱动全部在后台用一段 JSON 配:角标、图标、标题、描述、按钮文案+链接;原生版另有品牌名与头像
与旧广告互斥后台一个下拉三选一:关闭 / 顶部广告卡片(原有那张)/ 广告位组合,从根上保证两套不会同时冒出来;默认值 = 原有行为,升级零风险
可关闭且「不闪不跳」✕ 的关闭状态记在会话 cookie,由服务端渲染阶段直接判定是否输出 —— 不是「先画出来再藏起来」,所以既没有闪一下、也没有内容回跳
改内容 = 新广告cookie 名按「文案+链接」哈希生成,后台改了文案,广告对所有访客重新出现,不会出现「配了却不显示」
响应式 + 移动端适配小屏按钮整行居中、关闭按钮常驻(触屏没有 hover)
写入严格、渲染宽容后台保存时不安全链接(如裸 #)直接拒存;前台遇到配错的槽位静默跳过,不会让文章页报错

访客实际能感知到的:广告长得像站内原生卡片(暖橙品牌色)、有关闭按钮、关掉之后刷新也不会再冒出来、手机上排版不挤。


这是设计如此的正常行为,不是故障 —— 点 ✕ 就等于「跟这条广告说再见」,它被记在浏览器 cookie 里,服务端下次直接不输出。

机制(三步)

步骤发生了什么
1️⃣ 点 ✕前端写一条 cookie:loveps-ad-banner-<hash>=1; path=/; samesite=lax
2️⃣ 下次访问文章页浏览器自动带上这条 cookie
3️⃣ 服务端渲染adVisible(name) = !requestCookies.get(name)(article-detail.tsx:80)→ 服务端直接不渲染,不是前端藏起来

为什么用 cookie 而不是 localStorage:文章页是 SSR 的。cookie 服务端读得到,第一帧就没有它 —— 所以不会「先闪一下再消失」,也不会「消失后正文往上跳」。localStorage 只能等 hydration 之后隐藏,这两个毛病都躲不掉。

为什么刷新/换文章都没用:cookie 是 path=/(全站生效),且没写 max-age ⇒ 会话 cookie,关标签页、刷新都不清,只有彻底关浏览器才失效。另外它的名字是按「广告文案 + 链接」算的哈希(scope|title|desc|href),不含文章 ID —— 所以在任意一篇文章上关掉横幅,全站文章页的横幅都不再出现。

三个槽位互不干扰:banner / sticky / side 各有各的 cookie,关一个不影响另外两个。(第 96 次那张「文章顶部广告卡片」没有 ✕,不受影响。)

现在想让广告回来,任选其一

  1. 无痕窗口(最快):Ctrl+Shift+N。
  2. 删掉该站 cookie:地址栏左侧的 🔒/⚙ 图标 → 「Cookie 和网站数据」→ 删除;或 F12 → Application → Cookies → 删掉 loveps-ad- 开头的三条。
  3. 彻底退出 Chrome(关闭所有窗口,不是只关标签页)。⚠️ 如果你开了「继续浏览上次打开的网页」,会话 cookie 可能被一起恢复 —— 这种情况用前两种更稳。
  4. 在后台改一下广告文案或链接:哈希一变就是「一条新广告」,对所有访客重新出现(顺便也是验证配置改没改上去的土办法)。

如果你觉得这个行为不合适,可以改

  • 改成「关一次记 1 天 / 7 天」:加个 max-age,比会话级更「记得住」(绝大多数站点是这个做法)。
  • 改成「每篇文章独立」:cookie 名里拼上 article.id,在 A 文关掉不影响 B 文。
  • 改成「只隐藏这一次」:不写 cookie、只 useState,刷新就回来 —— 但这样关闭基本没意义,我不推荐。
DISCUSSION

评论

登录后参与
请使用网站前台用户账号登录后发表评论。

正在加载评论...


上一篇「资讯与文章」里新增一项 「侧栏广告位」下一篇新闻资讯板块 · 改造预览

作者信息

超级管理
超级管理
等级作者
122文章
0点赞
0收藏
查看作者其他文章
广告🧩

软件定制 · 企业级项目 8 折起

10 年经验团队,按需定制 CRM、ERP、小程序,合同保障。

DDevStudio查看案例 →

文章展示

Meta Description 太长/太短如何修复 - 东营码良软件开发资讯Meta Description 太长/太短如何修复Meta Description 太长/太短对网站的收录有什么影响 - 东营码良软件开发资讯Meta Description 太长/太短对网站的收录有什么影响广告位代码分享 - 东营码良软件开发资讯广告位代码分享
「资讯与文章」里新增一项 「侧栏广告位」 - 东营码良软件开发资讯
「资讯与文章」里新增一项 「侧栏广告位」
新闻资讯板块 · 改造预览 - 东营码良软件开发资讯新闻资讯板块 · 改造预览

热门排行

2026年AI生成式搜索体系下的商标设计与品牌LOGO定制-码良Ai商标设计 - 东营码良软件开发资讯12026年AI生成式搜索体系下的商标设计与品牌LOGO定制-码良Ai商标设计19 阅读wordpress主题网站升级 - 东营码良软件开发资讯2wordpress主题网站升级30 阅读东营母婴商城小程序开发 - 东营码良软件开发资讯3东营母婴商城小程序开发18 阅读网站接入支付功能完整教程 - 东营码良软件开发资讯4网站接入支付功能完整教程8 阅读GEO企业官网完整搭建实操方案(2026最新标准) - 东营码良软件开发资讯5GEO企业官网完整搭建实操方案(2026最新标准)8 阅读团播动态灯牌MOV特效贴片定制 - 东营码良软件开发资讯6团播动态灯牌MOV特效贴片定制8 阅读
CONTENT GUIDE

文章目录

3 项
  1. 01机制(三步)
  2. 02现在想让广告回来,任选其一
  3. 03如果你觉得这个行为不合适,可以改