# 如何让登录和注册页面看起来像这样？

**URL:** <https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995>\
**Category:** Support\
**Created:** [2025年二月23日 20:10 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995 "2025-02-23T20:10:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![joshhabka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshhabka/32/452328_2.png) [@joshhabka](https://meta.discourse.org/u/joshhabka)\
**Post date:** [2025年二月23日 20:10 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/1 "2025-02-23T20:10:48Z")

</div>

![Screenshot 2025-02-23 at 3.09.04 PM](https://global.discourse-cdn.com/meta/original/4X/b/8/3/b8318870866f9dcd96458b9efc3ca307627e73e9.png)  
 ![Screenshot 2025-02-23 at 3.09.10 PM](https://global.discourse-cdn.com/meta/original/4X/f/a/8/fa8e31e6b929ed876433ce6872797df16fe893ca.png)  
 ![Screenshot 2025-02-23 at 3.09.17 PM](https://global.discourse-cdn.com/meta/original/4X/7/0/1/701cf4e2a73eb07feaff15168f0ebb211fc98634.png)

有什么插件或主题组件可以让我自定义登录、注册和身份验证页面，使其看起来像上面那样吗？

谢谢！

---

<div class="post-metadata">

**Author:** ![HAWK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hawk/32/86627_2.png) [@HAWK](https://meta.discourse.org/u/HAWK)\
**Post date:** [2025年二月23日 20:13 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/2 "2025-02-23T20:13:49Z")

</div>

您可以通过 CSS 以任何您喜欢的方式自定义它：在您的网站上进行 CSS 更改 ([Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101))，或使用官方主题组件，如 Trendy Login ([Trendy Login](https://meta.discourse.org/t/trendy-login/206955))。您需要具备 CSS 技能。

---

<div class="post-metadata">

**Author:** ![qingfeng1024](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/qingfeng1024/32/495412_2.png) [@qingfeng1024](https://meta.discourse.org/u/qingfeng1024)\
**Post date:** [2025年二月23日 20:14 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/3 "2025-02-23T20:14:12Z")

</div>

这是一个付费的 Auth0 集成登录服务；您需要从付费的 Auth0 服务提供商处购买。

---

<div class="post-metadata">

**Author:** ![joshhabka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshhabka/32/452328_2.png) [@joshhabka](https://meta.discourse.org/u/joshhabka)\
**Post date:** [2025年二月23日 20:18 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/4 "2025-02-23T20:18:24Z")

</div>

我正在使用 Central 主题，如何在不使用一些 Edge CSS（这对有广告拦截器的人来说不一致且长期来看不好）的情况下，以友好（在管理界面中，就像默认主题一样）的方式访问 CSS 设置？

---

<div class="post-metadata">

**Author:** ![joshhabka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshhabka/32/452328_2.png) [@joshhabka](https://meta.discourse.org/u/joshhabka)\
**Post date:** [2025年二月23日 20:18 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/5 "2025-02-23T20:18:53Z")

</div>

我将尝试使用趋势登录，看看它是否允许 CSS。

---

<div class="post-metadata">

**Author:** ![joshhabka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshhabka/32/452328_2.png) [@joshhabka](https://meta.discourse.org/u/joshhabka)\
**Post date:** [2025年二月23日 20:21 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/6 "2025-02-23T20:21:41Z")

</div>

我看到的登录界面是这样的，它与 Central 兼容了吗？

 ![Screenshot 2025-02-23 at 3.20.39 PM](https://global.discourse-cdn.com/meta/original/4X/2/1/e/21ec90568bbd4e515e518e0099f3116c6a7e555b.jpeg)

---

<div class="post-metadata">

**Author:** ![HAWK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hawk/32/86627_2.png) [@HAWK](https://meta.discourse.org/u/HAWK)\
**Post date:** [2025年二月23日 20:21 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/7 "2025-02-23T20:21:46Z")

</div>

我在之前的帖子中为您提供了编辑 CSS 的说明。正如 Shannon 所提到的，那些是 SSO 模态框，但如果您不使用 SSO，仍然可以实现类似的样式。

---

<div class="post-metadata">

**Author:** ![joshhabka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshhabka/32/452328_2.png) [@joshhabka](https://meta.discourse.org/u/joshhabka)\
**Post date:** [2025年二月23日 20:22 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/8 "2025-02-23T20:22:31Z")

</div>

> [@HAWK](#):
>
> 是 SSO 模态框，但如果你不使用 SSO，仍然可以实现类似的样式。

啊，好的。我将首先尝试 CSS，因为我希望能够使用 Discourse 作为 SSO 提供商！

谢谢！

---

<div class="post-metadata">

**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\
**Post date:** [2025年二月23日 20:29 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/9 "2025-02-23T20:29:07Z")

</div>

谨供参考：Central 与移动设备配合不佳。

---

<div class="post-metadata">

**Author:** ![joshhabka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshhabka/32/452328_2.png) [@joshhabka](https://meta.discourse.org/u/joshhabka)\
**Post date:** [2025年二月23日 20:43 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/10 "2025-02-23T20:43:58Z")

</div>

![Screenshot 2025-02-23 at 3.43.35 PM](https://global.discourse-cdn.com/meta/original/4X/9/c/3/9c34602b7de8d35631aac12fd23961a8bfa308c5.png)

到目前为止，我已进行到此阶段，正尝试使其与 discourse 流程协同工作。

---

<div class="post-metadata">

**Author:** ![joshhabka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshhabka/32/452328_2.png) [@joshhabka](https://meta.discourse.org/u/joshhabka)\
**Post date:** [2025年二月24日 00:33 UTC](https://meta.discourse.org/t/how-to-make-login-and-registration-pages-look-like-this/353995/11 "2025-02-24T00:33:55Z")

</div>

![Screenshot 2025-02-23 at 7.33.44 PM](https://global.discourse-cdn.com/meta/original/4X/6/f/3/6f3df1a19a79b9cb063c3afa62be5be997f94d38.png)

搞定了！🎊
