产品体系整理模板

这是一个用于整理产品资料的静态 HTML 模板，适合按照 品牌 → 产品体系 → 产品表格 的方式管理产品信息。

模板采用纯 HTML、CSS 和 JavaScript 编写，不依赖框架，不需要后端环境。可以直接上传到 GitHub Pages、普通网站空间、公司内部资料站，或者嵌入到其他静态页面中使用。

一、适用场景

这个模板适合用于整理以下类型的产品资料：

1. 多品牌产品体系整理

   例如：

   • COOWIN 产品体系
   • COODEC 产品体系
   • EVODEK 产品体系

   每个品牌可以单独一个 HTML 页面，后期维护时只需要打开对应品牌文件修改。

2. 多产品线资料整理

   例如：

   • 户外地板体系
   • 户外墙板体系
   • 户外栅栏体系
   • 色卡表面
   • 灯带及配件
   • 标准配件桶

3. 产品参数表整理

   适合展示：

   • 产品名称
   • 产品型号
   • 系统型号
   • 规格
   • 产品图片
   • 用途 / 适配产品
   • 起订量
   • 备注

4. 内部产品资料库

   适合销售、运营、设计、采购、网站编辑等人员快速查看产品信息。

5. GitHub Pages 静态资料页面

   模板结构简单，直接上传 GitHub 后即可开启 GitHub Pages 预览。

二、当前文件结构

product-system-template-flat/
├── index.html
├── brand-a.html
├── brand-b.html
├── brand-c.html
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── images/
│       └── products/
│           ├── product-01.jpg
│           ├── product-02.jpg
│           ├── product-03.jpg
│           └── ...
├── README.md
└── GITHUB_UPLOAD_INFO.md

三、页面说明

1. index.html

首页入口页面，展示多个品牌产品体系入口。

默认包含：

• 品牌A产品体系
• 品牌B产品体系
• 品牌C产品体系

后续可以改成：

• COOWIN 产品体系
• COODEC 产品体系
• EVODEK 产品体系

2. brand-a.html

品牌 A 的产品体系页面。

可以改名为：

coowin.html

3. brand-b.html

品牌 B 的产品体系页面。

可以改名为：

coodec.html

4. brand-c.html

品牌 C 的产品体系页面。

可以改名为：

evodek.html

5. assets/css/style.css

所有页面共用的 CSS 文件。

当前 CSS 做了作用域隔离，基本都以：

#pc ...

开头。

这样做的好处是：如果后续把这个模板嵌入到其他网页中，可以尽量避免和原网站的 CSS 冲突。

6. assets/js/main.js

所有页面共用的 JavaScript 文件。

主要功能包括：

• 产品搜索
• 产品图片点击放大
• ESC 键关闭大图
• 点击遮罩关闭大图

7. assets/images/products/

产品图片目录。

当前内置了 12 张本地占位图，尺寸为：

800 × 600

后续替换成真实产品图片即可。

四、页面内容结构

每个品牌页面内部大致是这样的结构：

品牌产品体系页面
├── 页面简介
├── 快速搜索
├── 户外地板体系
│   ├── 地板主材
│   ├── 配件
│   └── 标准配件桶
├── 户外墙板体系
│   ├── 墙板主材
│   └── 墙板配件
├── 户外栅栏体系
│   ├── 栅栏主材
│   └── 栅栏配件
└── 色卡表面
    ├── 标准色卡
    └── 表面工艺

对应 HTML 结构大致是：

<article class="sys" id="floor">
  <div class="sys-head">
    ...
  </div>

  <div class="list">
    <section class="box" id="floor-main">
      ...
      <table class="tbl">
        ...
      </table>
    </section>
  </div>
</article>

五、如何修改品牌名称

假设你想把 brand-a.html 改成 COOWIN 页面。

第一步：修改文件名

brand-a.html

改成：

coowin.html

第二步：修改导航链接

打开所有 HTML 文件，找到类似代码：

<a class="pill" href="brand-a.html">品牌A产品体系</a>

改成：

<a class="pill" href="coowin.html">COOWIN产品体系</a>

第三步：修改页面标题和内容

打开 coowin.html，搜索：

品牌A

替换成：

COOWIN

同时可以修改：

<title>品牌A产品体系</title>
<h1>品牌A产品体系</h1>

改成：

<title>COOWIN产品体系</title>
<h1>COOWIN产品体系</h1>

六、如何新增一个品牌页面

如果后续要新增第四个品牌，例如 NEWBRAND，可以这样做：

第一步：复制页面

复制：

brand-a.html

改名为：

newbrand.html

第二步：批量替换品牌名

打开 newbrand.html，把：

品牌A

替换成：

NEWBRAND

第三步：添加顶部导航

打开所有 HTML 文件，找到顶部导航：

<nav class="wrap nav" aria-label="产品体系导航">
  ...
</nav>

新增：

<a class="pill" href="newbrand.html">NEWBRAND产品体系</a>

第四步：设置当前页面高亮

在 newbrand.html 中，把当前品牌按钮加上 on 类名：

<a class="pill on" href="newbrand.html">NEWBRAND产品体系</a>

其他页面不需要加 on。

七、如何新增一个产品体系

如果要新增一个新的体系，比如“户外栏杆体系”，可以复制一个完整的体系区块：

<article class="sys" id="floor">
  ...
</article>

然后修改：

<article class="sys" id="railing">

标题改成：

<h3>户外栏杆体系</h3>

说明文字改成：

<p>可放栏杆主材、扶手、立柱、连接件等表格。</p>

页面顶部的快速定位也可以增加：

<a href="#railing">户外栏杆体系</a>

八、如何新增一个表格

每个体系下面的表格使用：

<section class="box" id="floor-main">
  ...
</section>

如果要新增一个“安装工具”表格，可以复制一个 .box 区块，然后改成：

<section class="box" id="floor-tools">
  <div class="box-head">
    <h4>安装工具</h4>
    <span class="state">示例数据</span>
  </div>

  <div class="scroll">
    <table class="tbl">
      ...
    </table>
  </div>
</section>

同时可以在该体系的快速跳转里增加：

<a href="#floor-tools">安装工具</a>

九、如何新增产品行

产品数据都写在表格的：

<tbody>
  ...
</tbody>

里面。

复制一整段：

<tr>
  <td data-label="序号">1</td>
  <td data-label="产品名称">经典空心地板</td>
  <td data-label="产品型号">A-P001</td>
  <td data-label="系统型号">SYS-001</td>
  <td data-label="规格">800 × 600 示例规格</td>
  <td data-label="图片" class="pic-cell">
    <a href="assets/images/products/product-01.jpg" class="pic" data-cap="地板主材 - 经典空心地板">
      <img src="assets/images/products/product-01.jpg" alt="地板主材 经典空心地板" loading="lazy">
    </a>
  </td>
  <td data-label="用途/适配产品">这里填写用途描述、适配产品、颜色、安装说明等信息。</td>
  <td data-label="起订量">1件</td>
  <td data-label="备注">这里填写备注信息，可换行。</td>
</tr>

然后修改里面的文字和图片路径即可。

十、手机端为什么需要 data-label

手机端会把表格转换成卡片式布局。

例如：

<td data-label="产品名称">经典空心地板</td>

手机端会显示成类似：

产品名称    经典空心地板

所以维护表格时，不建议删除 data-label。

如果新增字段，也要同步写好 data-label。

十一、如何替换产品图片

当前图片路径示例：

<img src="assets/images/products/product-01.jpg" alt="地板主材 经典空心地板" loading="lazy">

点击放大的图片路径在：

<a href="assets/images/products/product-01.jpg" class="pic" data-cap="地板主材 - 经典空心地板">

如果要替换图片：

1. 把新图片放到：

   assets/images/products/
   

2. 修改表格里的图片路径，例如：

   assets/images/products/coowin-decking-01.jpg

3. 同时建议修改 alt 和 data-cap，方便 SEO 和图片预览说明。

建议产品图尺寸统一为：

800 × 600

如果真实图片不是这个尺寸，也尽量保持 4:3 比例，页面展示会更整齐。

十二、CSS 命名说明

当前模板使用较短的 class 名，便于维护：

#pc       最外层容器
.wrap     内容宽度容器
.nav      顶部导航
.pill     导航按钮
.main     页面主体
.home     首页卡片列表
.card     首页入口卡片
.intro    品牌页面简介
.tools    搜索工具栏
.sys      产品体系区块
.box      单个产品表格区块
.tbl      产品表格
.pic      产品图片链接
.lb       图片放大弹窗

CSS 基本都写成：

#pc .class-name {
  ...
}

这样可以减少样式污染。

十三、当前功能说明

1. 顶部导航

顶部导航支持自动换行，手机端不会横向溢出。

2. 页面内快速定位

品牌页面里可以通过按钮快速跳转到：

• 户外地板体系
• 户外墙板体系
• 户外栅栏体系
• 色卡表面

3. 产品搜索

输入关键词后，会自动筛选当前页面中的产品表格。

可以搜索：

• 产品名称
• 产品型号
• 系统型号
• 规格
• 备注
• 用途描述

4. 图片点击放大

点击产品图片后，会打开大图预览。

支持：

• 点击遮罩关闭
• 点击关闭按钮关闭
• 按 ESC 键关闭

5. 手机端卡片布局

电脑端显示为表格。

手机端自动转换为卡片式结构，更方便阅读。

十四、后续扩展建议

1. 增加更多品牌页面

如果品牌越来越多，可以继续增加：

coowin.html
coodec.html
evodek.html
newbrand.html

2. 增加 PDF 下载链接

可以在表格里增加一列：

规格书

然后放 PDF 链接：

<a href="assets/files/product-spec.pdf">下载</a>

3. 增加产品详情页

如果产品信息越来越多，可以把单个产品再做成独立页面，例如：

products/coowin-decking-01.html

4. 增加中英文版本

可以复制一套页面：

index-en.html
coowin-en.html

或者在表格里增加英文名称、英文备注等字段。

5. 增加打印样式

后续可以在 CSS 中添加：

@media print {
  ...
}

方便打印产品资料。

6. 增加分类筛选

目前是关键词搜索。后续也可以扩展成：

• 按产品体系筛选
• 按产品类型筛选
• 按材质筛选
• 按应用场景筛选

十五、推荐维护流程

建议后期这样维护：

1. 先确定要修改哪个品牌页面；
2. 打开对应 HTML 文件；
3. 找到对应产品体系；
4. 找到对应表格；
5. 复制或修改 <tr> 产品行；
6. 替换图片到 assets/images/products/；
7. 检查电脑端表格；
8. 检查手机端卡片；
9. 提交到 GitHub。

十六、注意事项

1. 修改文件名后，记得同步修改导航链接。
2. 新增表格字段时，记得同步写 data-label。
3. 产品图片建议统一尺寸或比例。
4. 不建议删除最外层 id="pc"，否则 CSS 作用域会失效。
5. 如果把模板嵌入到其他网站中，建议保留 #pc 外层容器。
6. 上传 GitHub Pages 后，文件路径大小写要保持一致。