EdgeOne 环境下的二级页面处理教程

什么是二级页面问题？

当您按照 EdgeOne 教程成功配置了主页后，您可能会发现一个问题：虽然主页 yourdomain.com 可以正常访问，但是当用户访问子页面（如 yourdomain.com/about.html 或 yourdomain.com/blog/）时，可能会遇到 404 错误或其他问题。

这是因为：

EdgeOne 的路由规则需要正确配置来处理不同的URL路径
Nginx 的配置需要能够正确处理子目录和文件的请求
静态资源的引用路径可能需要调整
相对路径和绝对路径的处理需要统一

常见问题

子页面返回 404 错误
CSS/JS 文件在子页面中无法加载
图片在子页面中显示不正常
页面间的链接跳转失效

第一步：规划合理的文件目录结构

首先，我们需要在服务器上建立一个清晰、合理的文件目录结构。

1 推荐的目录结构

目录结构示例

/var/www/html/
├── index.html                 # 主页
├── about.html                 # 关于页面
├── contact.html               # 联系页面
├── assets/                    # 静态资源目录
│   ├── css/
│   │   └── style.css         # 样式文件
│   ├── js/
│   │   └── main.js           # JavaScript文件
│   └── images/
│       └── logo.png          # 图片文件
├── blog/                      # 博客目录
│   ├── index.html            # 博客首页
│   ├── article1.html         # 文章页面
│   └── article2.html
└── tutorials/                 # 教程目录
    ├── index.html            # 教程首页
    ├── edgeone-tutorial.html
    └── subpage-tutorial.html

2 创建目录结构

在服务器上创建这些目录，依次执行以下命令：

进入网站根目录：

cd /var/www/html

创建静态资源目录：

sudo mkdir -p assets/{css,js,images}

创建内容目录：

sudo mkdir -p blog tutorials

设置正确的权限：

sudo chown -R www-data:www-data /var/www/html

sudo chmod -R 755 /var/www/html

第二步：优化 Nginx 配置以支持二级页面

我们需要更新 Nginx 配置，使其能够正确处理各种URL请求。

1 编辑 Nginx 配置文件

sudo nano /etc/nginx/sites-available/yourdomain.com.conf

2 更新配置内容

将配置文件内容替换为以下优化版本：

Nginx 配置 - 支持二级页面

server {
    # 只监听80端口即可
    listen 80;
    listen [::]:80;

    # 您的网站文件根目录
    root /var/www/html;
    index index.html index.htm;

    # 绑定您的域名
    server_name yourdomain.com www.yourdomain.com;

    # 主要的location块 - 处理所有请求
    location / {
        # 首先尝试请求的文件
        # 然后尝试请求的目录
        # 最后尝试目录下的index.html
        # 如果都不存在，返回404
        try_files $uri $uri/ $uri/index.html =404;
    }

    # 静态资源缓存优化
    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }

    # 防止访问隐藏文件
    location ~ /\. {
        deny all;
    }

    # 防止访问备份文件
    location ~ ~$ {
        deny all;
    }
}

3 测试并重载配置

测试配置语法：

sudo nginx -t

如果测试通过，重载配置：

sudo systemctl reload nginx

第三步：正确处理静态资源路径

为了确保CSS、JavaScript和图片文件在所有页面中都能正确加载，我们需要使用正确的路径引用方式。

1 使用绝对路径引用静态资源

在所有HTML文件中，使用以 / 开头的绝对路径来引用静态资源：

HTML - 正确的资源引用方式

<!-- CSS文件 -->
<link rel="stylesheet" href="/assets/css/style.css">

<!-- JavaScript文件 -->
<script src="/assets/js/main.js"></script>

<!-- 图片文件 -->
<img src="/assets/images/logo.png" alt="Logo">

<!-- 页面链接 -->
<a href="/about.html">关于我们</a>
<a href="/blog/">博客</a>
<a href="/tutorials/">教程</a>

避免相对路径

不要使用相对路径如 ../assets/css/style.css 或 assets/css/style.css，因为这在不同层级的页面中会导致路径错误。

2 创建统一的页面模板

为了保持一致性，建议创建一个基础的HTML模板：

HTML - 基础模板示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题 - 特伦斯的个人小站</title>

    <!-- 统一的CSS引用 -->
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
    <!-- 统一的导航栏 -->
    <nav>
        <a href="/">首页</a>
        <a href="/about.html">关于</a>
        <a href="/blog/">博客</a>
        <a href="/tutorials/">教程</a>
    </nav>

    <!-- 页面内容 -->
    <main>
        <!-- 具体页面内容 -->
    </main>

    <!-- 统一的页脚 -->
    <footer>
        <div style="text-align:center; font-size:12px; color:#666; padding: 15px 0;">
            <a href="https://beian.miit.gov.cn/" target="_blank" style="color:#666; text-decoration:none;">
                您的备案号
            </a>
        </div>
    </footer>

    <!-- 统一的JavaScript引用 -->
    <script src="/assets/js/main.js"></script>
</body>
</html>

第四步：EdgeOne 路由规则配置

EdgeOne 默认配置通常已经能够处理大部分二级页面请求，但在某些情况下，您可能需要添加自定义规则。

1 检查 EdgeOne 缓存规则

登录腾讯云 EdgeOne 控制台，进入您的站点管理：

进入 [缓存配置] 页面
确保静态资源（CSS、JS、图片）有适当的缓存规则
HTML文件建议设置较短的缓存时间或不缓存，以便内容更新能及时生效

2 配置页面规则（如需要）

如果您的网站使用了特殊的URL结构，可能需要添加页面规则：

常见页面规则示例

# 博客文章URL重写（如果使用友好URL）
/blog/* → /blog/index.html?page=$1

# API接口代理（如果有后端API）
/api/* → http://your-backend-server.com/api/$1

# 静态资源优化
/assets/* → 设置长期缓存

3 设置错误页面

为了提供更好的用户体验，建议设置自定义的404错误页面：

在网站根目录创建 404.html 文件
在 EdgeOne 控制台的 [错误页面] 设置中配置自定义404页面

第五步：测试和验证

完成配置后，需要全面测试网站的各个页面和功能。

1 创建测试页面

创建一些测试页面来验证配置，依次执行以下命令：

创建关于页面：

sudo nano /var/www/html/about.html

创建博客目录和首页：

sudo mkdir -p /var/www/html/blog

sudo nano /var/www/html/blog/index.html

创建教程目录：

sudo mkdir -p /var/www/html/tutorials

sudo nano /var/www/html/tutorials/index.html

2 全面测试清单

逐一测试以下项目：

✅ 主页访问：https://yourdomain.com
✅ 二级页面访问：https://yourdomain.com/about.html
✅ 目录访问：https://yourdomain.com/blog/
✅ 子目录页面：https://yourdomain.com/blog/index.html
✅ 静态资源加载：检查CSS、JS、图片是否正常显示
✅ 页面间链接跳转：确保所有内部链接正常工作
✅ 移动端适配：在手机上测试各个页面
✅ 404页面：访问不存在的页面，检查错误页面显示

3 性能检查

使用在线工具检查网站性能：

Google PageSpeed Insights：检查页面加载速度
GTmetrix：分析网站性能
SSL Labs：检查SSL证书配置

常见问题及解决方案

问题1：子页面返回404错误

原因：Nginx配置中的 try_files 指令不正确

解决：确保使用了 try_files $uri $uri/ $uri/index.html =404;

问题2：CSS/JS文件在子页面中无法加载

原因：使用了相对路径引用静态资源

解决：将所有静态资源引用改为绝对路径（以 / 开头）

问题3：EdgeOne缓存导致更新不及时

原因：EdgeOne缓存了旧版本的文件

解决：在EdgeOne控制台手动清除缓存，或设置合适的缓存规则

配置完成！

恭喜！您已经成功配置了EdgeOne环境下的二级页面处理。现在您的网站应该能够：

正确处理所有层级的页面访问
在所有页面中正常加载静态资源
提供良好的用户体验和SEO友好的URL结构
享受EdgeOne提供的安全防护和加速服务