Videograph 是一套面向摄像师、影视制作与后期团队的视频作品集网站模板，包含首页、关于、作品、服务、博客、文章详情和联系 7 个展示页。深紫背景配青蓝色强调线，首屏用拍摄现场图片和大标题交代业务，适合把团队介绍、制作能力与视频案例放在同一个网站中展示。
视频作品怎样展示
首页首屏是静态背景上的文字轮播，不是自动播放的背景视频。包内有 3 组轮播内容，当前背景和标题重复；更换时可以分别介绍拍摄、剪辑或动画业务，也可以精简成一个开场画面。
向下是服务介绍、7 个大小不一的作品区块、数字统计、4 位团队成员和文章轮播。首页作品区用 Masonry 排列，不同宽度与高度形成错落布局，适合混排横向片花、人物花絮与项目封面。封面通过 data-setbg 设置为背景图，修改时要同时检查裁切和播放按钮的位置。
播放按钮由 Magnific Popup 打开外部视频弹窗。首页和作品页的 16 个播放入口目前都指向同一个 YouTube 示例，包内没有视频文件。 替换作品时，要把封面、项目名称和播放地址一起修改；只换封面，点进去仍会是原示例。外部视频能否播放还取决于对应服务与访问网络，模板没有视频上传、转码或托管系统。
作品分类已有实现
portfolio.html 放了 9 张作品卡片，包含品牌、数字营销、网页、摄影和电商 5 个类别，另有查看全部的入口。页面使用 MixItUp 根据卡片上的分类类名筛选，这部分有实际脚本，不只是菜单文字。
修改分类需要对齐两处：上方菜单的 data-filter，以及下方每张卡片的分类类名。例如菜单写 .branding，对应卡片就需要带 branding。新增作品时可以复制卡片结构，再替换所属类别、封面与视频链接。
原分类名称偏向通用设计业务，可以根据团队实际项目改成品牌片、活动记录、短视频或其他题材。作品页下方的分页仍是占位链接，没有连接更多列表页；包内也没有单独的项目详情页。需要长篇介绍拍摄背景、制作流程和交付成果时，要另外补案例页面。
服务、团队与文章
服务页有 6 个服务区块和一组标志轮播，关于页则放了团队介绍、评价轮播与统计数字。这些页面可以承接客户看完作品后的问题：团队提供哪些环节、由谁制作、怎样联系。
博客列表和文章详情是两个独立 HTML 页面。列表有 9 张文章卡片，详情页包含正文、前后篇入口、相关文章与评论表单，适合改成拍摄花絮、项目复盘或制作方法。不过，列表中的“Read more”和分页尚未连到真实文章；页面中的评论数、项目数量、客户数据和人员资料也都是示例内容。
可以先保留少量真实案例，把对应文章链接接通，再按更新频率决定是否接入内容管理系统。现有文件不会自动生成文章、保存评论或维护案例数据，首屏与页脚的一些按钮也需要重新指定目标页面。
联系与订阅需要接通
联系页有姓名、邮箱、网站和消息 4 个输入项，文章页有同类评论表单，各展示页的页脚还带一个邮箱订阅框。它们都使用 action="#"，没有邮件、订阅或评论保存程序；多数输入项也没有字段名，邮箱还是普通文本输入。
要实际接收询盘，需要补字段名、邮箱类型和校验，再接入表单服务或服务端处理程序。评论应有对应的存储与展示逻辑，订阅也要连接实际名单服务。联系页附带的是外部地图示例，地址、电话、邮箱和地图位置需要一起替换。
修改文件与部署条件
这份包的基础是 Bootstrap 4.5.0 和 jQuery 3.3.1，搭配 Owl Carousel、MixItUp、Masonry、Magnific Popup 与 SlickNav。它属于较早的前端组合；用于正式项目时，应根据自己的浏览器与部署环境评估依赖升级及兼容性，不能直接套用新版模板的功能介绍。
| 修改目标 | 对应位置 |
|---|---|
| 页面文案、视频地址和作品分类 | 各页 HTML；封面背景另查 data-setbg |
| 轮播、弹窗、筛选与移动菜单 | js/main.js 及对应插件 |
| 现有样式 | css/style.css |
| 分块修改 Sass 样式 | sass/style.scss 及各部分 SCSS 文件 |
主强调色为 #00bfe7，标题使用 Play，正文使用 Josefin Sans，字体从 Google Fonts 加载。改成中文时需要另选合适的中文字体，并检查大标题的换行、按钮宽度和手机菜单。
包内已有可直接使用的 CSS，不需要为查看页面先执行构建。若选择修改 Sass，需要自行配置编译工具，原包没有配套的包管理或构建脚本。静态部署时保留 HTML、css/、js/、img/ 和 fonts/ 的目录关系即可；main.html 是附带的版权提示页，不是额外业务页面，Source/ 中的插件压缩包也不是网站运行入口。
暂无评论内容