今天给handsome主题的登陆页面添加一个“忘记密码”用于密码找回。因为正常用户是不会找到typecho的默认登录页面（有密码找回）。所以在现用主题上添加这个功能是很有必要的。 ## 安装插件 - 本次需要修改需要密码找回插件：[Passport](https://github.com/mhcyong/Passport) - 上传到到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('Passport', $activates)) { echo '<a href="' . Typecho_Common::url('passport/forgot', $options->index) . '">' . '忘记密码' . '</a>'; } ?> ``` 刷新页面之后，登陆页面就会出现“忘记密码”选项了。 ## 拓展 #### 美化： 1.handsome同款登录按键背景框 ``` <button style="width: 100%" type="submit" 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('Passport', $activates)) { echo '<a href="' . Typecho_Common::url('passport/forgot', $options->index) . '">' . '忘记密码' . '</a >'; } ?> </button> ``` 2.简单白色背景框 ``` <!-- ② 忘记密码 --> <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> ``` Loading... 今天给handsome主题的登陆页面添加一个“忘记密码”用于密码找回。因为正常用户是不会找到typecho的默认登录页面（有密码找回）。所以在现用主题上添加这个功能是很有必要的。 ## 安装插件 - 本次需要修改需要密码找回插件：[Passport](https://github.com/mhcyong/Passport) - 上传到到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('Passport', $activates)) { echo '<a href="' . Typecho_Common::url('passport/forgot', $options->index) . '">' . '忘记密码' . '</a>'; } ?> ``` 刷新页面之后，登陆页面就会出现“忘记密码”选项了。 ## 拓展 #### 美化： 1.handsome同款登录按键背景框 ``` <button style="width: 100%" type="submit" 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('Passport', $activates)) { echo '<a href="' . Typecho_Common::url('passport/forgot', $options->index) . '">' . '忘记密码' . '</a >'; } ?> </button> ``` 2.简单白色背景框 ``` <!-- ② 忘记密码 --> <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> ``` 最后修改：2025 年 10 月 24 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏