 |
摘要 | 将移动端的 登录 按钮替换为合并的 注册 / 登录 按钮，点击后打开包含链接的模态框 |
 |
代码仓库 | https://github.com/Lillinator/discourse-combined-auth-button |
 |
安装指南 | 如何安装主题或主题组件 |
安装此主题组件
概述
此主题组件将注册和登录按钮合并为一个带有下拉选项的按钮，以节省更整洁的头部空间并提升用户体验（尤其是对移动设备用户）。
特别是，Discourse 默认的移动端论坛视图会隐藏“注册”按钮，仅显示现有的“登录”按钮；这对于 Discourse 论坛的新访客（匿名视图）来说可能会令人困惑且不够直观。此外，默认的移动端登录按钮会跳转到登录页面，而该页面又包含指向注册页面的链接；这给移动设备上的新用户带来了不必要的摩擦。
未安装组件的默认移动端视图：
这个简单的 Discourse 主题组件将现有的 登录 按钮替换为标签更清晰的合并按钮——默认为 注册 / 登录。点击或轻触该按钮时，会打开一个下拉菜单或移动端模态框，其中包含指向注册或登录页面的链接。管理员设置中提供了一个选项，可以隐藏合并按钮的图标以节省更多头部空间，同时还提供设置用于更改图标和文本字符串字段，以自定义所有按钮标签。
使用组件默认设置的移动端按钮和模态框：
使用组件默认设置的桌面端按钮和下拉菜单：
管理员设置允许在移动端视图中隐藏合并按钮图标以节省更多头部空间，同时也支持更改所有按钮图标。您还可以自定义所有按钮标签。
设置与主题翻译
| 设置 | 描述 |
|---|---|
enable_on_desktop |
在所有视口尺寸上启用合并的身份验证按钮 |
hide_mobile_login_button_icon |
在移动端视图中隐藏合并的身份验证按钮图标以节省头部空间 |
login_button_icon |
登录按钮的 SVG 图标（如果未启用“隐藏移动端登录按钮图标”，则也用于合并的身份验证按钮） |
signup_button_icon |
注册按钮的 SVG 图标 |
button_labels.auth |
用于主题翻译的合并按钮文本字符串 |
button_labels.log_in |
用于主题翻译的登录按钮文本字符串 |
button_labels.sign_up |
用于主题翻译的注册按钮文本字符串 |
更多截图
注意事项
- 此组件与 移动端左侧汉堡菜单 兼容，但将站点徽标居中可能会导致头部拥挤问题。
查看我的其他 Discourse 相关内容
