### [文字广告墙 1.0.4：一格一售的自助广告位，配色和尺寸现在完全跟着站点主题走](https://8maoku.com/article/3498)

**Published:** 2026-10-10T01:44:31

**Author:** zenghe

**Excerpt:** 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://www.q0di.top/wp-content/uploads/2026/10/63.jpg)

**Tags:** 文字广告墙

**Categories:** 插件模块

---