Home > Article > PHP Framework > Use ThinkPHP6 to implement a beautiful 404 page

Use ThinkPHP6 to implement a beautiful 404 page

WBOYOriginal: 2023-06-20 11:06:381958browse

With the increasing development of the Internet, many websites or applications have gradually become more complex. When users use it, they often encounter error pages, the most common of which is the 404 page. The 404 page means that the page being accessed does not exist and is a common error page. For websites or applications, a beautiful 404 page can greatly improve the user experience. In this article, we will introduce how to use ThinkPHP6 to quickly implement a beautiful 404 page.

Create route

First, we need to create an error.php file in the route folder, define a route in it, and point the error page to our new Error index method in the controller. The code is as follows:

<?php
use thinkacadeRoute;

Route::rule('/404', 'error/index')->name('404');

It should be noted that here we name the route 404 to facilitate calling later.

Create controllers and views

Create a new Error.php file in the controller folder, the code is as follows:

<?php

namespace appindexcontroller;

use thinkController;

class Error extends Controller
{
    public function index()
    {
        return $this->fetch('error/404');
    }
}

Here we inherit the Controller class , and return the newly created 404 view in the index method.

Create a new error folder in the view folder and create the 404.html file in it. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404 Not Found</title>
    <style>
        body {
            background-color: #eee;
            text-align: center;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .container {
            margin-top: 10%;
        }
        h1 {
            font-size: 8em;
            color: #ddd;
            margin-bottom: 0;
        }
        p {
            font-size: 3em;
            color: #777;
            margin-top: 0;
        }
        a {
            text-decoration: none;
            color: #000;
            border: 1px solid #000;
            padding: 10px 20px;
            margin-top: 30px;
            display: inline-block;
        }
        a:hover {
            border-color: #777;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <p>Page not found</p>
        <a href="<?php echo url('/') ?>">Go back home</a>
    </div>
</body>
</html>

Here we use a simple and beautiful design to display the theme of the 404 page and buttons.

Test

We can access a non-existent route at will, for example, visit http://yourdomain.com/abc, and you can see our newly created one. Beautiful 404 page.

Customize the 404 page

If you want to add more content or adjust the style of the 404 page, you only need to modify the view file. We can customize the 404 page according to actual needs, such as adding search functions, contact information, etc. At the same time, if you are worried about browser caching affecting the display effect, you can solve it by introducing CSS and JS files into the view page.

Summary

In this article, we introduced how to use ThinkPHP6 to implement a beautiful 404 page. By creating routes, controllers, and views, we can easily build a 404 page that meets our needs. In actual development, the 404 page is an important user experience factor, and we should pay attention to its design and beautification.

The above is the detailed content of Use ThinkPHP6 to implement a beautiful 404 page. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Using MVC pattern in ThinkPHP6Next article：Using MVC pattern in ThinkPHP6

See more

Use ThinkPHP6 to implement a beautiful 404 page

Related articles