# 宾客门户主题组件

**URL:** <https://meta.discourse.org/t/guest-gate-theme-component/225107>\
**Category:** Theme component\
**Created:** [2022年四月23日 20:31 UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107 "2022-04-23T20:31:54Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2022年四月23日 20:31 UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/1 "2022-04-23T20:31:55Z")

</div>

| | | |
| --- | --- | --- |
| 🛠 | **代码仓库** | [GitHub - VaperinaDEV/discourse-guest-gate-theme-component: Forced login / registration popup insired by Quora · GitHub](https://github.com/VaperinaDEV/discourse-guest-gate-theme-component) |
| ❤ | **觉得有用？** | [\> ./support --coffee](https://meta.discourse.org/u/don) |
| ❓ | **安装指南** | [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **Discourse 主题新手？** | [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

> **Guest Gate v1.0**
>
> 你好 👋 该主题组件基于 [Guest Gate (Sign Up Popup Plugin)](https://meta.discourse.org/t/guest-gate-sign-up-popup-plugin/56625/) 创建。它可以通过模态框锁定主题，阻止匿名访客查看，并强制他们注册或登录。该组件也可用作_提示_模态框，鼓励访客注册，但允许他们关闭模态框（为此，请保持 `dismissable false` 设置未勾选）。选项包括更改显示模态框之前可以查看的主题数量。
> 
> ![Screenshot 2022-04-23 at 22.05.29](https://global.discourse-cdn.com/meta/original/4X/7/4/6/746184dbcc514d36f1ca97ef7c41feef3fef83a0.png)  
> **提示：** 如果你使用“自定义门”选项并希望隐藏模态框标题（如上图所示），你需要删除 `guest_gate.title` 字段并按一下 空格。这将移除模态框标题，以便你可以使用图片下方的标题。
> 
> ![Screenshot 2022-04-23 at 22.03.16](https://global.discourse-cdn.com/meta/original/4X/c/2/1/c21498ae881f50e254287b6b88e5193546f01a31.png)
> 
> **你有两个主要的门选项：**
> 
> 1. 通用门（默认：它将在模态框中使用 Discourse 注册 CTA 文本）。它使用这些文本：`js.signup_cta.intro` 和 `js.signup_cta.value_prop`
> 
> 2. 自定义门（你可以自定义模态框：添加图片、自定义文本和颜色）。
> 
> * * *
> 
> **还有许多其他设置**
> 
> **Guest Gate 模态框全局设置**
> 
> ![Screenshot 2022-05-18 at 10.44.48](https://global.discourse-cdn.com/meta/original/4X/4/4/6/4467f5edefc83848b0e402c8aa726fca59d2939e.png)
> 
> 1. `max guest topic views`  
> _门显示之前的主题浏览次数。门首次出现后，它将在 1 和此数字之间随机出现。_
> 2. `dismissable false`  
> _移除关闭按钮，防止访客关闭它。_
> 3. `use gate buttons`  
> _在模态框页脚使用按钮而不是链接。_
> 4. `custom url enabled`  
> _启用自定义登录 URL 和自定义注册 URL 选项。正常行为（如果你不勾选此选项）是在当前主题页面显示登录或注册模态框。_
> 5. `custom login url`  
> _例如，/login 是显示“登录”模态框的主页。_
> 6. `custom signup url`  
> _例如，/signup 是显示“注册”模态框的主页。_
> 7. `gate footer position`  
> _页脚按钮/链接的位置。_
> 8. `gate show only once`  
> _Guest Gate 模态框每个会话仅显示一次。_
> 
> * * *
> 
> **自定义门设置**
> 
> ![Screenshot 2022-05-18 at 10.48.10](https://global.discourse-cdn.com/meta/original/4X/5/5/f/55f9af5b511fafa7bc8ef1a9c28938f32c77d3cf.png)
> 
> 1. `custom gate enabled`  
> _如果你想自定义模态框，请启用它。_
> 2. `custom gate image`  
> _上传要在模态框顶部显示的图片。_
> 3. `custom gate image width`  
> _上传图片的宽度。你可以使用 px、% 等，例如 100% 将添加一个全模态框宽度（减去内边距）的图片。_
> 4. `custom gate big text color`  
> _“大文本”出现在图片下方。你可以设置文本颜色。_
> 5. `custom gate little text color`  
> _“小文本”出现在大文本下方。你可以设置文本颜色。_
> 6. `custom gate background color`  
> _更改模态框背景颜色。_
> 7. `custom gate footer text color`  
> _更改页脚文本颜色。如果 `use gate buttons` 设置已禁用且你设置了自定义门，则适用此设置。_
> 8. `custom gate link color`  
> _更改页脚链接颜色。如果 `use gate buttons` 设置已禁用且你设置了自定义门，则适用此设置。_
> 
> * * *
> 
> > **致谢** ❤ 非常感谢插件作者、维护者和贡献者：@vinothkannans, @jgujgu 和 @michaeld

# Guest Gate v2.0

你好 👋

**Guest Gate v2.0** 是 Discourse 上针对匿名访客的现代可配置门控机制。

它可以显示模态框以鼓励访客 **注册或登录** ，既可以作为软性转化提示，也可以作为访客无法关闭的门控。

Guest Gate 源自原始的 [Guest Gate Sign Up Popup 插件](https://meta.discourse.org/t/guest-gate-sign-up-popup-plugin/56625/)，自那时以来已经发生了相当大的演变。

## 触发 Guest Gate

版本 2.0 支持多种触发门控的方式：

1. **页面浏览量**  
在达到可配置的合格页面浏览次数后显示门控。

2. **时间**  
在访客在合格页面上花费了可配置的时间后显示门控。

3. **滚动**  
在访客滚动了页面可配置的百分比后显示门控。

4. **灯箱（Lightbox）**  
当匿名访客在 Discourse 灯箱中打开图片时显示门控。

5. **任意**  
启用多种触发类型，并在达到第一个配置的触发条件时显示门控。

你还可以配置触发条件和模态框出现之间的延迟。

* * *

## 重复行为

在 Guest Gate 显示后，你可以控制它何时再次出现。

可用模式：

- **重复触发：** 每当配置的触发条件触发时显示门控。

- **随机页面浏览：** 在随机数量的页面浏览后显示门控。

- **每会话一次：** 在浏览器会话期间最多显示一次门控。

为了向后兼容，也支持传统的 **仅显示一次** 设置。

* * *

## URL 可见性

两个设置控制 Guest Gate 允许出现的位置：

### `url_for_show`

定义可以触发 Guest Gate 的路径。

示例：

- `*` 所有页面

- `/` 主页

- `/latest` 最新

- `/t/*` 主题

- `/c/*` 分类

### `url_for_hide`

定义 Guest Gate 绝不应出现的路径。

隐藏模式始终优先于显示列表。

* * *

## 模态框设置

### `dismissable`

允许访客关闭 Guest Gate 模态框。

禁用此选项以创建不可关闭的门控。

### `gate_modal_size`

选择模态框宽度：

- `compact`

- `standard`

- `wide`

### `gate_body_alignment`

选择主模态框内容的水平对齐方式：

- `left`

- `center`

- `right`

### `gate_footer_position`

选择登录/注册链接或按钮的对齐方式：

- `left`

- `center`

- `right`

### `gate_title_visibility`

显示或隐藏模态框标题。

### `gate_title_position`

控制标题边距定位。

* * *

## 登录和注册

Guest Gate 支持正常的 Discourse 身份验证流程以及自定义 URL。

### `use_gate_buttons`

在模态框页脚使用按钮而不是文本链接。

### `custom_url_enabled`

使用自定义登录和注册 URL，而不是 Discourse 的原生身份验证操作。

### `custom_login_url`

启用自定义 URL 时用于登录的目标。

### `custom_signup_url`

启用自定义 URL 时用于注册的目标。

你还可以独立配置按钮样式和 Font Awesome 图标。

* * *

## [Discourse Connect](https://meta.discourse.org/t/13045?silent=true)

Guest Gate 支持 [Discourse Connect](https://meta.discourse.org/t/13045?silent=true)。

当启用 [Discourse Connect](https://meta.discourse.org/t/13045?silent=true) 时，你可以选择使用以下选项提供单独的注册 URL：

- `enable_discourse_connect_signup`

- `discourse_connect_signup_url`

* * *

## 自定义门

**自定义门** 允许你完全自定义模态框的内容和外观。

通过以下方式启用：

### `custom_gate_enabled`

启用自定义门设计。

### `custom_gate_image`

显示在自定义文本上方的可选图片。

### `custom_gate_image_alt`

自定义图片的替代文本。

### `custom_gate_image_width`

使用以下值设置图片宽度：

- `150px`

- `50%`

- `100%`

### `custom_gate_image_position`

对齐图片：

- `left`

- `center`

- `right`

### `custom_gate_big_text_position`

对齐自定义标题：

- `left`

- `center`

- `right`

### `custom_gate_little_text_position`

对齐自定义文本：

- `left`

- `center`

- `right`

自定义门还提供用于标题、文本、背景、页脚和链接颜色的设置。

* * *

## 分析

Guest Gate v2.0 包含可选的注重隐私的分析功能。

通过以下方式启用：

### `enable_analytics`

启用后，Guest Gate 跟踪：

- 门控展示次数

- 触发原因

- 页面路径

- 登录点击

- 注册点击

- SSO 操作

- 关闭操作

事件通过 `window.dataLayer` 公开，并作为浏览器事件分发：

`discourse-guest-gate:analytics`

这使得 Guest Gate 可以与 **Google Analytics、Google Tag Manager、Matomo** 等分析和标签管理平台或自定义分析实现集成。

Guest Gate 不收集个人数据。

分析功能默认禁用。

### `analytics_debug_logging`\n

在配置分析时启用此功能，以在浏览器控制台中打印 Guest Gate 事件。

建议在生产环境中禁用此功能。

* * *

## 从 v1 迁移

Guest Gate v2.0 包含针对现有安装的设置迁移功能。

以下传统设置将自动迁移：

- `max_guest_topic_views`

- `dismissable_false`

- `gate_show_when_thumbnail_clicked`

因此，升级后无需手动重新创建现有配置。

* * *

## 要求

Guest Gate v2.0 需要 **Discourse 3.2.0 或更高版本** 。

* * *

> **致谢** ❤  
> 非常感谢原始插件作者、维护者和贡献者：@vinothkannans, @jgujgu 和 @michaeld

---

_[View the full topic](https://meta.discourse.org/t/guest-gate-theme-component/225107)._