想必大家的博客或者网站，都会有相对应的404页面，不过有时候那些模板往往跟不上审美就想换掉🤷♂️，我用的Joe主题404页面亦是如此，虽然样式很好看但是没有实际用途，所以说毫无意义。
我打开源文件看到了一串代码🤦♂️不是说无用简直就是无用，为了展现一张图片搞那么多代码太浪费咯！
今天 UP主 就为大家基于Joe主题魔改一款简洁大方的404页面。（网上虽然有很多实用的404页面源码，大家都是直接替换成 404.php 文件并不适配Joe主题）
效果展示
404页面创建
首先我们创建一个单独的页面来作为404页面，从 \usr\themes\Joe 主题根目录复制出一份 page.php 文件，把文件中的以下代码删掉（注意删除的内容，包括文章模块和评论模块这里不需要用到）
删除后的位置，可添加你需要的404页面内容，这里不再赘述因为每个人的想法不一样，不懂的可参考一下，下面的全量代码。
404页面全量代码
为了演示， UP主 把自己魔改的404页面全量代码发了出来，大家自行参考。（我在网上随便找的代码，有点乱懒得整理🤷♂️）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<?php $this->need('public/include.php'); ?>
<?php if ($this->options->JPrismTheme) : ?>
<link href="<?php $this->options->JPrismTheme() ?>" rel="stylesheet">
<?php else : ?>
<link href="<?php _getAssets('assets/lib/prism/prism.min.css'); ?>" rel="stylesheet">
<?php endif; ?>
<script src="<?php _getAssets('assets/lib/clipboard@2.0.11/clipboard.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/prism/prism.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/js/joe.post_page.min.js'); ?>"></script>
<style>
body{
margin:0;padding:0;
font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif";
}
a, button.submit {
color:#6E7173;
text-decoration:none;
-webkit-transition:all .1s ease-in;
-moz-transition:all .1s ease-in;
-o-transition:all .1s ease-in;
transition:all .1s ease-in;
}
a:hover, a:active {
color:#6E7173;
}
.body404{
position: absolute;
height: 100%;
width: 100%;
background:#fff;
background-size: auto 100%;
text-shadow:1px 1px 0 #fff;
}
.body-about .body404{
background:#fff;
}
.site-name404 {
margin: 0 auto;
text-align: center;
letter-spacing: 2px;
font: normal 150px/1 “Helvetica Neue”, Helvetica, Arial;
color:#444;
}
.site-name404 h1{
margin: 0 0 10px;
font-size:50px;
line-height:1.2;
}
.title404 span{
font-size: 15px;
width: 2px;
}
.site-name404 i {
font-style: normal;
}
.title404 p{
font-size: 20px;
line-height:1.5;
margin:0;
color:#444;
}
.info404{
position: absolute;
top: 30%;
text-align: center;
width: 100%;
margin-top: -160px;
}
.body-about .info404{
margin-top: -180px;
}
#footer404{
margin-top:30px;
font-size:10px;
}
.index404 {
margin-top: 24px;
display: inline-block;
white-space: nowrap;
cursor: pointer;
background: #444;
letter-spacing: 1px;
font-size: 14px;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
text-shadow: none;
border: 1px solid #ccc;
line-height: 36px;
text-align: center;
height: 36px;
padding: 0 25px;
border-radius: 16px;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
background-color: #fff;
color: #999;
}
.index404:hover{
color: #F77B83;
border-color: #F77B83;
outline-style: none;
}
.icon-about{
padding: 10px 0 25px;
}
.icon-about a{
font-size: 20px;
margin: 5px;
color: #fff;
background-color: #000;
border-radius: 100%;
padding: 6px;
}
</style>
</head>
<body>
<div id="Joe">
<?php $this->need('public/header.php'); ?>
<div class="joe_container">
<div class="joe_main">
<div class="body404">
<div class="info404">
<header id="header404" class="clearfix">
<div class="site-name404"><i>404</i>
</div>
</header>
<section>
<div class="title404">
<p>哎呀！找 不 到 页 面 了 ！</p>
<br>
<div class="widget widget_ui_textads"><img src="https://www.yuanxiapi.cn/api/img/" width="50%" style="border-radius: 20px;"></div>
</div><a href="/" class="index404">返回首页</a> <a href="javascript:location.reload();"class="index404">点击刷新</a>
<br>
</section>
</div>
</div>
</div>
<?php $this->need('public/aside.php'); ?>
</div>
<?php $this->need('public/footer.php'); ?>
</div>
</body>
</html>
评论 (0)