How to display or customize the error pages (such as 404, 500) and shutdown notifications of a website?
In the operation of the website, visitors may encounter lost pages or temporary problems with the server due to various reasons, and even may not be able to access the website when it is under maintenance or upgrading.Faced with these situations, a well-designed error page (such as 404, 500) and a friendly shutdown prompt can not only greatly improve the user experience but also to some extent maintain the professional image of the website and search engine optimization (SEO).AnQi CMS as an efficient content management system, provides a flexible way to display and customize these important pages.
Understanding the importance of error pages and shutdown prompts
Imagine, when a user eagerly visits your website and is suddenly greeted with a cold browser default error page, it undoubtedly confuses and frustrates them, and they may leave right away.A customized error page, like someone guiding you when lost, can effectively soothe the user's emotions and guide them back to other content on the website.
- 404 page (page not found)This usually happens when a user clicks on a broken link, enters an incorrect URL, or your website content is deleted or moved without setting up a 301 redirect.A well-designed 404 page can guide users back to the homepage, try a search, even recommend related content, thereby reducing the bounce rate.
- 500 page (internal server error)This type of error indicates that the server encountered an unexpected problem, usually requiring the intervention of a website administrator.Although the user is helpless in this regard, a friendly 500 page can inform the user that the issue is being addressed, avoid making them think that the website is completely down, and provide contact information.
- Shut down promptWhen your website needs maintenance, upgrade, or migration, temporarily shutting down the website is a common operation.At this time, a clear shutdown notice can timely inform visitors of the situation, explain the expected recovery time, and provide other information (such as social media accounts), and maintain communication with users.
Next, let's see how to customize these key pages in Anqi CMS.
Custom website error page: 404 and 500
The template mechanism of AnQi CMS is very flexible, allowing you to easily create personalized displays for 404 and 500 error pages.
First, you need to find the current template folder. Typically, all template files are stored in/template/the directory, and the template you are using will have its corresponding independent subdirectory, such as/template/default/In your template directory, you will find a subdirectory namederrors/. If this directory does not exist, you can create it manually.
in thiserrors/In the directory, you need to create two files to customize the 404 and 500 pages:
404.htmlIt is used to handle all 'page not found' requests.500.html：Used to handle all "server internal error" requests.
In these HTML files, you can design content as you would for a regular page.You can add the website's logo, navigation menu, search box, and even recommend some popular articles.It is important to provide clear guidance, such as a 'Return to Home' button, or display a search bar to help users find the content they need.The AnQi CMS provides rich template tags that allow you to easily call dynamic information on the website, such as using{% system with name="SiteLogo" %}to display the website logo, or use{% navList navs %}Show the main navigation. This ensures that the error page is consistent with the overall style of your website.
For example, a concise and practical404.htmlThe page may include the following elements:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>404 - 页面未找到 - {% system with name="SiteName" %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入网站的通用CSS样式 -->
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
<header>
<!-- 引入网站顶部导航或其他公共部分 -->
{% include "partial/header.html" %}
</header>
<main class="error-page">
<div class="container">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" class="error-logo">
<h1>很抱歉，您访问的页面不存在</h1>
<p>我们似乎找不到您正在寻找的页面，它可能已被移动、删除或您输入了错误的地址。</p>
<p>您可以尝试：</p>
<ul>
<li><a href="{% system with name="BaseUrl" %}">返回网站首页</a></li>
<li>使用下方的搜索框查找内容：</li>
</ul>
<form action="/search" method="get" class="search-form">
<input type="text" name="q" placeholder="请输入关键词进行搜索...">
<button type="submit">搜索</button>
</form>
<p class="contact-info">如果您认为这是一个错误，请联系我们：{% contact with name="Email" %}</p>
</div>
</main>
<footer>
<!-- 引入网站底部信息 -->
{% include "partial/footer.html" %}
</footer>
</body>
</html>
For500.htmlDue to its nature being more inclined towards server-side issues, you can provide a shorter prompt to inform the user that the website is striving to recover and suggest trying again later.
Configure and display the site closure prompt
When the website needs to be temporarily closed for maintenance, Anqicms also provides you with a convenient site closure setting and custom prompt function.
You need to go to the website backend to enable the shutdown feature and set the prompt. Find and click on it in the menu on the left.“Background Settings”and then selectGlobal function settings.
Here, you will see a name called“Website Status”The option. When you change it from "normal operation" to "shutdown", your website will immediately display the shutdown prompt. Immediately afterwards, you can"Shutdown Prompt"Enter specific information you want to display to visitors, for example, "The website is undergoing maintenance and is expected to be restored after XX hours. We apologize for the inconvenience caused!"}
Of course, AnQi CMS not only allows you to enter simple text prompts in the background, but also supports displaying more brand-characteristic shutdown pages through custom templates. In your template directory.errors/In the folder, create a namedclose.html.
in thisclose.htmlIn the template, you can freely design the layout and style of the shutdown page. And the shutdown prompt content filled in the background "Global Function Settings" can be accessed through{% system with name="SiteCloseTips" %}This template tag is introduced toclose.htmlthe page. In this way, you can quickly update the shutdown information through the background, and ensure that it presents elegantly in the custom design.
Oneclose.htmlAn example might look like this:
`html <!DOCTYPE html>
<meta charset="UTF-8">
<title>网站维护中 - {% system with name="SiteName" %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
<style>
.maintenance-page {
text-align: center;
padding: 100px 20px;
background-color: #f8f8f8;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.maintenance-page h1 {
color: #333;
font-size: 2.5em;
margin-bottom: 20px;
}
.maintenance-page p {
color: #666;
font-size: 1.1em;
line-height: 1.6;
max-width: 600px;
margin-bottom: 15px;
}
.maintenance-logo {
max-width: 150px;
margin-bottom: 30px;
}
</style>
<div class="maintenance-page">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" class="