今天给handsome主题的登陆页面添加一个“忘记密码”用于密码找回。因为正常用户是不会找到typecho的默认登录页面（有密码找回）。所以在现用主题上添加这个功能是很有必要的。

安装插件

• 本次需要修改需要密码找回插件：
  TypechoPassport-适用于typecho的密码找回插件

  插件信息1、插件前身：https://github.com/mhcyong/Passport；2、主要更新了一下P...
• 上传到到plugins文件夹，并在插件管理页启用插件

定位登录页面的位置：

打开/usr/themes/handsome/component/headnav.php 找到

<div class="form-group">
    <label for="navbar-login-user"><?php _me("用户名") ?></label>
    <input type="text" name="name" id="navbar-login-user" class="form-control" placeholder="<?php _me("用户名或电子邮箱") ?>"></div>
<div class="form-group">
    <label for="navbar-login-password"><?php _me("密码") ?></label>
    <input autocomplete type="password" name="password" id="navbar-login-password"
           class="form-control" placeholder="<?php _me("密码") ?>"></div>

在其后面添加：

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

刷新页面之后，登陆页面就会出现“忘记密码”选项了。

拓展

美化：

1.handsome同款登录按键背景框

<button style="width: 100%; margin-top: 15px;" type="button" class="user_op_submit btn-rounded box-shadow-wrap-lg btn-gd-primary padder-lg"
<?php
$activates = array_keys(Typecho_Plugin::export()['activated']);
if (in_array('TypechoPassport', $activates)) {
    $url = Typecho_Common::url('passport/forgot', $options->index);
    echo "onclick=\"window.location.href='$url'\"";
}
?>>
忘记密码
</button>

2.简单白色背景框

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