Typecho登录界面轻量美化

Author：小旭
发布时间：September 4, 2021
3383 views
No comments
790 words
Categories：生活笔记

[转载丛林小二][1]

> 千篇一律的登录界面难免有点视觉疲劳，简单修改一下Typecho的后台登录界面，开启登录博客愉悦的一刻。

修改地址:**admin/login.php**

由于登录界面不需要额外的js代码，删除了文件中的下列代码：

```php
<?php 
include 'common-js.php';
?>
```

**增加html**

```html

<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
<canvas id="c" width="300" height="150"></canvas> 
```

**增加css**

```css
.typecho-login-wrap { position: fixed; }
.typecho-login {display: block;padding: 10px 20px;margin-top: 20vh;border-radius: 15px;-moz-box-shadow: 0 0 10px #ffffff;box-shadow: 0 0 15px 0px #868686;background: rgb(255 255 255 / 60%);}
.i-logo{display: unset;background: unset;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);opacity: 0.55;}
input{outline: 0;}
input:focus {box-shadow: 0 0 0 0.2rem rgb(167 191 232 / 25%);}
body {display: flex;align-items: center;justify-content: center;}
```

**修改如下（可直接复制替换你的login.php）**

```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';
?>

<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
<canvas id="c" width="300" height="150"></canvas> 
<div class="typecho-login-wrap">
    <div class="typecho-login">
        <h1><a href="http://typecho.org/" class="i-logo">Typecho</a></h1>
        <form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form">
            <p>
                <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 />
            </p>
            <p>
                <label for="password" class="sr-only"><?php _e('密码'); ?></label>
                <input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" />
            </p>
            <p class="submit">
                <button type="submit" class="btn btn-l w-100 primary"><?php _e('登录'); ?></button>
                <input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" />
            </p>
            <p><label for="remember"><input type="checkbox" name="remember" class="checkbox" value="1" id="remember" /> <?php _e('下次自动登录'); ?></label></p>
        </form>
      
        <p class="more-link">
            <a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?></a>
            <?php if($options->allowRegister): ?>
            •
            <a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?></a>
            <?php endif; ?>
        </p>
    </div>
</div>

<style> .typecho-login-wrap { position: fixed; }
.typecho-login {display: block;padding: 10px 20px;margin-top: 20vh;border-radius: 15px;-moz-box-shadow: 0 0 10px #ffffff;box-shadow: 0 0 15px 0px #868686;background: rgb(255 255 255 / 60%);}
.i-logo{display: unset;background: unset;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);opacity: 0.55;}
input{outline: 0;}
input:focus {box-shadow: 0 0 0 0.2rem rgb(167 191 232 / 25%);}
body {display: flex;align-items: center;justify-content: center;}
</style>
<script>
$(document).ready(function () {
    $('#name').focus();
});
</script>
<?php include 'footer.php'; ?>

<script type="text/javascript">      
$(document).ready(function() {var canvas = document.getElementById("c");var ctx = canvas.getContext("2d");var c = $("#c");var w,h;var pi = Math.PI;var all_attribute = {num:100,/*个数*/start_probability:0.1,/*如果数量小于num，有这些几率添加一个新的*/radius_min:1,/*初始半径最小值*/radius_max:2,/* 初始半径最大值*/radius_add_min:.3,/* 半径增加最小值*/radius_add_max:.5,/*半径增加最大值*/opacity_min:0.3,/*初始透明度最小值*/opacity_max:0.5,/*初始透明度最大值*/opacity_prev_min:.003,/* 透明度递减值最小值*/opacity_prev_max:.005,/* 透明度递减值最大值*/light_min:40,/* 颜色亮度最小值*/light_max:70,/* 颜色亮度最大值*/};var style_color = find_random(0,360);var all_element =[];window_resize();function start(){window.requestAnimationFrame(start);style_color+=.1;ctx.fillStyle = 'hsl('+style_color+',100%,97%)';ctx.fillRect(0, 0, w, h);if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){all_element.push(new ready_run);}all_element.map(function(line) {line.to_step();})};function ready_run(){this.to_reset();};ready_run.prototype = {to_reset:function(){var t = this;t.x = find_random(0,w);t.y = find_random(0,h);t.radius = find_random(all_attribute.radius_min,all_attribute.radius_max);t.radius_change = find_random(all_attribute.radius_add_min,all_attribute.radius_add_max);t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);t.opacity_change = find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);t.light = find_random(all_attribute.light_min,all_attribute.light_max);t.color = 'hsl('+style_color+',100%,'+t.light+'%)';},to_step:function(){var t = this;t.opacity -= t.opacity_change;t.radius += t.radius_change;if(t.opacity <= 0){t.to_reset();return false;}ctx.fillStyle = t.color;ctx.globalAlpha = t.opacity;ctx.beginPath();ctx.arc(t.x,t.y,t.radius,0,2*pi,true);ctx.closePath();ctx.fill();ctx.globalAlpha = 1;}};function window_resize(){w = window.innerWidth;h = window.innerHeight;canvas.width = w;canvas.height = h;};$(window).resize(function(){window_resize();});function find_random(num_one,num_two){return Math.random()*(num_two-num_one)+num_one;};(function() {var lastTime = 0;var vendors = ['webkit', 'moz'];for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||window[vendors[xx] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));var id = window.setTimeout(function() {callback(currTime + timeToCall);}, timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function(id) {clearTimeout(id);};}}());start();});
</script>
```

**教程结束……**
[1]: https://www.ttker.com/archives/42.html

End

本文标题：Typecho登录界面轻量美化

本文链接：https://www.sicx.top/mh.html

除非另有说明，本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

声明：转载请注明文章来源。

Last modification：February 2, 2024

❤如果觉得文章不错的话，可以点个赞~或者请小旭喝杯咖啡嘛~ヾ(◍°∇°◍)ﾉﾞ❤

Typecho登录界面轻量美化

小旭 • 2021 年 09 月 04 日

[转载丛林小二][1]

> 千篇一律的登录界面难免有点视觉疲劳，简单修改一下Typecho的后台登录界面，开启登录博客愉悦的一刻。

修改地址:**admin/login.php**

由于登录界面不需要额外的js代码，删除了文件中的下列代码：

```php
<?php 
include 'common-js.php';
?>
```

**增加html**

```html

<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
<canvas id="c" width="300" height="150"></canvas> 
```

**增加css**

**修改如下（可直接复制替换你的login.php）**

**教程结束……**
[1]: https://www.ttker.com/archives/42.html

Typecho登录界面轻量美化

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

关于Hansome主题本站魔改

NSFW-API开源的图片鉴黄API

欢迎使用 Typecho

自建USDT收款方式

Pve+爱快(iKuai)+OpenWrt(旁路由) 双软路由配置教程

Debian安装Docker/Docker Compose

Mc面板搭建

谨记2023年07月28日

给博客添加哔哩哔哩身份及用户等级图标

NSFW-API开源的图片鉴黄API

Typecho登录界面轻量美化

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Typecho登录界面轻量美化

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款