文字广告墙 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：游客看到的是什么？

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

六、它适合什么样的站

• 资源站 / 下载站：广告位是你现成的变现口子，一格一售，省掉反复谈价的沟通成本。

• 已经有稳定流量的技术博客：与其挂联盟广告，不如把首屏位置按格卖，价格你自己定。

• 本地商家、服务类站点：把「广告位出租」做成固定栏目，比一次性的软文省心得多，也更容易续费。

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

演示地址:https://8maoku.com/

下载地址：https://8maoku.com/article/3498