瓜奇主题文字格子广告插件8码库原创

这个插件解决什么问题

中小站长想赚广告位这份钱，通常卡在三件事上：没有现成的广告位管理系统；卖格子全靠人工对接——来人问、聊价格、发收款码、手动挂链接；广告到期没人记得下架，旧的占着位置、新的进不来。格子广告本来就是碎片生意，用人工方式做，一天卖三格就要耗掉半天。

「广告文字墙」要解决的就是这件事：把格子广告的售卖、收款、上架、到期回收整条链路自动化。站长只需要在后台配一次规格和价格，剩下的交给访客自助走完。

插件概览

• 插件名称：广告文字墙

• 插件标识：guaqi/ad-text-wall

• 当前版本：v1.0.3

• 运行环境：瓜奇（GuaQi）框架运行时插件

• 适用前端：Nuxt SSR 站点，客户端与服务端同构渲染

• 上线状态：已在 8号码库（8maoku.com）首页启用运行

核心功能

一面墙 18 个格子，行列都能配

默认 6 列 3 行，合计 18 个可售格子。列数与行数都写在后台配置里，想做成 8 格的小墙或者 24 格的大墙，改配置即可，不用动代码。

六色轮换，空格子也不难看

格子底色按蓝、橙、青、紫、粉、绿六色循环铺开。一个广告都没卖出去的时候，整面墙看上去依然是一块排布整齐的色块区，而不是一片「待填充」的荒芜感。对首屏观感来说，这一点比想象中重要。

访客自助下单，全程无人值守

点空格子 → 填广告文字和跳转链接 → 选租期看实时报价 → 确认并付款 → 扫码支付。整条链路访客自己走完，站长不用回消息、不用发收款码。游客身份也能直接下单支付（后台可关），不需要先注册登录。

预约锁位，不会两个人买到同一格

访客点开空格子会生成一次预约，预约有效期 20 分钟；下单后若未完成支付，格子锁定 3 小时，超时自动释放回可租状态。避免「你还在填单，格子被别人买走了」这种最伤体验的情况。

到期自动回收，格子不永久占坑

广告租期结束后，格子状态会在渲染前自动归一为「可购买」，重新进入可租池。不需要站长手动下架，也不会因为历史记录还留在库里，就让一个格子永远挂着旧广告占位置。

访客租一个格子，共五步

• 点格子：点击任意一个可购买的格子，弹出下单窗。

• 填内容：填写要展示的广告文字与跳转链接。

• 选租期：选择租几个月，系统按单价实时算出总价。

• 确认并付款：核对文字、链接与金额，提交订单。

• 扫码支付：走瓜奇框架自带支付链路，弹出支付二维码；支付完成后格子即时上架展示。

格子的四种状态

• 可购买：空格子，任何人都能点开下单。

• 已预约：有人正在填单或等待付款，暂时锁定，其他人点开能看到提示。

• 已上架：付款完成，展示广告文字，可点击跳转。

• 已过期：租期结束，自动降级回「可购买」。

后台配置

网格规格、单价、租期、是否允许游客付款，都放在表单定义的 config.ad_text_wall 里，改配置就能调整售卖策略：

"ad_text_wall": {
  "wall_layout": "text_wall_6",       // 网格布局，6 列
  "wall_rows": "3",                   // 行数，3 行（共 18 格）
  "text_align": "center",             // 格子内文字对齐方式
  "slot_monthly_price": {             // 每格每月单价，支持多币种
    "CNY": "5",
    "USD": "0.70",
    "EUR": "0.64"
  },
  "minimum_months": "1",              // 最短租期，单位：月
  "allow_guest_pay": "1",             // 是否允许游客直接下单付款
  "purchase_description": {           // 下单窗中的购买说明
    "zh-hans": "",
    "en": "",
    "es": ""
  }
}

复制

其中 wall_layout 与 wall_rows 决定卖多少个格子，slot_monthly_price 决定卖多少钱，minimum_months 决定起租门槛。三个参数组合起来，就是一个完整的价格策略，不需要改任何代码。

技术规格

• 多语言：简体中文 / English / Español 三语，配置与前台文案按语言分开存放，切换语言不会出现空白项。

• 移动端适配：输入框字号不低于 16px，避免 iOS 自动放大页面；按钮点击区域不小于 44px；窄屏下网格转为横向滚动。

• 输出安全：访客提交的广告文字一律按文本节点渲染，不使用 v-html。即使有人在文字里塞进标签，也不会被当作 HTML 执行。

• 同构渲染：客户端与服务端共用同一份组件源码，避免服务端渲染与水合结果不一致。

安装与上线提醒

下面三条都是实际部署时踩过的坑，提前知道能省不少时间：

1. 支付表单的标题不能留空

瓜奇会把支付表单的标题当作支付网关的「商品名」提交。标题为空时，支付宝会直接拒单，返回 ACQ.INVALID_PARAMETER：商品订单的商品标题不能为空。而这条错误在前端会被统一收敛成一句「操作失败，请稍后重试」，很容易被误判成插件故障、白白排查半天插件代码。给表单帖补一个标题（例如「广告位招租」）即可恢复。

2. 升级同一插件，走「更新安装包」而不是「安装插件」

同一个插件 id 上传新版本时，「安装插件」会新增一条独立的包记录，导致同插件多版本并存；若旧版本还挂在某个前端上处于启用状态，就会触发「A runtime plugin must use one revision across all frontends」，启用过程卡在半路。正确做法是走插件卡片菜单里的「更新安装包」，它会把原本启用该插件的站点一起带进更新流程。

3. 安装、启用、删除都在后台完成

运行时插件的安装与启用走的是会话级校验，应用密码接口只能读取插件目录、写不了。所以这一步没法用脚本批量处理，在后台的运行时插件页操作即可。

常见问题

• 格子不够卖怎么办？把 wall_rows 调大即可扩容；也可以提高 slot_monthly_price 控量。

• 只想让登录用户购买？把 allow_guest_pay 关掉，就只有登录用户能下单。

• 广告到期需要手动下架吗？不需要，过期状态会在渲染前自动降级为可购买。

• 能改格子配色吗？可以，格子配色由插件运行时样式控制，在站点全局自定义 CSS 中覆盖对应的颜色变量即可生效，不需要改插件包。

小结

「广告文字墙」把一件原本很零碎的生意做成了自助流程：配一次价格，之后每卖出一格就是净收入，售出、收款、上架、到期回收都不需要人工介入。对流量不大但稳定的中小站点来说，这是把首页某块位置变成现金流的最省事的方式。

本文介绍的插件为 8号码库原创，目前已在 8maoku.com 首页实际运行，可按自身站点情况调整网格与定价后再投入使用。