In the operation of a website, visitors may encounter various reasons for not being able to find a page or temporary server issues, or even may not be able to access the website during maintenance and upgrades.A well-designed error page (such as 404, 500) and a friendly shutdown notice can not only greatly enhance user experience but also to some extent maintain the professional image of the website and search engine optimization (SEO).The AnQi CMS is an efficient content management system that provides a flexible way to display and customize these important pages.
Understanding the importance of error pages and shutdown prompts
Imagine the disappointment and confusion a user might feel when they eagerly visit your website only to be greeted by a cold, default browser error page. This could likely lead them to leave.A customized error page, like having someone guide you when lost, can effectively soothe the user's emotions and lead them back to other content on the website.
- 404 Page (Page Not Found)This usually happens when the user clicks on a broken link, enters an incorrect URL, or your website content has been deleted or moved without setting up a 301 redirect.A well-designed 404 page can guide users back to the homepage, try searching, and even recommend related content, thereby reducing the bounce rate.
- 500 Page (Internal Server Error)This error indicates that the server encountered an unexpected problem, usually requiring the intervention of a website administrator.Although the user has no control over this, a friendly 500 page can inform the user that the issue is being addressed, avoiding the misconception 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 moment, a clear shutdown notice can promptly inform visitors of the situation, state the expected restoration time, and provide other information (such as social media accounts), maintaining 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.
Firstly, you need to find the current template folder. Typically, all template files are stored in/template/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 the following two files to customize the 404 and 500 pages:
404.htmlis used to handle all 'page not found' requests.500.htmlUsed to handle all requests for "Internal Server Error".
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 Page' button, or display a search bar to help users find the content they need.{% system with name="SiteLogo" %}To display the website logo, or to use{% navList navs %}Display the main navigation. This ensures that the error page is consistent with the overall style of your website.
For example, a simple and practical one.404.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.html[en] Due to its nature leaning towards server-side issues, you can provide a shorter prompt to inform the user that the website is actively recovering and suggest trying again later.
Configure and display the shutdown tip
When the website needs to be temporarily closed for maintenance, the Anqi CMS also provides a convenient shutdown setting and custom tip feature for you.
To enable the offline site feature and set prompts, you need to go to the website backend. Find and click on it in the menu on the left.“Backend Settings”then select“Global Function Settings”.
Here, you will see a name called“Website Status”The options. When you change it from 'Normal Operation' to 'Closed Station', your website will immediately display a closed station prompt. Subsequently, you can inStation Closure NoticeEnter the specific information you want to display to visitors, for example, 'The website is under upgrade and maintenance, expected to be restored in XX hours, please forgive the inconvenience caused to you!'
Of course, AnQi CMS not only allows you to enter simple text prompts on the backend, but also supports displaying more brand-characteristic closed page through custom templates. Under your template directory, errors/In the folder, create a file namedclose.html[en] of the file.
in thisclose.htmlIn the template, you can freely design the layout and style of the shutdown page. The content you fill in the "Global Function Settings" in the background, "Shutdown Prompt", can be accessed through{% system with name="SiteCloseTips" %}This template tag is introduced toclose.htmlthe page. This way, you can quickly update the shutdown information through the backend and ensure that it is presented elegantly in the custom design.
Anclose.htmlExample 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="