Studiova 是一套面向设计工作室、品牌策划与网页开发团队的 Bootstrap 5 多页网站模板。它用人物视频、大字号标题和荧光绿按钮建立首屏印象，再通过作品、服务、团队与文章介绍业务。资源包含 12 个展示页面，适合以案例为主要说服材料、需要独立项目详情和联系入口的机构官网。
首页首屏的背景是一段静音循环播放的视频，深色蒙层压低画面亮度，让白色标题与绿色箭头更醒目。下方以编号串起业务数据、作品、服务、评价、团队、报价、FAQ、文章和联系区。它更适合有图片、视频和项目资料的团队：若只有几段公司简介，页面里的大图位与案例区会显得空。
作品与内容页面
Studiova 的机构展示页已经形成了较完整的访问路径。访客可以先在首页看作品轮播，再到作品列表浏览项目，进入详情了解服务范围与项目背景；博客也有列表和详情布局。实际文件集中在 html/：
| 页面用途 | 对应文件 | 定制重点 |
|---|---|---|
| 首页与机构介绍 | index.html、about-us.html | 品牌主张、团队资料、服务和真实业务数据 |
| 作品列表与详情 | projects.html、projects-detail.html | 项目封面、服务范围、行业、说明和过程图片 |
| 博客列表与详情 | blog.html、blog-detail.html | 文章卡片、标题、日期与正文 |
| 联系页 | contact.html | 询盘文案、联系方式和表单接入 |
| 登录与注册界面 | sign-in.html、sign-up.html | 账户界面的视觉参考，认证逻辑需另行实现 |
| 政策及错误页 | privacy-policy.html、terms-and-conditions.html、404.html | 改写为实际业务政策，配置站点错误页 |
根目录还有一个 index.html，只负责跳转到 html/index.html，不算额外的展示设计。部署时要保留 html/ 与同级 assets/ 的关系，页面中的样式、图片和脚本大量使用 ../assets/；只把 html/ 文件单独挪到站点根部，会破坏这些引用。
详情页是可复用的布局示例，并非每个项目都已有独立内容。 现有作品卡片共用 projects-detail.html，文章卡片也共用同一篇详情。整理真实作品时，应为项目建立各自的页面或内容路由，再替换列表链接。项目详情中的标题、行业、数字和说明也要一起核对，避免保留彼此不对应的演示文字。
视频与图片替换
首屏视频
视频文件位于 assets/images/backgrounds/banner-video.mp4，入口在 html/index.html 的 <video> 标签，已经设置自动播放、静音、循环与移动端内联播放。替换时要同时考虑文件体积、主体位置和文字覆盖区域；不适合用视频的项目，也可以将这一块改为静态背景，并补好相应 HTML 与样式。
图片比例与裁切
作品和团队图片使用固定比例的裁切容器。assets/scss/pages/_index.scss 中，.portfolio-img 的占位高度为宽度的 72%，.meet-team-img 为 120%，图片通过 object-fit: cover 填满容器。前者偏横向，后者偏竖向；替换图片后应先看人物、产品与关键文字是否被裁掉，而不只是确认文件名相同。
- 作品卡片悬停时会出现深色覆盖层，团队卡片也有上移的社交区。
- 客户标识采用 CSS 跑马灯；服务区用 Bootstrap 标签页切换图片，FAQ 使用折叠组件。
- 主要配色定义在
assets/scss/variables/_variables.scss，其中荧光绿为#C1FF72，深色为#1F2A2E，字体为 Manrope。
样式与编译
包内已有编译后的 assets/css/styles.css，直接调整 HTML 与图片不需要先构建。资源也附有 Sass 源码，但没有项目级构建命令；若修改 SCSS，需要自行配置编译，生成页面实际引用的 CSS，不能只改变量文件就期待浏览器同步变化。
交互与业务接入
assets/js/custom.js集中了作品轮播、计数动画、滚动导航、返回顶部和 AOS 初始化。- 作品轮播每 5 秒自动切换，按 0、600、1000、1200px 四组断点分别显示 1、2、3、4 项。
- 更换作品数量或想让每张卡片停留更久，可以从这里调整
responsive与autoplayTimeout。
同一脚本里的数字动画只是在一秒内递增到页面预设值，不读取统计接口。客户名称、推荐语、满意度、团队人数和服务报价都应换成自己的资料；报价卡片中的电商、分析与表单集成只是服务文案，不表示模板已实现这些系统。
联系表单目前没有提交地址，也没有对应的 Ajax 或收件处理。登录页的主按钮只是返回首页，Google、GitHub 登录与找回密码均为占位，不能据此提供真实账户服务。本次在线演示阻止表单提交，并停用了示例邮箱、电话和外部推广跳转，保留页面与本地交互供查看。
正式使用前，还需要改写含旧站点信息的隐私及条款页，把联系入口接到实际询盘流程。模板的价值主要在于机构展示、案例详情与视觉组织；邮件投递、内容管理、账户认证和支付应按业务需要另行接入。
暂无评论内容