文字广告墙 1.0.4:一格一售的自助广告位,配色和尺寸现在完全跟着站点主题走


1.0.4 是一次「审美 + 稳定性」的更新,三句话说完:

  • 配色和尺寸不再自带一套,全部从站点设计令牌派生。你换主题色、切深色模式、改全站字号,广告墙自己就跟着变。
  • 三种状态终于分得清:招租中、已售出、付款处理中/等审核,以前全挤在一种虚线样式里。
  • 修掉两个毛病:一个是校验提示会显示 undefined,一个是安装包结构和官方不一致(可能导致个别解包环境装完不生效)。

一、它到底是个啥

一句话:把一块广告位切成网格,一格一售,买家自己填文字和链接,钱走你自己的站点支付和审核链路。

具体跑起来是这样:

  • 整列同色,复刻经典文字广告墙的观感。列数、格子数、每格月价都能配。
  • 买家点格子 → 弹窗填「广告文字 + 广告链接(选填)+ 购买月数」→ 实时算总价 → 确认付款。
  • 付款后进入你站点的审核流程,你在后台审,通过后格子自动变成已售状态并展示买家文字。
  • 已售格子可以直接点进去跳转买家链接,等于给广告主一个真实外链。

有一点要先说清楚:它是表单型插件(formExtension),不是模块型。所以它不是「拖一个模块到页面」,而是挂在表单上——这点和站上那些积分玩法插件不一样,装的时候别找错地方。

二、这次 1.0.4 改了什么

1. 配色不再「自带一套」,全部从站点令牌派生

旧版自己带了一整套颜色。你站点换皮肤,广告墙还是老样子,放上去就有点出戏。

现在尺寸和颜色全部从站点变量派生:


.gqadw {
  --gqadw-unit: var(--gq-module-unit, 1rem);        /* 尺寸跟随全站缩放 */
  --gqadw-accent: var(--el-color-primary, #ff4612); /* 品牌色跟随主题 */
}

用到的都是站点自己的令牌:--gq-module-unit(尺寸/圆角/间距)、--el-color-primary(品牌色)、--el-bg-color、--el-text-color-*、--el-border-color、--el-fill-color-light。

结果就是:切深色模式不用再管它。深色下已售格是暖色暗底,不再是刺眼的白块。

列色也重排了一遍。以前是彩虹色环,现在第一列用品牌橙 #ff4612 起手,其余列只做同明度的点缀(青碧/靛蓝/琥珀/品玫/石板),整墙看起来像一套设计语言,而不是六种颜色撞在一起。

2. 三种状态终于能一眼分清

这是旧版最别扭的地方:「招租中」和「付款处理中/等待审核/暂不可购买」用的是同一种虚线样式,满屏虚线,你根本不知道哪格能买。

现在拆成两套:

  • 招租中(可买):虚线边框 + 品牌橙文字 + 纯 CSS 画的圆形加号,悬停微微上浮。
  • 已售出:浅列色底 + 左侧 3px 列色竖条 + 【品牌】 文字染列色。
  • 付款处理中/等待审核/暂不可购买:实底中性灰 + 状态点,一眼看出点不动。

3. 弹窗、价格、手机端

  • 价格做成胶囊标签,月价一眼可见,不用点进去才知道多少钱。
  • 弹窗重做:标题左侧品牌色竖条、报价区浅底、提交按钮用站点同款渐变和阴影,配了移动端底部安全区。
  • 手机端修掉了「招租中」被截断成「招…」的问题:格子最小宽度放宽,点击区做到 40px。
  • 底部提示跟着走:左右滑动查看全部格子。

4. 顺手修掉的两个毛病

① 校验提示会显示 undefined

组件里 purchase() 要用的两个文案键,labels 里漏配了。结果就是:空着广告文字点付款,弹出来的提示是 undefined。


// 补上这两行就好了
invalidText: t("invalidText"),   // 请填写 2-60 个字的广告文字
invalidUrl: t("invalidUrl"),     // 请填写有效的 HTTP 或 HTTPS 链接

三语词条本来就有,是组件层漏挑。现在中文、英文、西班牙文都不会再冒 undefined。

② 安装包结构

1.0.4 的包现在逐条目对齐官方包结构(含目录条目、压缩方式、时间戳)。文件清单一样不代表包一样,个别解包环境只认目录条目,缺了就会「装上了但插件不生效」。

三、怎么装上去

1. 上传:在插件管理里上传 1.0.4 的插件包。

2. 启用:在插件列表里把它打开。启用是按前端网站独立的,一个站开了不影响另一个站。

3. 建表单:表单类型选「广告文字墙」,在里面配广告位(列数、每格月价、最少购买月数等)。

4. 挂到页面:进 builder,把这个表单挂到你想要的位置(首页、侧栏都行)。

5. 点发布:这一步别漏——builder 改完必须点「发布」,前台才会真正生效。

第 3、4 步是这套插件最容易卡住的地方:它是表单型的,光启用插件、不建表单不挂页面,前台什么都不会有。

四、装完怎么验收

别在页面上猜,直接打接口。询价用的是 gqAdTextWallQuote:


mutation {
  gqAdTextWallQuote(
    input: { formId: 7, slotKey: "x1y1", months: 1, currency: "CNY" }
  ) {
    result
  }
}

formId 换成你那个表单的 ID,slotKey 是格子编号——默认 x1y1 就是第 1 列第 1 行,x1y2 是第 1 列第 2 行,以此类推。返回里会给出月价、总价、币种和货币符号。

能拿到价格,就说明格子配置、价格规则、币种三件事都通了。

拿不到的话,返回的错误码能直接定位问题:

  • ad_text_wall_purchase_not_allowed:这个身份没权限买,多半是登录态或表单的购买条件没放开。
  • ad_text_wall_reservation_invalid / ad_text_wall_reservation_mismatch:格子被占了,或者询价和下单不是同一笔(价格中途变了)。
  • ad_text_wall_payment_required:订单建了但还没付款。
  • ad_text_wall_order_exists:这个格子已经有单子了,别重复下。

五、常见问题

Q:装好了、开关也开了,页面上什么都没有?

按顺序查三件事——插件开关开了没、表单有没有真的挂到那个页面上、有没有点「发布」。它是表单型插件,挂在表单上,不是拖一个模块就完事。

Q:切到深色模式,格子还是白的?

先清一下页面缓存再看。1.0.4 的颜色全部走站点令牌,深色主题是自动跟随的,不需要单独配置。

Q:深色下已售格看着偏暗,正常吗?

正常,那是刻意的:深色下用暖色暗底替代亮色块,避免夜里刺眼。如果你想要纯白底,改样式表里已售格那一行的底色即可。

Q:想让格子更大/更小?

尺寸跟的是站点的 --gq-module-unit。改站点根字号,整墙跟着缩放,不用单独调插件。

Q:想改成只有品牌橙一种颜色?

配色在组件源码的 PALETTE 数组里,一列一行。改一行就能切成单色,别的地方不用动。

Q:能不能一页放两堵墙?

可以。每堵墙绑自己的表单,格子数、月价、列数互不影响。

Q:游客看到的是什么?

能看能点,走到付款前会提示登录(如果表单设了登录要求),登录回来接着买。

六、它适合什么样的站

  • 资源站 / 下载站:广告位是你现成的变现口子,一格一售,省掉反复谈价的沟通成本。
  • 已经有稳定流量的技术博客:与其挂联盟广告,不如把首屏位置按格卖,价格你自己定。
  • 本地商家、服务类站点:把「广告位出租」做成固定栏目,比一次性的软文省心得多,也更容易续费。

最后一句实话:这玩意的价值不在「多卖几格」,而在把广告位变成标品。 明码标价、自助下单、自动进审核,你就不用每次都跟广告主来回砍价——省下来的时间,比多卖一格值钱。

下载点可用性1 个下载点,1 个已验证可用
  • 本地下载已验证可用

可用性由站点定时核验,最近一次 2026-10-10 09:44。若某个下载点不可用,可在评论区告知,我们会尽快替换。

本文已于 2026-10-10 提交 百度、IndexNow 的收录通道,以缩短收录周期。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注