美文网首页
网站自定义403和404等页面笔记！

网站自定义403和404等页面笔记！

作者: DragonersLi | 来源:发表于2021-07-15 22:38 被阅读0次

自带的403和404页面太丑了，网上找了模板改下，美化一下页面！因为后台设置了只允许特定IP登录，所以403页面的nginx配置如下：

server
{
    listen 80;
    listen 443 ssl http2;
    server_name xxx.xxx.com;
    index index.php index.html index.htm default.php default.htm default.html; 
    root /www/wwwroot/xxx.xxx.com/public;
    
    
      allow 47.xxx.xxx.177; #允许服务器跳板ip登录
      deny all; #拒绝其它IP访问

      error_page 403 /403.html; #此种配置直接访问域名显示403内容
   # error_page 403 https://$host/403.html; #此种配置会在网址后跟上403文件路径
      location /403.html {
        allow   all; #因为上面deny all,如果没权限就走不到这里，所以403页面设置允许所有IP访问
      }  
   
    
    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #HTTP_TO_HTTPS_START
    if ($server_port !~ 443){
        rewrite ^(/.*)$ https://$host$1 permanent;
    }
    #HTTP_TO_HTTPS_END
    ssl_certificate    /www/server/panel/vhost/cert/xxx.xxx.com/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/xxx.xxx.com/privkey.pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;

    #SSL-END
    
    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
     
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #PHP-INFO-START  PHP引用配置，可以注释或修改
    include enable-php-74.conf;
    #PHP-INFO-END
    
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/xxx.xxx.com.conf;
    #REWRITE-END
        
     

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }
    
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null; 
    }
    access_log  /www/wwwlogs/xxx.xxx.com.log;
    error_log  /www/wwwlogs/xxx.xxx.com.error.log;
}

403.html页面

 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>403禁止页面</title>
 
 
<style>
@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");
 
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    color: inherit;
}
 
body {
    background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
    height: 100vh;
}
 
h1 {
    font-size: 45vw;
    text-align: center;
    position: fixed;
    width: 100vw;
    z-index: 1;
    color: #ffffff26;
    text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-family: "Montserrat", monospace;
}
 
div {
    background: rgba(0, 0, 0, 0);
    width: 70vw;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin: 0 auto;
    padding: 30px 30px 10px;
    box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
    z-index: 3;
}
 
P {
    font-family: "Share Tech Mono", monospace;
    color: #f5f5f5;
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.2;
}
 
span {
    color: #f0c674;
}
 
i {
    color: #8abeb7;
}
 
div a {
    text-decoration: none;
}
 
b {
    color: #81a2be;
}
 
a.avatar {
    position: fixed;
    bottom: 15px;
    right: -100px;
    -webkit-animation: slide 0.5s 4.5s forwards;
            animation: slide 0.5s 4.5s forwards;
    display: block;
    z-index: 4
}
 
a.avatar img {
    border-radius: 100%;
    width: 44px;
    border: 2px solid white;
}
 
@-webkit-keyframes slide {
    from {
        right: -100px;
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        opacity: 0;
    }
    to {
        right: 15px;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        opacity: 1;
    }
}
 
@keyframes slide {
    from {
        right: -100px;
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        opacity: 0;
    }
    to {
        right: 15px;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        opacity: 1;
    }
}
</style>
</head>
<body>
<h1>403</h1>
<div><p>> <span>ERROR CODE</span>: "<i>HTTP 403 Forbidden</i>"</p>
<p>> <span>ERROR DESCRIPTION</span>: "<i>您没有在此服务器上访问此页面的权限！</i>"</p>
<p>> <span>ERROR POSSIBLY CAUSED BY</span>: [<b>
我们已经记录了你的IP，不要搞事情哦！</b>...]</p>
<p>> <span>SOME PAGES ON THIS SERVER THAT YOU DO HAVE PERMISSION TO ACCESS</span>: [如果您是内部人员，请联系技术获取访问权限！]</p><p>> <span>HAVE A NICE DAY SIR DragonersLi :-)</span>祝您开心每一天！！</p>
</div>
 
 
<script>
var str = document.getElementsByTagName('div')[0].innerHTML.toString();
var i = 0;
document.getElementsByTagName('div')[0].innerHTML = "";
 
setTimeout(function() {
    var se = setInterval(function() {
        i++;
        document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
        if (i == str.length) {
            clearInterval(se);
            document.getElementsByTagName('div')[0].innerHTML = str;
        }
    }, 10);
},0);
</script>
 
</body>
</html>
image.png

404.html页面


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>404未找到页面</title>
 
 
<style>
@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");
 
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    color: inherit;
}
 
body {
    background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
    height: 100vh;
}
 
h1 {
    font-size: 45vw;
    text-align: center;
    position: fixed;
    width: 100vw;
    z-index: 1;
    color: #ffffff26;
    text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-family: "Montserrat", monospace;
}
 
div {
    background: rgba(0, 0, 0, 0);
    width: 70vw;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin: 0 auto;
    padding: 30px 30px 10px;
    box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
    z-index: 3;
}
 
P {
    font-family: "Share Tech Mono", monospace;
    color: #f5f5f5;
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.2;
}
 
span {
    color: #f0c674;
}
 
i {
    color: #8abeb7;
}
 
div a {
    text-decoration: none;
}
 
b {
    color: #81a2be;
}
 
a.avatar {
    position: fixed;
    bottom: 15px;
    right: -100px;
    -webkit-animation: slide 0.5s 4.5s forwards;
            animation: slide 0.5s 4.5s forwards;
    display: block;
    z-index: 4
}
 
a.avatar img {
    border-radius: 100%;
    width: 44px;
    border: 2px solid white;
}
 
@-webkit-keyframes slide {
    from {
        right: -100px;
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        opacity: 0;
    }
    to {
        right: 15px;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        opacity: 1;
    }
}
 
@keyframes slide {
    from {
        right: -100px;
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        opacity: 0;
    }
    to {
        right: 15px;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        opacity: 1;
    }
}
</style>
</head>
<body>
<h1>404</h1>
<div><p>> <span>ERROR CODE</span>: "<i>HTTP 404 Not Found</i>"</p>
<p>> <span>ERROR DESCRIPTION</span>: "<i>404，您请求的文件不存在!请确认文件是否存在或者已经被删除！</i>"</p>
<p>> <span>HAVE A NICE DAY SIR DragonersLi :-)</span>祝您开心每一天！！</p>
</div>
 
 
<script>
var str = document.getElementsByTagName('div')[0].innerHTML.toString();
var i = 0;
document.getElementsByTagName('div')[0].innerHTML = "";
 
setTimeout(function() {
    var se = setInterval(function() {
        i++;
        document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
        if (i == str.length) {
            clearInterval(se);
            document.getElementsByTagName('div')[0].innerHTML = str;
        }
    }, 10);
},0);
</script>
 
</body>
</html>
image.png

相关文章

网友评论

      本文标题：网站自定义403和404等页面笔记！

      本文链接：https://www.haomeiwen.com/subject/mwqarxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|网站自定义403和404等页面笔记！|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！