Arsha 把企业官网常用的两种内容放在一起：用首页介绍业务全貌，再让服务、作品和文章进入各自的详情页。它采用 Bootstrap 5.3.3，共有 7 个 HTML 页面，适合需要展示服务、案例与团队的数字服务公司或 IT 业务参考。本文所述免费版仅允许个人项目使用，必须保留页脚署名；承接收费客户网站需要相应授权。现有获取入口不提供源码镜像，模板也不得转售或批量再分发。
首页讲全貌，详情页讲清一项服务或案例
首页首屏采用深蓝背景，标题与插画分居两侧，下方接客户 Logo 轮播。服务卡片、三步工作流程、行动号召、作品、团队、价格、评价和 FAQ 串成一条业务介绍路径，近期文章、订阅和联系区负责承接后续阅读与咨询。公司介绍中还安排了折叠问答与技能进度条。
区块可以按业务取舍。只展示少量服务的团队，可以把内容集中在首页；服务交付范围或项目背景较长时，再从卡片进入详情页，避免把整个首页堆成一份长说明书。客户、团队、价格、能力百分比和推荐语都是演示内容，替换时需要真实资料，不能把版式中的数字当成业务背书。
index.html：首页。About、Services、Portfolio、Team、Pricing、Contact 等导航定位到本页区块，Blog 则进入独立列表页。service-details.html：服务说明与侧栏导航，适合交代流程、交付范围和咨询入口。portfolio-details.html：作品图片与项目资料，可补充背景、成果、客户和项目链接。blog.html与blog-details.html：文章列表、侧栏、正文、作者和评论界面。要持续发布内容，还需接入真实文章、分类、分页和评论数据。starter-page.html：保留页头、页脚和面包屑，可扩展招聘、关于或条款页面。404.html：错误页，可增加返回首页、搜索或推荐内容入口。
独立页面已经留好，但目前仍是静态 HTML。页面能跳转，并不意味着已有内容后台、站内搜索、自动分页或评论系统。
案例筛选和动态展示，修改入口各不相同
作品分类、放大与详情是三种操作
作品区通过 Isotope 按 App、Product、Branding 分类筛选。筛选作用于已加载的卡片；GLightbox 的放大按钮用于看大图，详情按钮则进入作品详情页。换案例时要同时对应分类、缩略图、大图与详情内容，不能只替换卡片上的图片。Isotope 会在 imagesLoaded 确认图片加载后初始化，删除筛选区时也要一并处理相关初始化。
Logo、评价和技能进度各有触发方式
客户 Logo 与评价使用 Swiper 轮播；技能进度条由 Waypoints 在区块进入可视范围后触发。AOS 负责滚动入场，GLightbox 还用于视频和作品大图。主要交互库保存在 assets/vendor，页面行为统一从 assets/js/main.js 查找。
改导航时，把同页锚点和跨页链接分开
main.js 会随滚动切换页头状态、更新锚点激活项，并处理返回顶部、预加载层移除、FAQ 展开及带偏移的哈希定位。移动菜单可以展开、关闭和打开多层下拉，点击同页锚点后自动收起。
删掉价格、团队或其他区块后，需要同步删除对应锚点。扩展新页面时，则应把导航改为实际文件地址，并核对详情页的面包屑。否则首页菜单看似完整，点击后可能仍指向已经不存在的区块或演示页面。
有 PHP 文件，为什么联系表单仍然不能发信
首页联系与订阅表单分别指向 forms/contact.php 和 forms/newsletter.php，但它们依赖的 PHP Email Form 发送库没有包含在免费包中。缺少发送库时，脚本会直接返回无法加载的错误。这里已经准备了提交路径，并没有交付可用的邮件服务。
- 部署到 PHP 主机：补齐所用邮件方案的发送实现，设置真实收件地址与 SMTP，并处理输入校验、反垃圾和隐私同意。
- 部署到纯静态主机：把提交改接自有 API 或表单服务；静态托管本身不会执行 PHP。
反馈应根据接口的真实结果显示，失败、超时和重复提交都需要处理；日志也应避免记录不必要的敏感字段。邮件订阅与普通留言用途不同，不能只让两个表单共用一句成功提示就算接通。
换品牌内容，从 HTML 和主样式开始
资源包不依赖 npm、打包器或框架路由。先在 HTML 中重写首屏定位、服务和案例，再对应补全详情页；各页的站点名、导航、页脚和联系信息要一起替换。图片位于 assets/img，包括首屏、作品、团队、客户与文章图片，替换时保持合适裁切并填写准确 ALT。
样式集中在 assets/css/main.css，--accent-color、--heading-color 是调整强调色和标题色的入口。Bootstrap 网格与自定义响应式规则负责重排双列内容、卡片、导航和详情页；更长的中文标题与不同尺寸图片仍需检查换行和间距。Google Fonts 通过外部地址加载，部署环境限制外部请求时可改成本地字体或系统字体；视频、社交及其他占位地址也应换成有效入口。
暂无评论内容