handsome登录页面修改（美化集合篇）

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

[post cid="25" cover="" size=""/]

[post cid="55" cover="" size=""/]

[post cid="131" cover="" size=""/]

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

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

1. 把原本连在一起的 HTML 拆成两段，中间留一个视觉分隔线；
2. 用一段极小的内联 CSS 做“极简美化”（圆角、柔和阴影、悬停动效）；
3. 预留一个 `.custom-color` 变量，想换主题色只改一行即可；
4. 这里“密码找回”按钮在[《TeConnect：typecho第三方登录插件》](https://www.tianlingzi.top/archives/131/)文末有另外提及。

```
   
   <div class="login-block social-login">
       <?php TeConnect_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️⃣ 社交登录区块（TeConnect）

```

<div class="tc-social-wrapper">
    <?php TeConnect_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的“登录”按钮样式相同，详情查看[《TeConnect：typecho第三方登录插件》](https://www.tianlingzi.top/archives/131/)文末

### 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>` 里，自行微调。

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

<div class="inner-content" >
<p class="inser-title">handsome主题在注册页中添加自定义密码</p>
<div class="inster-summary text-muted">
上期，我们成功在typecho的注册页面中实现了自定义密码的功能。但是我们发现，handsome主题并没有起作用，...
</div>
</div>
</a>

</div>

</div>

<div class="inner-content" >
<p class="inser-title">handsome主题添加密码找回</p>
<div class="inster-summary text-muted">
今天给handsome主题的登陆页面添加一个“忘记密码”用于密码找回。因为正常用户是不会找到typecho的默认登...
</div>
</div>
</a>

</div>

</div>

<div class="inner-content" >
<p class="inser-title">TeConnect：typecho第三方登录插件</p>
<div class="inster-summary text-muted">
TeConnecttypecho第三方登录插件，可以让typecho博客系统支持第三方账号登录、注册的插件。前言该...
</div>
</div>
</a>

</div>

</div>

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

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

```
   
   <div class="login-block social-login">
       <?php TeConnect_Plugin::show(); ?>
   </div>

<div class="login-separator">
       <span>或</span>
   </div>

<style>
   /* 主题色变量，想换色只改这里 */
   :root{--theme-color:#409eff;}

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

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

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

### 1️⃣ 社交登录区块（TeConnect）

```

<div class="tc-social-wrapper">
    <?php TeConnect_Plugin::show(); ?>
</div>

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

“忘记密码”的按钮样式可以和handsome的“登录”按钮样式相同，详情查看[《TeConnect：typecho第三方登录插件》](https://www.tianlingzi.top/archives/131/)文末

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

### 怎么用？

最后修改：2025 年 10 月 24 日

如果觉得我的文章对你有用，请随意赞赏

handsome登录页面修改（美化集合篇）

※相关文章推荐※

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

我拥有了自己的域名

TeConnect：typecho第三方登录插件

typecho密码找回插件

Python自动化实现阿里云域名DDNS（支持ipv4和ipv6）

typecho隐藏评论区的游客信息区

handsome主题添加密码找回

Linux添加和删除用户

Grok 4——AI领域的新革命即将开启

Windows 11 竟能"偷"我手机里的 Wi-Fi 密码？真相其实是——跨设备同步

docker部署adminer

handsome登录页面修改（美化集合篇）

※相关文章推荐※

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

handsome登录页面修改（美化集合篇）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款