### [新版登录页 瓜奇插件](https://guaqi.com/topic/78127)

**Published:** 2026-10-13T00:51:39

**Author:** 你仔细听

**Excerpt:** 兼容深浅色 Logo、桌面轮播图、瓜奇现有认证数据的响应式登录弹窗。新版登录页插件为瓜奇站点提供一套可直接替换…

兼容深浅色 Logo、桌面轮播图、瓜奇现有认证数据的响应式登录弹窗。

新版登录页插件为瓜奇站点提供一套可直接替换原有登录界面的响应式登录弹窗组件。支持深浅两套 Logo、桌面端轮播图，完全复用瓜奇原生认证逻辑，不改动原有账号登录体系，既可作为弹窗浮层调用，也可独立作为登录页面使用。

![新版登录页 瓜奇插件](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg "1241-1203d92e9c-1-130046f151-1")

## 一套组件，多种视觉背景方案

-   **深浅色 Logo 适配：** 根据站点亮色 / 深色主题自动切换对应 Logo，解决深色模式下 Logo 显示发白看不清的问题。
    
-   **桌面轮播图：** 桌面端支持多图轮播背景，自定义切换时长、过渡动画，移动端自动降级不展示轮播。
    

-   **原生认证兼容：** 完整复用瓜奇现有登录、注册、找回密码认证数据与接口，账号、验证码、第三方登录逻辑全部沿用系统原有能力。
    

## 深浅 Logo、轮播、背景视频是怎么工作的

深浅 Logo 监听站点主题状态，亮色主题加载浅色版 Logo 资源，深色主题加载深色版 Logo 资源；管理员后台分别上传两套图片地址即可，无需修改代码。

桌面轮播仅在宽度达到桌面阈值时启用，移动端自动关闭轮播背景，防止小屏布局错乱；轮播图支持配置轮播间隔、是否自动播放，不会干扰登录表单交互。

插件完全复用瓜奇原有 auth 认证接口，不会新增、拦截或改写账号密码逻辑，注册、找回密码、第三方登录保持和系统完全一致。

## 资源按需加载，避免首屏冗余

轮播图片不会在普通页面强制加载；只有登录弹窗被唤起或者访问独立登录页时，才开始异步拉取背景媒体资源。已经加载过的媒体资源会做缓存，重复打开登录弹窗不会重复发起请求。

模块不依赖 SSR。媒体加载未完成期间使用站点自带骨架屏与底色占位，不会出现空白或者布局跳动。

## 多端响应式适配

布局跟随视口宽度自动适配，桌面端完整展示轮播 / 视频背景；平板、手机端自动隐藏视频与轮播，切换简洁图片背景模式，登录表单自动缩放适配小屏幕。弹窗模式下会跟随页面容器居中，不会出现溢出滚动异常。

## 登录交互体验优化

-   深浅模式切换时，Logo 实时跟随切换，无需刷新页面。
    
-   表单错误提示、验证码弹窗沿用瓜奇原生组件样式。
    
-   支持管理员配置：是否启用视频、是否开启轮播、弹窗圆角、蒙版透明度、表单最大宽度。
    
-   独立登录页与弹窗模式二选一，后台可自由切换工作模式。
    

## 安装方式

下方提供两个下载项：直接使用版本适合安装部署，源码版本适合开发者查看和二次开发。当前版本为 1.0.0，下载后按瓜奇运行时插件流程安装并启用即可。

说明

这是瓜奇专用的扩展，在瓜奇插件中安装使用。

瓜奇扩展可以同时在 WP 端 和 Node 端 生效。

[新版登录页 瓜奇插件 – 二次元星球](https://www.ecyxq.com/topic/201)



**Comments:** 

**sanyue:** 有问题，注册获取验证码层数有问题

**春哥:** 很漂亮！谢谢老哥分享！



---