说明:今天看了很多博主404的页面炒鸡好看,而博主现在使用的Handsome主题也有自带的404页面。但是由于宝塔的原因不能直接使用。接下来教大家如何解决这个问题并优化404页面。

博主之前写过一篇关于Handsome主题修改教程,大家也可以前往查看。

更改宝塔404

首先,登陆 宝塔面板->进入 宝塔面板->点击 网站-> 选择你的网站(如www.doratree.com),点击 设置-> 点击 配置文件

点击设置会跳出一个功能面板出来,点击 配置文件

在第23行位置找到如下命令:

 error_page 404 /404.html;
 error_page 502 /502.html;

使用 # 注释它们即可:

 #error_page 404 /404.html;
 #error_page 502 /502.html;

保存后及时生效,不行的话可以到宝塔面板点击 应用管理->点击 运行环境->->找到 Nginx->点击 设置->点击 服务->点击 重启 重启一次Nginx。这样便将Bt(宝塔面板)的默认 404 页面和 502 页面修改成了Handsome主题自带的404页面了。

修改个性化404

用宝塔打开handsome/404.php,因为博客是个人博客,不开放他人注册,因此原先404的登陆和注册是鸡肋。对此我进行了修改:
大概在116行找到如下代码:

<div class="list-group bg-info auto m-b-sm m-b-lg">
    <a href="<?php $this->options->rootUrl(); ?>" class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-home m-r-xs"></i>&nbsp;<?php _me("首页") ?>
    </a>
      <?php if (!@in_array('hideLogin',$this->options->featuresetup)): ?>
      <a href="<?php $this->options->rootUrl(); ?>/admin/login.php" class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-sign-in m-r-xs"></i>&nbsp;<?php _me("登录") ?>
    </a>
    <a href="<?php $this->options->rootUrl(); ?>/admin/register.php"  class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-unlock-alt m-r-xs"></i>&nbsp;<?php _me("注册") ?>
    </a>
      <?php endif; ?>
  </div>

对其进行个性化修改,图标可参照主题文档进行更换。比如我将登陆和注册相应地换成了归档和留言板。

  <div class="list-group bg-info auto m-b-sm m-b-lg">
    <a href="<?php $this->options->rootUrl(); ?>" class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-home m-r-xs"></i>&nbsp;<?php _me("首页") ?>
    </a>
      <?php if (!@in_array('hideLogin',$this->options->featuresetup)): ?>
      <a href="<?php $this->options->rootUrl(); ?>/archives.html" class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-sign-in m-r-xs"></i>&nbsp;<?php _me("归档") ?>
    </a>
    <a href="<?php $this->options->rootUrl(); ?>/msg.html"  class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-sign-in m-r-xs"></i>&nbsp;<?php _me("留言") ?>
    </a>
      <?php endif; ?>
  </div>

原来的404下面一行文字用的是博客的副标题,我将其换成了一言。找到134行的以下代码:

<small class="text-muted letterspacing"><?php $this->options->Indexwords(); ?><br>&copy; <?php echo date("Y");?></small>

<?php $this->options->Indexwords(); ?>替换成一言:

<small class="text-muted letterspacing"><script type="text/javascript" src="https://api.lwl12.com/hitokoto/v1?encode=js&charset=utf-8"></script><div id="lwlhitokoto"><script>lwlhitokoto()</script></div>&copy; <?php echo date("Y");?></small>

这样我们就大功告成了,每次进入404页面最下面的文字都会不一样哦!以下是更改后的404页面截图,大家也可以点击https://www.doratree.com/404进行查看。当然,希望大家网站不要弹出404( • ̀ω•́ )✧

Last modification:September 18th, 2019 at 11:49 pm
If you think my article is useful to you, please feel free to appreciate