HTML 本身无法实现伪静态。

HTML 是超文本标记语言，它只负责定义网页的结构和内容（比如标题、段落、图片等），它是一种“前端”技术，运行在用户的浏览器里，而“伪静态”是一个“后端”的概念，它涉及到服务器如何处理 URL 请求，并将动态的 URL 地址伪装成静态的 URL 地址。

实现伪静态的正确说法是：在服务器端配置，使得动态的 URL 能够以静态 URL 的形式访问。

下面我将分步解释，并结合最常用的 Nginx 和 Apache 服务器来举例说明。

什么是伪静态？为什么需要它？

我们先理解三个概念的区别：

• 静态页面：URL 是 .html, .htm, .css 等后缀，服务器直接将文件发送给浏览器。http://example.com/about.html

  • 优点：加载速度快，对搜索引擎友好（SEO）。
  • 缺点固定，每次修改都需要重新上传文件,不适合频繁更新的内容。

• 动态页面：URL 通常包含 和参数，如 ?id=123，服务器根据参数从数据库查询数据，然后动态生成 HTML 页面发送给浏览器。http://example.com/product.php?id=123

  • 优点灵活，易于管理，适合新闻、博客、电商等。
  • 缺点：URL 不美观，对搜索引擎不够友好（虽然现代搜索引擎已能很好处理，但静态 URL 仍是首选）。

• 伪静态：它本质上是动态页面，但通过服务器配置，将一个“看起来像静态”的 URL 重写（Rewrite）成服务器能够识别的动态 URL，将 http://example.com/product/123 重写为 http://example.com/product.php?id=123。

  • 优点：
    1. 用户体验好：URL 更简洁、美观、易于记忆和分享。
    2. SEO 优化：搜索引擎更喜欢描述性的、不含参数的 URL,有助于提高排名。
    3. 隐藏技术细节：对外暴露的是干净的 URL，用户不知道你后台用的是 PHP、Java 还是其他技术。

实现伪静态的核心：URL 重写

实现伪静态的核心技术是 URL 重写，服务器在接收到一个请求时，会检查 URL 是否匹配预设的规则，如果匹配，服务器会“欺骗”浏览器，让它以为访问的是一个静态文件，但实际上服务器内部已经将请求转发给了处理动态内容的程序（如 PHP 文件）。

这个功能通常由服务器的模块来实现：

• Nginx: 使用 rewrite 指令。
• Apache: 使用 mod_rewrite 模块和 RewriteRule 指令。

如何配置实现伪静态（以常见场景为例）

假设我们有一个博客，希望将文章列表页的 URL 从 http://example.com/blog.php?page=2 改成 http://example.com/blog/page/2。

Nginx 服务器配置

Nginx 是目前非常流行的 Web 服务器,配置简洁高效。

1. 开启 rewrite 模块：Nginx 默认就支持 rewrite,通常无需额外开启。

2. 编写 rewrite 规则： 在你的 Nginx 配置文件中（通常是 nginx.conf 或站点配置文件 your-site.conf），找到 server 块,添加如下配置：

   server {
       listen 80;
       server_name example.com;
       # ... 其他配置，如 root, index 等 ...
       # location 块用于匹配 URL 路径
       location /blog/page/ {
           # rewrite 规则
           # 语法: rewrite regex replacement [flag];
           # regex: 匹配的 URL 模式，^/blog/page/(\d+)$
           #         ^ 表示开头，$ 表示结尾，(\d+) 匹配一个或多个数字，并用括号捕获
           # replacement: 重写后的目标 URL，/blog.php?page=$1
           #              $1 表示引用第一个捕获组（即上面 (\d+) 匹配到的数字）
           # last: 表示匹配到此规则后，停止匹配后续的 rewrite 规则，并在当前 location 中继续处理
           rewrite ^/blog/page/(\d+)$ /blog.php?page=$1 last;
       }
       # 将所有 .php 文件的请求交给 PHP-FPM 处理
       location ~ \.php$ {
           fastcgi_pass 127.0.0.1:9000; # 或 unix:/var/run/php/php8.1-fpm.sock;
           fastcgi_index index.php;
           fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
           include fastcgi_params;
       }
   }

3. 应用配置： 修改完配置文件后，需要重新加载 Nginx 配置：

   sudo nginx -s reload

当用户访问 http://example.com/blog/page/2 时，Nginx 会将其内部重写为 http://example.com/blog.php?page=2，然后由 PHP-FPM 执行 blog.php 文件，并将最终结果返回给用户，用户在浏览器地址栏看到的依然是 http://example.com/blog/page/2。

Apache 服务器配置

Apache 是历史悠久的 Web 服务器,功能强大。

1. 开启 mod_rewrite 模块： 在服务器上，你需要确保这个模块已经启用，如果未启用，可以使用以下命令（以 Ubuntu/Debian 为例）：

   sudo a2enmod rewrite

   然后重启 Apache 服务：

   sudo systemctl restart apache2

2. 配置 .htaccess 文件（推荐）： 对于虚拟主机用户，通常没有权限修改主配置文件，最简单的方法是在你的网站根目录下创建或编辑一个名为 .htaccess 的文件（注意文件名前有一个点）。

   在 .htaccess 文件中添加以下内容：

   # 开启 URL 重写引擎
   RewriteEngine On
   # 设置重写的基础目录，防止规则错误
   RewriteBase /
   # RewriteRule 语法: RewriteCond TestString CondPattern [Flags]
   # RewriteRule Pattern Substitution [Flags]
   # RewriteCond: 定义重写规则的条件
   # %{REQUEST_FILENAME} !-f: 如果请求的文件不是一个真实存在的文件
   # %{REQUEST_FILENAME} !-d: 如果请求的目录不是一个真实存在的目录
   # 这两个条件非常重要，可以防止将真实存在的静态文件（如图片、CSS）也进行重写
   # RewriteRule: 定义重写规则
   # ^blog/page/(\d+)$: 匹配 /blog/page/ 后面跟着数字的 URL
   # blog.php?page=$1: 将其重写到 blog.php?page=数字
   # [L]: Last，表示如果此规则匹配，则停止处理后续的 rewrite 规则
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule ^blog/page/(\d+)$ blog.php?page=$1 [L]

3. 确保 Apache 允许 .htaccess 覆盖： 在 Apache 的主配置文件或虚拟主机配置文件中，确保 Directory 块内有 AllowOverride All 或 AllowOverride FileInfo。

   <Directory /var/www/html/your-site-directory>
       Options Indexes FollowSymLinks
       AllowOverride All # 关键配置
       Require all granted
   </Directory>

   修改后重启 Apache。

HTML 和前端代码需要注意什么？

服务器配置好重写规则后，你的 HTML 代码（或 JavaScript 代码）中生成链接时，必须使用伪静态的 URL。

错误示例（直接生成动态 URL）：

<!-- 不要这样写，因为服务器配置的规则是针对 /blog/page/ 的 -->
<a href="/blog.php?page=2">查看第二页</a>

正确示例（使用伪静态 URL）：

<!-- 这样写，服务器才能正确识别并重写 -->
<a href="/blog/page/2">查看第二页</a>

如果你在 JavaScript 中使用 history.pushState 或 history.replaceState 来实现前端路由（例如单页应用 SPA），那么你生成的 URL 也应该是伪静态的格式，然后由前端路由器来解析，再通过 API 请求后端数据。

总结与关键步骤

实现伪静态的完整流程可以总结为：

1. 理解概念：明白伪静态是后端技术，是 URL 重写，不是 HTML 本身的功能。
2. 选择服务器：确定你的网站运行在 Nginx 还是 Apache 服务器上。
3. 编写重写规则：
   • Nginx：在 server 块的 location 中使用 rewrite 指令。
   • Apache：在网站根目录的 .htaccess 文件中使用 RewriteEngine On 和 RewriteRule 指令。
4. 处理动态请求：确保重写后的 URL（如 blog.php?page=2）能被后端程序正确处理。
5. 应用配置：重新加载服务器配置 (nginx -s reload 或 systemctl restart apache2)。
6. 更新前端代码：网站中所有指向该页面的链接，都应使用新的伪静态 URL。
7. SEO 考虑：如果网站内容对 SEO 很重要，配置好伪静态后，记得在网站地图（sitemap）中使用新的静态 URL 格式。