Agency 是一套面向创意工作室、设计机构和小型服务企业的响应式单页官网模板。页面基于 Agency 7.0.4 与 Bootstrap 5.0.1，把服务介绍、6 个作品案例、品牌时间线、团队、客户 Logo 和联系表单串在同一条滚动路径中；它适合制作机构展示前端，但不包含内容管理、客户账户、邮件投递或询盘后台。
资源包只有一个正式入口 index.html，没有 npm 配置或构建命令。Bootstrap 样式已经合并进 css/styles.css，少量页面行为位于 js/scripts.js，图片则按首屏、作品、时间线、团队和客户 Logo 分类保存在 assets/img。因此可直接从静态文件开始定制，不需要先理解组件框架或路由系统。
单页内容如何完成机构介绍与作品展示
| 页面区域 | 现有内容 | 定制重点 |
|---|---|---|
| 首屏 | 工作室欢迎语、主标题和滚动到服务区的行动按钮 | 机构定位、核心服务和首屏背景图 |
| 服务 | 三项图标服务卡，示例方向为电商、响应式设计和安全 | 替换为真实服务分类、交付内容与优势说明 |
| 作品集 | 六张两列或三列排列的作品卡片及详情弹窗 | 项目封面、项目目标、客户、类别和成果说明 |
| 关于与团队 | 四段发展时间线、三位团队成员和社交入口 | 真实历程、成员信息及有效社交链接 |
| 客户与联系 | 四个客户 Logo、联系表单、隐私和条款占位链接 | 客户授权、表单服务、隐私政策与使用条款 |
导航中的 Services、Portfolio、About、Team 和 Contact 都指向当前页面内的锚点，没有独立详情页。这样的结构适合用一条连续路径完成“认识机构—了解服务—查看案例—了解团队—发起咨询”，但不适合直接承担博客、项目分类、客户门户或多语言内容管理等需要独立路由的功能。
六个作品卡片通过 Bootstrap Modal 展开详情
作品区在桌面宽度下使用三列网格，在较窄宽度下调整为两列或单列。每张卡片带有悬停遮罩和加号图标，点击后会打开对应的 Bootstrap Modal；弹窗中可以展示大图、项目简介、客户和类别，并提供关闭按钮。六个弹窗均写在同一个 HTML 文件中，不需要跳转新页面。
定制作品时需要同时更新卡片缩略图、标题、分类和对应弹窗，避免列表与详情不一致。若项目数量持续增加，继续复制整段 Modal 会让单页文件变得臃肿；此时更适合改成由 JSON 或后端数据生成内容，或者为每个案例建立独立详情页。
固定导航、ScrollSpy 与移动菜单如何工作
主题脚本会监听滚动位置：离开页面顶部后为固定导航加入收缩样式，Bootstrap ScrollSpy 则根据当前可见区块切换导航状态。移动端展开菜单后，点击任一导航项会自动触发折叠按钮，避免菜单继续遮挡正文。这些是源码中已经绑定的前端交互，不依赖额外页面框架。
样式表包含 Bootstrap 的 576、768、992、1200 和 1400 像素断点，并为首屏、作品网格、时间线、导航和弹窗设置了额外响应式规则。时间线在窄屏采用单侧结构，较宽屏再切换为左右交错排列；导航在 992 像素以上显示完整菜单，在更小宽度使用折叠按钮。
联系表单需要配置服务，不能直接接收询盘
联系区包含姓名、邮箱、电话和留言字段，并声明必填及邮箱格式验证；页面还加载了一段外部表单脚本。不过当前 data-sb-form-api-token 的值仍是 API_TOKEN 占位符，表单没有可用的自有提交地址，因此下载后不能直接收取询盘。
可以按业务选择配置兼容的表单服务，或改成向自己的 API 提交。无论采用哪种方式，都应补充服务端校验、反垃圾策略、失败提示、重复提交处理、隐私同意和真实成功回执。客户 Logo、社交按钮、Privacy Policy 与 Terms of Use 当前也使用占位链接，上线前必须替换或删除。
修改与静态部署时优先检查哪些文件
- 先在
index.html替换机构名称、服务、案例、时间线、团队、联系信息和页脚链接。 - 按现有文件名替换
assets/img中的首屏、作品、团队和时间线图片，或同步修改 HTML 引用路径。 - 在
css/styles.css中调整--bs-primary、字体、区块间距和首屏背景，统一新的品牌视觉。 - 保留导航收缩、ScrollSpy 和移动菜单逻辑；删除区块时同步清理导航锚点及对应的作品弹窗。
- 配置联系表单并替换所有
#!占位链接，同时确认客户 Logo、人物照片和项目图片具备使用许可。 - 部署到静态主机前检查外部 Font Awesome、Google Fonts、Bootstrap JS 和表单脚本是否能够加载，并在手机、平板和桌面尺寸下复核页面。
文件头将主题和 Bootstrap 代码标注为 MIT License；分发源码或重要代码部分时应保留相应版权与许可声明。本文依据静态文件结构说明页面能力，没有声称已经完成表单投递、构建、生产部署或跨浏览器兼容测试。
暂无评论内容