截止目前，单对本网站的handsome主题登录页面就做了不少美化。现对以往相关文章进行汇总。

由于“密码找回”和“TeConnect第三方登录”插件是直接输出文字和图标，因此需要对其进行美化，优化排版。

一、对两个插件进行统一美化

1. 把原本连在一起的 HTML 拆成两段，中间留一个视觉分隔线；
2. 用一段极小的内联 CSS 做“极简美化”（圆角、柔和阴影、悬停动效）；
3. 预留一个 .custom-color 变量，想换主题色只改一行即可；

4. 这里“密码找回”按钮在《handsome主题添加密码找回》文末有另外提及。

   <!-- 社交登录区域 -->
   <div class="login-block social-login">
       <?php TypechoOAuthLogin_Plugin::show(); ?>
   </div>
   
   <!-- 分隔线 -->
   <div class="login-separator">
       <span>或</span>
   </div>
   
   <!-- 原生辅助链接 -->
   <div class="login-block extra-link">
       <?php
       $activates = array_keys(Typecho_Plugin::export()['activated']);
       if (in_array('Passport', $activates)) {
           echo '<a href="'
              . Typecho_Common::url('passport/forgot', $options->index)
              . '" class="custom-color">忘记密码？</a>';
       }
       ?>
   </div>
   
   <!-- 极简美化 -->
   <style>
   /* 主题色变量，想换色只改这里 */
   :root{--theme-color:#409eff;}
   
   /* 统一块级样式 */
   .login-block{
       margin:16px 0;
       padding:12px 24px;
       background:#fff;
       border-radius:6px;
       box-shadow:0 2px 6px rgba(0,0,0,.06);
       text-align:center;
   }
   
   /* 分隔线 */
   .login-separator{
       position:relative;
       text-align:center;
       margin:12px 0;
       font-size:13px;
       color:#999;
   }
   .login-separator::before,
   .login-separator::after{
       content:'';
       position:absolute;
       top:50%;
       width:calc(50% - 24px);
       height:1px;
       background:#e5e5e5;
   }
   .login-separator::before{left:0;}
   .login-separator::after{right:0;}
   
   /* 链接样式 */
   .extra-link a{
       color:var(--theme-color);
       text-decoration:none;
       font-size:14px;
       transition:opacity .2s;
   }
   .extra-link a:hover{opacity:.8;}
   </style>

这段代码放在handsome主题目录：handsome/component/headnav.php文件的合适位置。

以本网站为例，以上代码放在了下方代码的后面：

<button style="width: 100%" type="submit"  class="user_op_submit btn-rounded box-shadow-wrap-lg btn-gd-primary padder-lg">
       <span><?php _me("登录") ?></span>
       <span class="text-active"><?php _me("登录中") ?>...</span>
       <i class="animate-spin  fontello fontello-spinner hide"></i>
</button>

二、对两个插件分开美化（各取所需）

1️⃣ 社交登录区块（TypechoOAuthLogin）

<!-- ① 社交登录 -->
<div class="tc-social-wrapper">
    <?php TypechoOAuthLogin_Plugin::show(); ?>
</div>

<!-- ① 对应极简美化 -->
<style>
.tc-social-wrapper{
    margin:16px 0;
    padding:12px 24px;
    background:#fff;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
    text-align:center;          /* 让内部按钮水平居中 */
}
/* 如果 TeConnect 按钮自带 margin，下面这句可防错位 */
.tc-social-wrapper *{margin:4px;}
</style>

2️⃣ 忘记密码区块（Passport）

<!-- ② 忘记密码 -->
<div class="tc-passport-wrapper">
    <?php
    $activates = array_keys(Typecho_Plugin::export()['activated']);
    if (in_array('Passport', $activates)) {
        echo '<a href="'
           . Typecho_Common::url('passport/forgot', $options->index)
           . '" class="tc-forgot-link">忘记密码？</a>';
    }
    ?>
</div>

<!-- ② 对应极简美化 -->
<style>
.tc-passport-wrapper{
    margin:16px 0;
    padding:12px 24px;
    background:#fff;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
    text-align:center;
}
.tc-forgot-link{
    color:#409eff;              /* 主题色，可随意改 */
    font-size:14px;
    text-decoration:none;
    transition:opacity .2s;
}
.tc-forgot-link:hover{opacity:.8;}
</style>

“忘记密码”的按钮样式可以和handsome的“登录”按钮样式相同，详情查看《handsome主题添加密码找回》文末

3️⃣ 可选分隔线（需要分段视觉效果再放）

<!-- ③ 分隔线（可选） -->
<div class="tc-sep">
    <span>或</span>
</div>
<style>
.tc-sep{
    position:relative;
    text-align:center;
    margin:12px 0;
    font-size:13px;
    color:#999;
}
.tc-sep::before,
.tc-sep::after{
    content:'';
    position:absolute;
    top:50%;
    width:calc(50% - 24px);
    height:1px;
    background:#e5e5e5;
}
.tc-sep::before{left:0;}
.tc-sep::after{right:0;}
</style>

怎么用？

1. 把 1️⃣ 和 2️⃣ 分别放到你想出现的位置；
2. 如果两段之间想留“或”分隔，再把 3️⃣ 插在中间即可；
3. 颜色、圆角、阴影全在 <style> 里，自行微调。