📌  相关文章
📜  AITpro 维护模式 CSS (1)

📅  最后修改于: 2023-12-03 14:39:03.680000             🧑  作者: Mango

AITpro维护模式CSS

AITpro是一种为网站提供维护模式的CSS库。在进行网站升级或维护时使用维护模式可以使用户了解到网站正在维护并对网站进行更新，从而避免因为网站未经更新而出现的各种错误。

特性
  1. 响应式设计，适配各种移动设备和屏幕尺寸。
  2. 显示网站名称和标志，增加品牌知名度。
  3. 可以自定义维护模式页面的标题和文本内容，增加信息传递效果。
  4. 展示计时器，提示用户网站需要维护的时间，更好的引导用户等待。
如何使用
步骤一：下载并引入CSS
<link rel="stylesheet" href="/path/to/aftpm-styles.css">
步骤二：创建维护模式页面

创建一个维护模式页面，将其保存在网站根目录下，并在其中添加以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AITpro维护模式CSS</title>
  <link rel="stylesheet" href="/path/to/aftpm-styles.css">
</head>
<body>
  <div class="aftpm-wrapper">
    <h1 class="aftpm-logo">网站名称</h1>
    <p class="aftpm-text">正在维护中，给您带来的不便敬请谅解！</p>
    <div class="aftpm-timer" data-endtime="2022-12-31 23:59:59">距离维护结束还有：<span id="aftpm-countdown"></span></div>
  </div>
</body>
</html>
步骤三：启用维护模式

当需要启用维护模式时，可以通过以下三种方式之一来实现：

方式一：通过插件

在 CMS 或者其他的相关软件中添加支持 AITpro维护模式 CSS 的插件，然后按照插件的使用说明进行设置。

方式二：添加代码到functions.php或自定义插件中

<?php
/*******************************/
/**  AITpro Maintenance Mode **/
/*******************************/
require_once('/path/to/aftpm-maintenance.php');
?>

方式三：通过.htaccess文件设置

在网站根目录下添加以下代码到 .htaccess 文件：

# BEGIN AITpro Maintenance Mode
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_URI} !/maintenance.html$ [NC]
RewriteCond %{REMOTE_ADDR} !^x\.x\.x\.x
RewriteRule $ /maintenance.html [R=302,L]
</IfModule>
# END AITpro Maintenance Mode

以上是设置维护模式的过程，使用后网站可以非常好的遮挡维护期间的错误，同时还可以传递相关的信息给用户，提高用户体验。