Kaira 是一套面向服装品牌、精品店与配饰展示的单页电商网站模板，采用 Bootstrap 5。大幅时装照片、衬线标题和宽留白构成杂志式首页，适合展示新品系列与品牌风格。包内只有一个 HTML 页面，商品详情、账户和交易流程需要另行开发。
让系列照片成为主角
首页以 New Collections 标题和六张时装轮播图开场，宽屏同时展示三张，中等屏幕两张，窄屏一张。每张图下方保留短标题、简介和 Discover Now 入口，适合把同一季的不同造型放在一起，让访客通过服装轮廓、面料与搭配了解系列风格。入口后的商品详情需要自行接入。
Marcellus 衬线字体用于标题，Jost 用于正文和导航，背景以浅灰、白色为主，按钮与边框也较克制。这种版面需要色调和构图相近的摄影素材；直接混用背景杂乱、比例各异的商品图，会削弱三列陈列的整齐感。大段中文标题替换进去后，也要重新检查换行和图文间距。
向下浏览时，页面交替安排商品与品牌内容：
- 分类与系列：男装、女装、配饰三个图片入口，加上一块左右图文组合的冬季系列介绍，可分别承载分类浏览和当季主题。
- 商品陈列：新品、热卖、相关推荐三组轮播，分别放有五、六、五张示例卡片，展示名称、价格、收藏图标和加购文字。手机上商品区仍以两列展示，与首屏的一张大图区分。
- 品牌补充：视频封面、四条示例评价、三张博客预览、品牌标志与 Instagram 图片区，用于穿插故事和穿搭内容；评价、品牌关系与社交图片都应替换成实际资料。
首页与交易功能的界线
轮播切换、手机侧栏菜单、搜索弹层、购物车抽屉和视频弹窗已有前端实现，但它们对应的业务能力并不相同。
| 页面入口 | 包内实际状态 | 接入业务时需要补齐 |
|---|---|---|
| 商品、分类与博客链接 | 多数返回同一首页，另有缺失页面链接 | 列表、详情及真实目标地址 |
| 收藏、加购与购物车 | 静态图标和样例清单，未与商品联动 | 商品状态、数量、金额及结账流程 |
| 搜索弹层 | 有输入框，没有检索逻辑 | 商品索引、查询与结果页 |
| 邮件订阅 | 有邮箱输入区域，没有接收后端 | 订阅服务、校验及提交反馈 |
购物车抽屉里预置的是三条食品样例，与服装卡片无关；页头数量、抽屉清单和总价也没有计算关联。页脚的支付卡标志同样只是图片，不能据此判断已经接入付款。顶部菜单中的其他首页、商店布局、账户和订单跟踪名称，也不代表包内包含这些页面。
如果已有店铺，Kaira 可以用来制作品牌首页，把系列和商品入口连接到现有详情页。若希望同时获得商店、商品详情、购物车与结账的页面布局，可对照 TailStore 服装电商模板；两者都需要另行接入产品数据、库存、账户、订单和支付服务。
从品牌素材开始修改
页面文案和卡片主要集中在 index.html，图片位于 images/，主样式在根目录 style.css。可以按下面的顺序替换，避免改完外观后仍留下无效入口：
- 先统一图片与文案。替换首屏造型、分类图、商品图和系列图，再调整商品名、价格、系列简介及 ALT。轮播里有重复示例，增减卡片时也要同步检查对应链接。
- 再调整字体与颜色。
style.css的--heading-font、--bs-body-font-family和--bs-primary分别对应标题字体、正文字体与主色。改成中文品牌时，可重新选择中文字形，并查看手机两列商品名是否挤占图片下方空间。 - 最后处理全部业务入口。把导航、查看全部、收藏、加购、博客、社交与页脚联系地址逐项换成真实目标；暂时不做的入口应移除或明确停用。视频按钮使用 YouTube 嵌入地址，需要换成自己的视频，并考虑访问环境。
原包没有 package.json 或构建命令，可以保持 HTML、样式、脚本和图片的相对路径，以静态文件方式部署。Bootstrap 5.3.0-alpha3 与 Swiper 9 的运行文件通过 CDN 加载，另有本地 jQuery 1.10.2 和插件脚本；Jost、Marcellus 字体也依赖在线服务。长期维护时应固定依赖并单独评估升级，不能只改 CDN 版本号就认为旧插件已经兼容。
原页面的搜索关闭方式、视频弹窗固定宽度和窄屏系列文案需要处理。本站演示副本已补充搜索关闭按钮与 Escape 退出，并限制视频弹窗和系列栏的窄屏宽度，原始资源包保持不变。
演示中的搜索、订阅和结账均不提交数据。使用原包建站时，先处理这些位置，再检查商品入口是否进入正确页面，以及接入服务后的提交反馈。
暂无评论内容