The website operation is like a marathon without an end, even if we meticulously maintain it, there will be moments when the site needs a 'rest', whether it is planned system upgrades or sudden technical maintenance.In these critical moments, how to convey information to users, ensuring that they can still feel professional and considerate even when the website is 'closed', is particularly important.As an experienced user and operator of AnQiCMS, I know well its powerful and flexible customization capabilities in this aspect.

Today, let's delve into how to cleverly customize the prompt information for project shutdown or maintenance in AnQiCMS, turning the potential user loss crisis into an opportunity for brand image enhancement.

Why is it so important to customize the maintenance page?

A well-designed maintenance page is far more than just telling users that the website is under maintenance. It carries multiple missions:

  1. Maintain user trust and experience:Imagine that the user eagerly visits your website, only to see a blank page or a stiff error message, which undoubtedly causes negative emotions.An effective maintenance page with a brand logo, clear instructions, and a friendly tone can effectively soothe users, reduce their frustration, and make them feel respected.
  2. Maintain SEO achievements:For search engine crawlers, the continuous availability of a website is an important indicator of website quality.If the website shows an error page for a long time (such as 404 or 500), it may affect the crawling and ranking of search engines.An auto maintenance page usually accompanies the HTTP 503 status code (service unavailable) to inform search engines that this is only a temporary maintenance, to avoid long-term damage to the website ranking.AnQiCMS provides a friendly prompt page on the frontend, which, combined with the backend's shutdown settings, can better deal with this situation.
  3. Strengthen brand image:

The thoughtful design of AnQiCMS: offline function and error page template

AnQiCMS deeply understands the art of website operation and provides us with very user-friendly solutions.It unifies the shutdown or maintenance status of the website into the "shutdown" feature and carries these prompt information through preset template files.

In the AnQiCMS template system, you will find several special file paths that are specifically used to handle different types of errors and special states:

  • errors/404.html：When the user accesses a non-existent page, the 'Page Not Found' error is displayed.
  • errors/500.html：The page displayed when an internal error occurs on the server.
  • errors/close.html:This is the main character of today!When the website is in maintenance mode, AnQiCMS will load this template file to display maintenance information to the user.

Through customization of these template files, we can easily create error prompt pages that match the brand tone and clear information.

Practical Guide: Customize your shutdown maintenance prompt information

Now, let's learn step by step how to customize these pages.

Step 1: Enable the site closure feature and configure the prompt information

To start the website's maintenance mode and configure personalized prompt information, we first need to go to the AnQiCMS backend management interface.

  1. Log in to the backend:Login to the AnQiCMS admin panel using your administrator account.

  2. Navigate to Global Settings:Find 'Admin Settings' in the left menu bar and click 'Global Settings.'

  3. Set the website status:In the global settings page, you will see an option named "Website Status". Change it from "Normal Operation" to "Closed Site Status".

  4. Enter the closed site prompt content:Immediately below the "Website StatusThis is where you write the maintenance notice.You can enter concise and clear text, such as: 'Dear user, AnQiCMS official website is undergoing system upgrade and is expected to resume normal operation at X o'clock on Xth day of X month.'}]Thank you for your patience!You can also add some contact information or social media links so that users can get the latest updates.

    Here is any content you enter, it will be the core prompt information for the page you maintain. Remember to ensure a friendly tone and accurate information when writing.

第二步：创建专属的维护页面（errors/close.html)

现在，我们已经配置了闭站信息，接下来就需要将这些信息呈现在一个美观、专业的页面上。AnQiCMS会默认寻找您当前使用模板主题下的Englisherrors/close.htmlfile.

  1. 定位template file:

    • Use FTP tools or the file manager in Baota panel to enter your AnQiCMS installation directory.
    • Find/template/{您的模板文件夹名称}/errors/The path.
    • If there is no directory under this directoryclose.htmlFile, you can create it manually. If it exists, edit it directly.
    • Usually, you can refer toerrors/404.htmlorerrors/500.htmlto createclose.htmlto maintain consistency in style.

  2. Editerrors/close.htmlfile:

    • Openclose.htmlFile is being edited. This is a standard HTML file, you can use familiar HTML, CSS, and JavaScript to design page layout and style.

    • 核心内容调用：English最关键的一步是显示您在后台“全局设置”中填写的“闭站提示”内容。AnQiCMS为此提供了一个系统标签：English{% system with name="SiteCloseTips" %}You can insert this tag at a suitable position in the HTML structure, for example:

      `html <!DOCTYPE html>

      <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站维护中 - {% system with name="SiteName" %}</title>
<style>
    body { font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Microsoft YaHei', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f8f8f8; color: #333; margin: 0; }
    .container { text-align: center; background: #fff; padding: 40px 60px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 600px; }
    .logo { margin-bottom: 25px; }
    .logo img { max-width: 150px; height: auto; }
    h1 { font-size: 2.2em; color: #0056b3; margin-bottom: 20px; }
    p { font-size: 1.1em; line-height: 1.8; margin-bottom: 25px; }
    .contact-info { font-size: 0.9em; color: #666; }
    .contact-info a { color: #0056b3; text-decoration: none; }
</style>


      <div class="container">
    <div class="logo">
        <img src="{% system with name="Site