众所周知 typecho 是一款由 php开发超轻量级 开源 blog博客 程序,以速度快,响应短,容易开发等优点广为好评,今天我们要讲的是基于 typecho 而驱动的 joe主题 模板。
  joe主题 是目前来说更新相对比较频繁且操作及配置相对友好的一款 typecho主题 模板,老马也曾使用过,在简单的使用过程中发现有一个对seo和用户非常不好的地方那就是今天我们要优化的主角 404页面 404.php

我们可以先看一下原始的joe主题404提示页面

kt04hcfq.png
 我们在地址栏后见面输入 lmcc.top 然后回车跳转出404页面,可以看到这个 404页面 很简单对于用户来讲就是个 404 找不到页面的图片,除此之外给用户提供不了任何信息,对于引导用户来说也没有任何帮助,包括对我们自己的博客非常不友好。

然后我们看404页面源码

 找到 typecho/usr 目录高目录是存放一夜我们自己安装插件和主题的地方
kt04w40i.png
usr 目录下找到 themes 存放主题目录 themes 里面主要存放一些我们自己开发或者下载其他第三方的主题程序
kt04wmcg.png
themes 里面找到 joe主题 我这里的 joe主题 目录 名称 是自己重命名的可以根据自己安装目录自行查找
kt04x55t.png
 找到 joe主题 主题根目录下 404.php
kt04xk3w.png

404.php

kt05ditb.png
大量无效且不友好的 phphtml 混合代码,这些代码不但处理起来慢影响速度并且没有任何实际用处对 seo 来说非常非常很不友好同样是让用户看到404图片不如直接放一张图片来的快...

下面我们开始针对404页面进行优化

首先我们先清空 404.php 内容
然后从 index.php 取出我们的博客头部,底部样式及代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <?php $this->need('public/include.php'); ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/wowjs@1.1.3/dist/wow.min.js"></script>
    <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.index.min.css'); ?>">
    <script src="<?php $this->options->themeUrl('assets/js/joe.index.min.js'); ?>"></script>
</head>

<body>
<div id="Joe">
    <?php $this->need('public/header.php'); ?>
    <div class="joe_container">
        <div class="joe_main">
            <div class="joe_index">
               
            </div>
        </div>
        <?php $this->need('public/aside.php'); ?>
    </div>
    <?php $this->need('public/footer.php'); ?>
</div>
其次我们取出文章列表样式代码稍作调整
  <ul class="list">
    <li class="joe_list__item wow single">
      <div class="line"></div>
      <div class="thumbnail">
        <img width="100%" height="100%" class=" ls-is-cached lazyloaded" src="https://cdn.lmcc.top/usr/uploads/2021/08/460204466.png"  alt="404 - 找不到当前页面,看看下面的吧">
      </div>
    </li>
  </ul>

随便找一张404的图片插入img标签

设置返回状态
<?php $this->response->setStatus(200); ?>

最后我们可以看到优化后的页面

kt059ycs.png
相比较于前者可谓之非常优化不但利于引导用户行为,也利于seo爬取

404.php
<?php $this->response->setStatus(200); ?>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <?php $this->need('public/include.php'); ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/wowjs@1.1.3/dist/wow.min.js"></script>
    <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.index.min.css'); ?>">
    <script src="<?php $this->options->themeUrl('assets/js/joe.index.min.js'); ?>"></script>
</head>

<body>
<div id="Joe">
    <?php $this->need('public/header.php'); ?>
    <div class="joe_container">
        <div class="joe_main">
            <div class="joe_index">
                <ul class="list">
                    <li class="joe_list__item wow single">
                        <div class="line"></div>
                        <div class="thumbnail">
                            <img width="100%" height="100%" class=" ls-is-cached lazyloaded" src="https://cdn.lmcc.top/usr/uploads/2021/08/460204466.png"  alt="404 - 找不到当前页面,看看下面的吧">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <?php $this->need('public/aside.php'); ?>
    </div>
    <?php $this->need('public/footer.php'); ?>
</div>

当然我们也可以在404下面调出随机文章列表加强404页面的友好度这些我们可以自行操作添加自己喜欢的信息

好的关于joe主題模板优化404页面的操作已经完成了如果还有什么问题请联系博主反馈吧,拜拜!