美化你的Typecho登录和注册页面

何叶

发布于 2021-08-24 15:03:33

1.9K0

发布于 2021-08-24 15:03:33

文章被收录于专栏：何叶的专栏何叶的专栏

前排提示：请一定安装本篇文章对问题点进行修复，谢绝安装原文章出事在本文章评论区喷，谢谢！修改前请先备份原文件！

引入

typecho的轻量虽然带来了一丝丝友好，但是有许多的不方便，有时为了美化一个页面大家往往都翻遍全网ty博客。

后台的登录页面当属typecho里面最不好看的页面了，本篇文章就教大家如何修改typecho登录页面。修改前请先备份原文件！

css不是我写的，是原作者写的，我修复了一些问题，并把教程变得友好，而且整合了两个页面，当然你也可以去原文章找单独页面上传，链接在末尾。修改前请先备份原文件！

效果图

点击查看/关闭效果图→

登录页面：

注册页面

备份你的原文件

修改前请先备份原文件！修改前请先备份原文件！修改前请先备份原文件！

下载css文件

这边注意，除整合包外都是原作者的原文件，我们只需要*.css就够了，其他的文件删掉，找不到.css的点进文件夹就能看到了。

下载之后，上传至/admin/css并解压，记得删除压缩包。

修改文件

登录页面文件路径/admin/login.php

登录页面（如果你只要注册请无视）：

<?php
include 'common.php';

if ($user->hasLogin()) {
    $response->redirect($options->adminUrl);
}
$rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name'));
Typecho_Cookie::delete('__typecho_remember_name');

$bodyClass = 'body-100';

include 'header.php';
?>
<head>
  <link href="/admin/css/loginstyle.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

    <div class="main-w3layouts wrapper">
        <div class="main-agileinfo">
            <div class="agileits-top">
                        <form action="<?php $options->loginAction(); ?>" method="post" 
name="login" role="form">
                  <label for="name" class="sr-only"><?php _e('用户名'); ?></label>
                  <input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" 
placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus />
                  <label for="password" class="sr-only"><?php _e('密码'); ?></label>
                  <input type="password" id="password" name="password" class="text-l w-100" 
placeholder=" 
   <?php _e('密码'); ?>" />
                    <div class="wthree-text">
                        <ul>
                            <li>
                                            <label for="remember"><input 
type="checkbox" name="remember" class="checkbox" value="1" id="remember" /> <?php _e('下次自动登录'); ? ></label>
                            </li>
                        </ul>
                        <div class="clear"> </div>
                    </div>
                    <input type="submit" value="登录">
                    <ul>
                                                          <p class="more-link">
            <a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?></a>
            &bull;
            <a href="<?php $options->adminUrl('register.php'); ?>"><?php _e('用户注册'); ?></a>
       </p>
                                              </ul>
                </form>
            </div>
        </div>

</body>
</html>
<?php
include 'common-js.php';
?>
<script>
$(document).ready(function () {
    $('#name').focus();
});
</script>
<?php
include 'footer.php';
?>

注册页面文件路径/admin/register.php

注册页面（只要登录请无视）：

<?php
include 'common.php';

if ($user->hasLogin() || !$options->allowRegister) {
    $response->redirect($options->siteUrl);
}
$rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name'));
$rememberMail = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_mail'));
Typecho_Cookie::delete('__typecho_remember_name');
Typecho_Cookie::delete('__typecho_remember_mail');

$bodyClass = 'body-100';

include 'header.php';
?>
<html lang="zh">
<head>
  <link href="/admin/css/registerstyle.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

    <div class="main-w3layouts wrapper">
        <div class="main-agileinfo">
            <div class="agileits-top">
                        <form action="<?php $options->registerAction(); ?>" method="post" 
name="register" role="form">
                  <label for="name" class="sr-only"><?php _e('用户名'); ?></label>
                  <input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" 
placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus />
                  <label for="mail" class="sr-only"><?php _e('Email'); ?></label>
                  <input type="pw" id="mail" name="mail" class="text-l w-100" placeholder="<?php 
_e('Email'); ?>" />
                    <input type="submit" value="<?php _e('注册'); ?>">
                                                  <ul>
                                                          <p class="more-link">
            <a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?></a>
            &bull;
            <a href="<?php $options->adminUrl('login.php'); ?>"><?php _e('用户登录'); ?></a>
        </p>
                                                  </ul>
                </form>
            </div>
       </div>

</body>
</html>
<?php 
include 'common-js.php';
?>
<script>
$(document).ready(function () {
    $('#name').focus();
});
</script>
<?php
include 'footer.php';
?>

修复原文件问题

炒鸡懒的站长发现有张图片加载不出来，所以需要进行修复，你可以随便到网上照一张文章修改名字为bg.png，然后上传到/admin/img目录下即可。

原文章链接

https://www.isenyu.cn/91.html 注册页

https://www.isenyu.cn/typecho-login-page.html 登录页

版权属于：何叶
本文链接：https://cloud.tencent.com/developer/article/1866993
本站采用 “署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN)” 许可。您可转载本站文章，请以超链接形式标明本文原始出处、作者信息以及版权声明。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019 年 07 月，如有侵权请联系 cloudcommunity@tencent.com 删除

https