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

Today, let's delve into how to cleverly customize the prompt information during project shutdown or maintenance in AnQiCMS, turning potential user loss crises into opportunities 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, the user eagerly visits your website, only to see a blank page or a rigid error message, which undoubtedly causes negative emotions.A 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 (Search Engine Optimization) results:For search engine spiders, the continuous availability of a website is an important indicator of its quality evaluation.If a website displays an error page for a long time (such as 404 or 500), it may affect the crawling and ranking of search engines.And a correct maintenance page usually goes along with the HTTP 503 status code (service unavailable), informing search engines that this is only a temporary maintenance to avoid long-term damage to the website's ranking.AnQiCMS provides a friendly prompt page on the front end, which, in conjunction with the backend's closed site settings, can better deal with this situation.
  3. Strengthen brand image:Even in abnormal operation conditions, your brand identity should remain consistent.A customized maintenance page is part of the brand extension, ensuring that users can identify your website under any circumstances and convey a professional brand image.

AnQiCMS' thoughtful design: shutdown function and error page template

AnQiCMS deeply understands the art of website operation and provides us with very humanized solutions.It unifies the shutdown or maintenance status of the website into a "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.htmlWhen the user accesses a non-existent page, the 'Page not found' error is displayed.
  • errors/500.htmlThe page displayed when an internal server error occurs.
  • errors/close.html:This is the main character of today!When the website is in closed status, AnQiCMS will load this template file to display maintenance information to users.

By customizing these template files, we can easily create error提示 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 one: enable the offline feature and configure the prompt information.

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

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

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

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

  4. Enter station shutdown prompt content:Immediately below the "Website Status", there is a text box for the "Shutdown Prompt".Here is where you write the maintenance notice. You can enter concise and clear text, such as: 'Dear users, the AnQiCMS official website is undergoing system upgrades and is expected to resume normal operations at X o'clock on X month X day.'Thank you for your patience!

    This content entered here will be the core prompt information for the page you maintain. We will call it in the template later. Remember to write in a friendly tone and ensure accurate information.

Step two: Create a dedicated maintenance page(errors/close.html)

Now, we have configured the shutdown information, and next we need to present this information on a beautiful, professional page. AnQiCMS will default to searching for the theme template you are currently using under.errors/close.htmlfile.

  1. Locate the template file:

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

  2. Editerrors/close.htmlFile:

    • Open.close.htmlEdit the file. This is a standard HTML file, you can use familiar HTML, CSS, and JavaScript to design the page layout and style.

    • Core content call:The most critical step is to display the shutdown prompt content you have filled in the "Global Settings" backend. AnQiCMS provides a system tag for this:{% system with name="SiteCloseTips" %}. You can insert this tag at an appropriate 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