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:游客看到的是什么?
能看能点,走到付款前会提示登录(如果表单设了登录要求),登录回来接着买。
六、它适合什么样的站
- 资源站 / 下载站:广告位是你现成的变现口子,一格一售,省掉反复谈价的沟通成本。
- 已经有稳定流量的技术博客:与其挂联盟广告,不如把首屏位置按格卖,价格你自己定。
- 本地商家、服务类站点:把「广告位出租」做成固定栏目,比一次性的软文省心得多,也更容易续费。
最后一句实话:这玩意的价值不在「多卖几格」,而在把广告位变成标品。 明码标价、自助下单、自动进审核,你就不用每次都跟广告主来回砍价——省下来的时间,比多卖一格值钱。
- 本地下载已验证可用
可用性由站点定时核验,最近一次 2026-10-10 09:44。若某个下载点不可用,可在评论区告知,我们会尽快替换。