📝 文字 ● 中级更新于 2026-05-13

如何在 LingCode /try 中构建多页网站？

TL;DR：先提示生成首页，然后提示 "添加 /pricing 页面" 和 "添加 /about 页面"。/try 会自动构建共享导航和样式。完成后，可将整个网站下载为 .zip，或发布到免费的 lingcode.dev/p/<name> 网址。

创建包含多个页面、内部导航、共享样式的完整网站，并可下载为 .zip 文件。

你将学到什么

如何在单条提示中请求生成多个页面
使用命名代码块来组织各页面
创建共享的 CSS 和 JavaScript 文件
页面之间的内部链接
将整个网站下载为 .zip 文件

单文件与多页面的区别

LingCode 可以生成两种形式：

单文件项目：一个 HTML 文件，包含所有内容（CSS、JS、图片以 data URI 形式内嵌）
多页面项目：多个 HTML 文件 + 共享 CSS/JS + 图片文件，打包成一个 .zip

以下场景适合使用多页面：完整网站、产品官网、文档站、作品集，以及页面数超过 3-4 个的任何项目。

第一步：编写多页面提示

描述整个网站

可以使用如下提示：

Build a multi-page website for an agency. Pages: 1) index.html (home with hero + services); 2) about.html (team + company story); 3) portfolio.html (case studies grid); 4) contact.html (contact form). All pages share: header nav with internal links, footer, consistent branding. Use a shared CSS file for styling. Make it responsive.

触发多页面模式的关键词：

"multiple pages"
"pages:" 或 "create pages for:"
"index.html, about.html, etc."
"shared CSS" 或 "shared header"

命名规范：请求时指定具体文件名（index.html、about.html、contact.html）。AI 会遵循这些名称并相应创建文件。

第二步：生成并预览

点击"发送"

选择你的 AI 提供商（多页面复杂度较高，推荐使用 Claude），然后点击"发送"。AI 将生成所有页面。

预览面板（或"代码"标签页）中会出现页面选择器，可逐一查看每个页面。点击页面名称在各页之间切换，验证所有链接是否正常工作。

理解网站结构

多页面网站包含以下内容：

HTML 页面：index.html、about.html、contact.html 等，每个都是完整页面
共享 CSS：style.css——所有页面加载，定义字体、颜色、布局
共享 JavaScript：main.js（可选）——导航、表单处理等
静态资源：图片、图标、字体（打包在 .zip 中）

所有路径均为相对路径，解压后直接在浏览器中打开任意 .html 文件即可正常访问。

第三步：测试导航

验证内部链接

在预览中点击导航链接，确认它们能正常工作。所有链接应使用相对路径（如 href="about.html"），这样无论本地还是部署后都能正常访问。

第四步：迭代优化

使用"继续"进行改进

对特定页面请求修改：

"让联系表单提交到邮箱"
"添加一个博客页面（blog.html），包含 3 篇示例文章"
"将作品集页面的案例研究从 4 个改为 6 个"
"添加一个深色模式切换，在所有页面间保持同步"

第五步：下载为 .zip

导出整个网站

点击三点菜单并选择"下载 .zip"。你将获得一个包含以下内容的文件夹：

所有 .html 文件
style.css
所有图片或静态资源

在本地解压，用浏览器打开 index.html，即可立即看到完整效果，所有链接和样式均正常工作。

部署你的网站

拿到 .zip 后：

本地测试：解压并在浏览器中打开 index.html，先在本地验证效果
Netlify/Vercel：连接你的 GitHub 仓库（或直接拖入文件夹）进行部署
静态托管：将文件上传到任意虚拟主机（GoDaddy、Bluehost 等）
共享云盘：通过邮件发送 .zip，或托管在 Google Drive / Dropbox 上

多页面网站的实用技巧

统一导航：要求所有页面使用相同的顶部导航，并高亮当前页。
共享页脚：确保每个页面都有完全一致的页脚链接。
有序文件结构：对于大型网站，可要求使用子目录：pages/、css/、images/
使用相对路径：始终使用相对路径（如 href="about.html"），而非绝对路径（如 href="/about.html"）
每页独立元数据：为每个页面设置唯一的 <title> 和 <meta description>，有助于 SEO

常见的多页面网站结构

企业官网：index（首页）、about（关于）、services（服务）、portfolio（案例）、blog（博客）、contact（联系）

电商网站：index、products（商品列表）、product-detail（商品详情）、cart（购物车）、checkout（结算）、account（账户）

文档站：index、getting-started（入门）、guides（指南）、API reference（API 参考）、FAQ（常见问题）

个人作品集：index、work（作品）、about（关于）、contact（联系）