何叶

美化你的Typecho登录和注册页面
前排提示:请一定安装本篇文章对问题点进行修复,谢绝安装原文章出事在本文章评论区喷,谢谢!修改前请先备份原文件!引入...
扫描右侧二维码阅读全文
03
2019/07

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

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

引入

typecho的轻量虽然带来了一丝丝友好,但是有许多的不方便,有时为了美化一个页面大家往往都翻遍全网tp博客。
后台的登录页面当属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 登录页

最后修改:2019 年 07 月 11 日 11 : 05 PM
如果觉得我的文章对你有用,请随意赞赏

7 条评论

  1. 乾隆 QQ浏览器 6.2 Android 9

    讲解的很好

  2. Dawn 小米 10.8.4 Android 9

    没效果图的嘛,我这种小白脑补不出来界面的。

    1. 何叶 QQ浏览器 6.2 Android 9
      @Dawn

      我博客就是

      1. Dawn 小米 10.8.4 Android 9
        @何叶

        恩我看到了。
        你博客的截图生成没用,图片跨域

        1. 何叶 QQ浏览器 6.2 Android 9
          @Dawn

          我图片放在oss上

          1. Dawn 小米 10.8.4 Android 9
            @何叶

            额我的意思是,你开着这功能没用啊
            为啥不关呢

            1. 何叶 QQ浏览器 6.2 Android 9
              @Dawn

              懒和美观

发表评论