{"id":50709236,"url":"https://github.com/coowinit/waco-html-theme-preview","last_synced_at":"2026-06-09T14:01:46.981Z","repository":{"id":359313071,"uuid":"1245477878","full_name":"coowinit/waco-html-theme-preview","owner":"coowinit","description":"一套完整的 WPC 产品展示与 WooCommerce 商城风格静态 HTML 页面模板，包含首页、产品、博客、案例、下载、FAQ、关于我们、联系我们和产品对比等页面。","archived":false,"fork":false,"pushed_at":"2026-05-21T09:18:52.000Z","size":2746,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-21T17:14:51.269Z","etag":null,"topics":["before-after","css","html","html-template","javascript","static-website","swiper","website-preview","woocommerce-theme","wordpress-template"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/waco-html-theme-preview/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-21T08:59:06.000Z","updated_at":"2026-05-21T09:19:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/waco-html-theme-preview","commit_stats":null,"previous_names":["coowinit/waco-html-theme-preview"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/waco-html-theme-preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwaco-html-theme-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwaco-html-theme-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwaco-html-theme-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwaco-html-theme-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/waco-html-theme-preview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwaco-html-theme-preview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["before-after","css","html","html-template","javascript","static-website","swiper","website-preview","woocommerce-theme","wordpress-template"],"created_at":"2026-06-09T14:01:45.837Z","updated_at":"2026-06-09T14:01:46.970Z","avatar_url":"https://github.com/coowinit.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WACO 静态 HTML 网站主题\n\n这是一套面向 **WPC 户外建材产品展示、WooCommerce 商城页面、企业官网、案例展示、博客内容和资源下载** 的静态 HTML 网站主题。\n\n整套页面以现代企业站和产品展示型商城为设计方向，重点关注：\n\n- 页面结构完整\n- 模块层级清晰\n- 交互效果实用\n- 后期易于 WordPress / WooCommerce 动态化\n- 适合继续扩展成正式网站主题\n- 适合用于 GitHub Pages 或本地静态预览\n\n本主题没有包含统一的 Header 和 Footer，方便后期接入已有网站的全局头部导航和底部结构，也方便拆分为 WordPress 主题模板文件。\n\n---\n\n## 主题定位\n\n这套 HTML 主题适合以下类型的网站：\n\n- WPC 地板网站\n- WPC 墙板网站\n- WPC 围栏网站\n- 户外建材企业官网\n- 产品目录型网站\n- B2B 产品展示网站\n- WooCommerce 商城前端原型\n- WordPress 企业站主题开发基础\n- Elementor / Gutenberg 页面结构参考\n- 产品展示 + 博客内容 + 案例展示综合型网站\n\n页面内容以 WPC 产品展示为主要参考场景，但整体布局和模块也可以扩展到其他行业，例如：\n\n- 建材\n- 家居\n- 户外用品\n- 工业产品\n- 展厅展示\n- 产品样品目录\n- 项目案例网站\n\n---\n\n## 设计目标\n\n本主题的核心目标不是追求复杂的前端工程化，而是先通过普通的 HTML、CSS 和 JavaScript，把一个完整网站所需的页面结构和交互效果全部梳理清楚。\n\n主要设计目标包括：\n\n1. **页面覆盖完整**  \n   覆盖企业官网、产品商城、博客内容、案例、下载、FAQ、搜索、404、作者、标签、联系、关于我们、产品对比等常见页面。\n\n2. **结构便于后期开发**  \n   页面模块清晰，便于拆分为 WordPress 模板、WooCommerce 模板或自定义组件。\n\n3. **视觉统一**  \n   使用统一的色彩、按钮、卡片、标题、间距和响应式规范。\n\n4. **交互实用**  \n   使用轮播、弹框、筛选、加载更多、数字动画、自动目录、Before / After 对比等常见实用交互。\n\n5. **图片路径易维护**  \n   图片按页面类型分类存放，背景图多数通过内联 `style` 设置，方便后期程序动态输出。\n\n6. **适合静态预览和主题开发双用途**  \n   既可以直接作为静态 HTML 页面预览，也可以作为 WordPress 主题开发前的页面原型。\n\n---\n\n## 页面总览\n\n当前主题包含以下页面：\n\n| 页面文件 | 页面名称 | 页面用途 |\n|---|---|---|\n| `index.html` | 预览入口页 | 用于集中展示所有页面链接 |\n| `home.html` | 首页 | 网站首页整体展示 |\n| `products.html` | 产品列表页 | 产品归档页 / 产品分类页 |\n| `product-detail.html` | 产品详情页 | WooCommerce 单品详情页结构 |\n| `product-detail-legacy.html` | 产品详情旧版 | 旧版详情页备份 |\n| `blog.html` | 博客列表页 | 文章归档 / 新闻列表 |\n| `blog-detail.html` | 博客详情页 | 文章内容页 |\n| `faq.html` | 常见问答页 | FAQ 问答展示 |\n| `downloads.html` | 资料下载页 | 手册、色卡、安装指南、证书下载 |\n| `projects.html` | 案例展示页 | 项目案例展示和弹框图库 |\n| `search.html` | 搜索结果页 | 站内搜索结果模板 |\n| `404.html` | 404 页面 | 页面不存在提示 |\n| `author.html` | 作者页 | 作者文章归档 |\n| `tag.html` | 标签页 | 标签文章归档 |\n| `contact.html` | 联系我们页 | 联系表单和联系方式 |\n| `about.html` | 关于我们页 | 公司介绍、实力展示、客户评价 |\n| `compare.html` | 产品对比页 | Before / After 产品效果对比 |\n\n---\n\n## 目录结构\n\n```text\n/\n├── index.html\n├── home.html\n├── products.html\n├── product-detail.html\n├── product-detail-legacy.html\n├── blog.html\n├── blog-detail.html\n├── faq.html\n├── downloads.html\n├── projects.html\n├── search.html\n├── 404.html\n├── author.html\n├── tag.html\n├── contact.html\n├── about.html\n├── compare.html\n├── assets/\n│   ├── css/\n│   │   └── waco-pages.css\n│   ├── js/\n│   │   └── waco-pages.js\n│   └── images/\n│       ├── about/\n│       ├── archive/\n│       ├── blog/\n│       ├── compare/\n│       ├── contact/\n│       ├── downloads/\n│       ├── faq/\n│       ├── products/\n│       └── projects/\n└── README.md\n```\n\n---\n\n## 技术栈说明\n\n本主题采用轻量级静态前端技术，不依赖复杂构建工具。\n\n### 当前已使用技术\n\n| 技术 | 用途 |\n|---|---|\n| HTML5 | 页面结构、表单、文章内容、卡片、模块组织 |\n| CSS3 | 页面视觉、响应式布局、卡片、按钮、动效、排版 |\n| JavaScript | 页面交互、筛选、弹框、目录、数字动画、图片对比 |\n| Swiper.js | 轮播图、缩略图轮播、客户评价轮播、案例弹框图库 |\n| CSS Grid | 多列卡片、详情页左右布局、页面主结构 |\n| Flexbox | 按钮组、标签、卡片内部对齐 |\n| IntersectionObserver | 滚动进入视口动画、数字动画触发 |\n| CSS Sticky | 博客目录、侧边栏固定效果 |\n| CSS Clip-path | Before / After 图片对比遮罩 |\n| CSS Line Clamp | 标题和描述最大行数控制 |\n| CSS Clamp | 响应式字号控制 |\n| CSS Transition / Animation | 卡片动效、图标浮动、图片切换 |\n| Range Input | Before / After 滑块拖动控制 |\n\n### 可扩展技术方向\n\n后期如果继续升级，可以逐步加入：\n\n| 技术 / 工具 | 可用于 |\n|---|---|\n| WordPress | 主题化、内容管理 |\n| WooCommerce | 产品、购物车、订单和变体 |\n| ACF | 页面模块字段、案例、FAQ、下载资料字段 |\n| Contact Form 7 / Fluent Forms | 联系表单提交 |\n| GSAP | 更高级滚动动画和页面动效 |\n| Lenis | 平滑滚动体验 |\n| Isotope / MixItUp | 更复杂的筛选和 Masonry 布局 |\n| Fancybox / PhotoSwipe | 图片灯箱图库 |\n| Alpine.js | 更轻量的局部交互 |\n| Vite | 后期工程化开发、资源打包 |\n| Sass / SCSS | 更系统的 CSS 组织 |\n| WebP / AVIF | 图片性能优化 |\n| Lazy Loading | 图片懒加载和性能提升 |\n\n---\n\n## 全局设计风格\n\n主题整体风格偏向：\n\n- 简洁\n- 大气\n- 高端\n- 商业化\n- 自然色系\n- 产品展示型\n- 卡片化\n- 留白充足\n- 建材行业适配\n\n主要视觉特征：\n\n- 深绿色作为主色\n- 暖棕色作为强调色\n- 米白和浅灰作为页面背景\n- 大圆角卡片\n- 柔和阴影\n- 大标题\n- 简短描述\n- 半透明白色卡片\n- 通用占位图风格\n- 多处使用内联背景图，方便后期替换\n\n---\n\n## 公共文件说明\n\n### CSS 文件\n\n```text\nassets/css/waco-pages.css\n```\n\n该文件包含：\n\n- 全局变量\n- 页面容器\n- 按钮样式\n- 标题系统\n- 卡片系统\n- 内页 Banner\n- 响应式断点\n- 页面专属样式\n- Swiper 样式\n- FAQ 样式\n- 产品详情样式\n- 博客详情排版\n- 案例弹框样式\n- 表单样式\n- Before / After 样式\n\n### JavaScript 文件\n\n```text\nassets/js/waco-pages.js\n```\n\n该文件包含：\n\n- 页面 reveal 动画\n- Swiper 初始化\n- 产品详情图切换\n- FAQ 折叠\n- 下载页分类筛选\n- 案例页筛选和加载更多\n- 案例弹框图库\n- 博客详情自动目录\n- 关于我们数字滚动\n- 为什么选择我们切换\n- 联系表单静态演示\n- Before / After 图片对比滑块\n\n---\n\n# 页面结构与技术点\n\n---\n\n## 1. `index.html` 预览入口页\n\n`index.html` 是整个静态页面主题的预览入口。\n\n### 页面结构\n\n```text\nHero 介绍区\n页面分组导航\n核心品牌页面入口\n商城页面入口\n博客与内容页面入口\n资源与互动页面入口\nWordPress 工具模板入口\n底部说明\n```\n\n### 技术点\n\n- 独立页面内 CSS\n- 不引用公共主题 CSS\n- 不影响其他页面样式\n- 卡片式页面入口\n- 页面分组导航\n- 响应式布局\n\n### 适用场景\n\n用于集中预览所有 HTML 页面，尤其适合静态部署后作为访问首页。\n\n---\n\n## 2. `home.html` 首页\n\n首页是网站的主视觉入口和主要转化入口。\n\n### 页面结构\n\n```text\n首屏 Swiper Banner\n产品范围模块\n应用场景 Swiper\n项目灵感模块\n优势展示模块\nCTA 转化模块\n```\n\n### 技术点\n\n- Swiper 首屏轮播\n- Swiper 应用场景轮播\n- 多列卡片布局\n- 图片比例控制\n- 标题描述行数控制\n- 滚动 reveal 动画\n- 响应式适配\n\n### 后期扩展\n\n- 首页 Banner 后台动态管理\n- 产品范围绑定 WooCommerce 分类\n- 应用场景绑定自定义文章类型\n- 首页模块排序\n- 首页模块开关控制\n- 增加视频 Banner\n- 增加客户 Logo 墙\n\n---\n\n## 3. `products.html` 产品列表页\n\n产品列表页适合作为产品归档页、产品分类页或 WooCommerce Shop 页面。\n\n### 页面结构\n\n```text\n内页 Banner\n面包屑导航\n产品分类按钮\n三列产品卡片\n产品价格\n加入购物车按钮\n分页\n```\n\n### 技术点\n\n- CSS Grid 三列产品布局\n- 产品卡片等高\n- 标题和描述最大行数控制\n- 分类按钮式导航\n- 分页样式\n- 响应式单列适配\n\n### 后期扩展\n\n- 对接 WooCommerce 产品循环\n- 对接真实产品分类\n- 加入价格筛选\n- 加入排序功能\n- 加入颜色筛选\n- 加入 Ajax 加载更多\n- 加入快速查看弹框\n\n---\n\n## 4. `product-detail.html` 产品详情页\n\n产品详情页是 WooCommerce 单品页面的静态结构参考。\n\n### 页面结构\n\n```text\n产品主图区域\nSwiper 主图轮播\n缩略图轮播\n颜色选择\n产品标题\n价格\n短描述\n数量选择\n加入购物车\n产品详情内容\n相关产品\n```\n\n### 技术点\n\n- Swiper 主图轮播\n- 缩略图 Swiper 联动\n- PC 端缩略图显示数量控制\n- 移动端缩略图显示数量控制\n- 颜色按钮切换图片\n- 产品详情左右布局\n- 相关产品卡片\n- 响应式适配\n\n### 后期扩展\n\n- 对接 WooCommerce 产品图库\n- 对接 WooCommerce 变体属性\n- 颜色切换绑定真实变体图片\n- 加入库存状态\n- 加入 SKU\n- 加入产品规格表\n- 加入安装视频\n- 加入资料下载\n- 加入产品评价\n\n---\n\n## 5. `product-detail-legacy.html` 产品详情旧版\n\n该页面是旧版产品详情页备份。\n\n### 用途\n\n```text\n保留早期产品详情交互\n作为旧版样式对比\n作为历史版本备份\n作为特殊详情模板参考\n```\n\n### 后期扩展\n\n- 可以删除\n- 可以保留为备用模板\n- 可以作为 A/B 测试页面\n- 可以作为特殊产品详情页模板\n\n---\n\n## 6. `blog.html` 博客列表页\n\n博客列表页适合作为文章归档、新闻中心或知识中心。\n\n### 页面结构\n\n```text\n内页 Banner\n推荐博客 Swiper\n博客分类按钮\n博客卡片列表\n分页\nCTA\n```\n\n### 技术点\n\n- 推荐文章整卡 Swiper\n- Swiper 分页器\n- 三列博客卡片\n- 文章标题最大行数控制\n- 分类按钮结构\n- 响应式布局\n\n### 后期扩展\n\n- 对接 WordPress 文章循环\n- 推荐文章绑定置顶文章\n- 分类按钮绑定文章分类\n- 增加文章搜索\n- 增加 Ajax 分类筛选\n- 增加阅读量或发布时间\n- 增加作者信息\n\n---\n\n## 7. `blog-detail.html` 博客详情页\n\n博客详情页是内容系统中最完整的页面。\n\n### 页面结构\n\n```text\n内页 Banner\n文章标题和信息\n文章主图\n文章正文\n右侧自动目录\nTags 标签\n侧边 CTA\n作者框\n上一篇 / 下一篇\n推荐文章\n相关文章\n底部 CTA\n```\n\n### 技术点\n\n- JavaScript 自动读取正文 `h2`\n- 自动生成内容目录\n- 目录点击平滑滚动\n- 当前章节自动高亮\n- 时间轴式目录样式\n- Sticky 右侧栏\n- 完整文章排版系统\n- 作者框\n- 上一篇 / 下一篇\n- 推荐文章卡片\n\n### 正文排版支持\n\n正文中已经为常见 HTML 标签设置样式：\n\n```text\nh1 ~ h6\np\nul\nol\nli\nblockquote\ntable\nthead\ntbody\ntr\nth\ntd\ncode\npre\ndl\ndt\ndd\nfigure\nimg\nfigcaption\ndiv 提示块\n```\n\n### 后期扩展\n\n- 自动目录对接 WordPress 正文\n- Tags 动态输出\n- 作者信息动态输出\n- 上一篇 / 下一篇动态输出\n- 推荐文章根据分类或标签匹配\n- 增加文章分享按钮\n- 增加阅读进度条\n- 增加评论区\n- 增加文章 Schema\n\n---\n\n## 8. `faq.html` 常见问答页\n\nFAQ 页面用于集中展示客户常见问题。\n\n### 页面结构\n\n```text\n内页 Banner\n帮助中心卡片\nFAQ 分类按钮\n折叠问答列表\n默认第一条展开\n支持提示卡片\n底部 CTA\n```\n\n### 技术点\n\n- Accordion 折叠交互\n- 分类按钮筛选\n- 默认展开第一条\n- 切换分类后自动展开第一个可见问题\n- 无匹配提示\n- 响应式布局\n\n### 后期扩展\n\n- 对接 FAQ 自定义文章类型\n- 对接 FAQ 分类\n- 增加 FAQ 搜索\n- 增加 FAQ Schema\n- 增加“是否有帮助”反馈\n- 增加热门问题排序\n\n---\n\n## 9. `downloads.html` 资料下载页\n\n资料下载页用于展示产品资料、安装指南、色卡和证书文件。\n\n### 页面结构\n\n```text\n内页 Banner\n资料类型概览\n下载分类按钮\n下载资料卡片\n下载说明侧边栏\n文件类型说明\n底部 CTA\n```\n\n### 技术点\n\n- 分类筛选\n- 下载卡片列表\n- 文件类型标签\n- 侧边信息卡\n- 无匹配提示\n- 响应式布局\n\n### 后期扩展\n\n- 对接 WordPress 媒体库\n- 对接 ACF 文件字段\n- 增加下载次数统计\n- 增加文件大小自动读取\n- 增加下载权限控制\n- 增加提交表单后下载\n- 增加 PDF 预览\n\n---\n\n## 10. `projects.html` 案例展示页\n\n案例展示页用于展示实际项目、应用场景和客户案例。\n\n### 页面结构\n\n```text\n内页 Banner\n案例分类按钮\n三列案例卡片\nLoad More 加载更多\n案例详情弹框\n弹框主图 Swiper\n弹框缩略图 Swiper\n案例介绍文字\n底部 CTA\n```\n\n### 技术点\n\n- CSS Grid 三列布局\n- 同一行卡片底部自动对齐\n- 标题最多两行\n- 描述最多两行\n- 分类筛选\n- 加载更多\n- Modal 弹框\n- Swiper 主图轮播\n- Swiper 缩略图联动\n- ESC 关闭弹框\n- 点击遮罩关闭弹框\n- 弹框内容独立滚动\n\n### 后期扩展\n\n- 对接案例自定义文章类型\n- 案例分类动态输出\n- 案例弹框内容动态生成\n- 增加项目地点\n- 增加使用产品\n- 增加项目面积\n- 增加项目年份\n- 增加真实图片图库\n- 增加 Ajax 加载更多\n\n---\n\n## 11. `search.html` 搜索结果页\n\n搜索结果页用于展示站内搜索结果。\n\n### 页面结构\n\n```text\n内页 Banner\n搜索框\n结果类型筛选\n搜索结果列表\n侧边栏结果说明\n热门搜索标签\n分页\n```\n\n### 技术点\n\n- 搜索结果卡片布局\n- 结果类型筛选\n- 侧边栏 Sticky\n- 不同内容类型标签\n- 分页样式\n- 响应式布局\n\n### 后期扩展\n\n- 对接 WordPress 搜索结果\n- 区分产品、文章、案例、下载资源\n- 增加关键词高亮\n- 增加 Ajax 搜索\n- 增加搜索建议\n- 增加无结果推荐内容\n\n---\n\n## 12. `404.html` 404 页面\n\n404 页面用于页面不存在时的提示。\n\n### 页面结构\n\n```text\n全屏背景\n大号 404 数字\n错误说明\n搜索框\n快捷链接\n返回首页按钮\n浏览产品按钮\n```\n\n### 技术点\n\n- 全屏居中布局\n- 半透明毛玻璃效果\n- 搜索表单\n- 快捷入口按钮\n- 响应式适配\n\n### 后期扩展\n\n- 对接 WordPress 404 模板\n- 增加热门产品推荐\n- 增加热门文章推荐\n- 增加自动记录失效链接\n- 增加返回上一页按钮\n\n---\n\n## 13. `author.html` 作者页\n\n作者页适合作为 WordPress 作者归档模板。\n\n### 页面结构\n\n```text\n作者 Banner\n作者资料卡\n作者统计\n作者文章列表\n分页\n```\n\n### 技术点\n\n- 作者头像占位\n- 作者介绍卡片\n- 文章卡片列表\n- 分页样式\n- 响应式布局\n\n### 后期扩展\n\n- 动态输出作者名称\n- 动态输出作者头像\n- 动态输出作者简介\n- 输出作者文章列表\n- 增加作者社交链接\n- 增加作者文章分类筛选\n\n---\n\n## 14. `tag.html` 标签页\n\n标签页适合作为 WordPress 标签归档模板。\n\n### 页面结构\n\n```text\n标签 Banner\n标签简介\n标签 Chips\n相关文章列表\n分页\n```\n\n### 技术点\n\n- 标签归档结构\n- 当前标签高亮\n- 文章卡片列表\n- 分页样式\n- 响应式布局\n\n### 后期扩展\n\n- 动态输出当前标签\n- 动态输出相关标签\n- 动态输出标签文章\n- 增加标签 SEO 描述\n- 增加标签筛选\n- 增加标签云\n\n---\n\n## 15. `contact.html` 联系我们页\n\n联系我们页面用于客户咨询、样品请求、报价请求和项目沟通。\n\n### 页面结构\n\n```text\n内页 Banner\n联系信息卡片\n咨询表单\n右侧支持说明\n营业时间\n地图占位\n底部 CTA\n```\n\n### 表单字段\n\n```text\nName\nPhone\nEmail\nSubject\nRequirement Description\n```\n\n对应中文：\n\n```text\n姓名\n手机\n邮箱\n标题\n需求描述\n```\n\n### 技术点\n\n- HTML 表单\n- 必填字段\n- 输入框和 Textarea 样式\n- 右侧 Sticky 信息卡\n- 静态提交演示\n- 地图占位模块\n- 响应式布局\n\n### 后期扩展\n\n- 对接 Contact Form 7\n- 对接 Fluent Forms\n- 对接后端邮件发送\n- 增加文件上传\n- 增加 Google reCAPTCHA\n- 增加提交成功页\n- 增加客户来源字段\n- 增加 CRM 对接\n\n---\n\n## 16. `about.html` 关于我们页\n\n关于我们页面用于展示品牌实力、产品优势和客户信任感。\n\n### 页面结构\n\n```text\n内页 Banner\n公司介绍\n数据实力\n产品优势\n为什么选择我们\n客户评价\n底部 CTA\n```\n\n### 技术点\n\n- 数字滚动动画\n- IntersectionObserver 触发动画\n- 产品优势卡片\n- 图标轻微浮动\n- 滚动逐个出现\n- 为什么选择我们 Accordion\n- 左侧标题描述切换\n- 右侧图片同步切换\n- 客户评价 Swiper\n- PC 三列、平板两列、手机一列\n\n### 后期扩展\n\n- 数据数字后台可编辑\n- 产品优势字段化\n- 客户评价动态管理\n- 增加公司时间线\n- 增加工厂图片展示\n- 增加证书和资质展示\n- 增加团队介绍\n- 增加合作伙伴 Logo\n\n---\n\n## 17. `compare.html` 产品对比页\n\n产品对比页用于展示 Before / After 前后效果。\n\n### 页面结构\n\n```text\n内页 Banner\n页面说明卡片\nBefore / After 对比滑块\n每个滑块下方标题和描述\n底部 CTA\n```\n\n### 当前对比组\n\n```text\n安装前 / 安装后\n普通木材 / WPC\n老旧地面 / 翻新后\n```\n\n### 技术点\n\n- CSS `clip-path` 实现前后图片遮罩\n- Range input 控制分割线\n- JavaScript 同步 CSS 变量\n- 中间拖动分割线\n- Before / After 标签\n- 响应式高度控制\n\n### 后期扩展\n\n- 替换真实项目图片\n- 增加更多对比组\n- 绑定产品分类\n- 绑定案例数据\n- 增加对比说明点\n- 增加移动端滑动提示\n- 增加自动播放对比动画\n\n---\n\n# 关键交互功能总结\n\n## Swiper 轮播\n\n使用场景：\n\n```text\n首页 Banner\n首页应用场景\n产品详情图\n博客推荐\n案例弹框图库\n客户评价\n```\n\n优势：\n\n- 成熟稳定\n- 移动端体验好\n- 支持分页器\n- 支持箭头\n- 支持缩略图联动\n- 易于后期动态输出\n\n---\n\n## FAQ 折叠\n\n使用场景：\n\n```text\nfaq.html\n```\n\n功能：\n\n- 默认第一条展开\n- 点击切换展开项\n- 分类筛选\n- 切换分类后自动打开第一个可见项\n\n---\n\n## 案例弹框\n\n使用场景：\n\n```text\nprojects.html\n```\n\n功能：\n\n- 点击案例卡片打开弹框\n- 弹框内主图 Swiper\n- 缩略图 Swiper\n- 弹框文字介绍\n- 点击遮罩关闭\n- ESC 关闭\n- 内容较长时弹框内部滚动\n\n---\n\n## 博客详情自动目录\n\n使用场景：\n\n```text\nblog-detail.html\n```\n\n功能：\n\n- 自动读取文章正文中的 `h2`\n- 自动生成目录\n- 点击目录平滑滚动\n- 滚动时自动高亮当前章节\n- 时间轴样式目录\n- 右侧 Sticky 显示\n\n---\n\n## 数字滚动动画\n\n使用场景：\n\n```text\nabout.html\n```\n\n功能：\n\n- 滚动到数据模块时触发\n- 数字从 0 滚动到目标值\n- 使用 IntersectionObserver 控制触发时机\n\n---\n\n## Before / After 对比滑块\n\n使用场景：\n\n```text\ncompare.html\n```\n\n功能：\n\n- 中间拖动分割线\n- 左右对比图片变化\n- 使用 range input 控制\n- 使用 CSS 变量控制图片遮罩\n- 适合展示安装前后、材料对比、翻新前后\n\n---\n\n# 响应式设计说明\n\n整体页面按照常见断点进行适配：\n\n```css\n@media (max-width: 1024px) {}\n@media (max-width: 760px) {}\n```\n\n典型响应式策略：\n\n| 屏幕 | 处理方式 |\n|---|---|\n| PC | 多列布局，展示完整视觉结构 |\n| 平板 | 两列或单列布局 |\n| 手机 | 单列布局，按钮和卡片上下排列 |\n| 详情页 | 左右布局变为上下布局 |\n| Swiper | PC 多列，移动端单列 |\n| 弹框 | PC 固定宽度，移动端自适应宽度 |\n| 表单 | 双列变单列 |\n\n---\n\n# 可维护性设计\n\n## 1. 图片目录按页面拆分\n\n```text\nassets/images/about/\nassets/images/archive/\nassets/images/blog/\nassets/images/compare/\nassets/images/contact/\nassets/images/downloads/\nassets/images/faq/\nassets/images/products/\nassets/images/projects/\n```\n\n好处：\n\n- 图片不混乱\n- 页面维护更直观\n- 后期替换真实图片更方便\n- 方便迁移到 WordPress 主题目录\n\n---\n\n## 2. 背景图多采用内联 style\n\n示例：\n\n```html\nstyle=\"background: url('assets/images/...') center / cover no-repeat;\"\n```\n\n好处：\n\n- 后期动态输出图片方便\n- 适合 ACF 图片字段\n- 适合 WordPress 缩略图\n- 不需要在 CSS 中维护大量图片路径\n\n---\n\n## 3. 页面模块结构清晰\n\n每个页面都按照模块划分，并使用注释标记结构。\n\n适合后期拆分为：\n\n```text\ntemplate-parts/hero.php\ntemplate-parts/cta.php\ntemplate-parts/product-card.php\ntemplate-parts/blog-card.php\ntemplate-parts/project-card.php\ntemplate-parts/faq-item.php\n```\n\n---\n\n## 4. JS 交互按页面判断执行\n\n脚本中大部分交互都会先判断当前页面是否存在对应 DOM，再执行初始化。\n\n好处：\n\n- 避免其他页面报错\n- 一个 JS 文件可以支持多个页面\n- 后期可以继续拆分为模块化 JS\n\n---\n\n# 后期扩展方向\n\n## 1. WordPress 主题化\n\n可以将当前 HTML 页面拆分为：\n\n```text\nheader.php\nfooter.php\nfront-page.php\npage.php\nsingle.php\narchive.php\nsearch.php\n404.php\nsingle-product.php\narchive-product.php\ntemplate-parts/\n```\n\n适合逐步开发成完整 WordPress 主题。\n\n---\n\n## 2. WooCommerce 动态化\n\n产品相关页面可对接：\n\n```text\n产品列表\n产品分类\n产品标签\n产品价格\n产品图库\n产品变体\n库存状态\n加入购物车\n相关产品\n产品评价\n```\n\n重点页面：\n\n```text\nproducts.html\nproduct-detail.html\nproduct-detail-legacy.html\ncompare.html\n```\n\n---\n\n## 3. ACF 字段化\n\n适合使用 ACF 管理：\n\n```text\n首页模块\nBanner 图片\nCTA 内容\n关于我们数据\n产品优势\n客户评价\nFAQ\n下载资料\n案例详情\nBefore / After 图片\n联系信息\n```\n\n---\n\n## 4. 自定义文章类型\n\n可以将以下内容做成 WordPress Custom Post Type：\n\n```text\nProjects / 案例\nFAQ / 常见问答\nDownloads / 下载资料\nTestimonials / 客户评价\nCompare Items / 对比项目\nApplications / 应用场景\n```\n\n---\n\n## 5. 多语言支持\n\n可扩展：\n\n```text\nWPML\nPolylang\n多语言字段\n多语言菜单\n多语言 URL\n多语言 SEO\n```\n\n重点需要多语言的内容：\n\n- 产品标题\n- 产品描述\n- 表单字段\n- FAQ\n- 下载资料\n- 案例介绍\n- 博客文章\n- CTA 文案\n\n---\n\n## 6. SEO 优化\n\n后续可增加：\n\n```text\n页面 Title / Description\nOpen Graph\nTwitter Card\nSchema.org\nBreadcrumb Schema\nProduct Schema\nArticle Schema\nFAQ Schema\nLocalBusiness Schema\n图片 ALT\n语义化 heading 层级\n```\n\n重点页面：\n\n```text\nproducts.html\nproduct-detail.html\nblog-detail.html\nfaq.html\nabout.html\ncontact.html\n```\n\n---\n\n## 7. 性能优化\n\n后期可以继续优化：\n\n```text\n图片压缩\nWebP / AVIF\nLazy Load\nCSS 拆分\nJS 按页面拆分\nSwiper 按需加载\n关键 CSS 内联\n减少未使用 CSS\nCDN 资源优化\n字体加载优化\n```\n\n---\n\n## 8. 交互升级\n\n可继续增强：\n\n```text\n产品 Ajax 筛选\n产品快速查看\n案例 Ajax 加载更多\n案例弹框深链接\n搜索自动建议\n表单验证\n提交成功弹窗\n图片懒加载\n页面滚动进度条\n产品颜色实时切换\nBefore / After 自动演示动画\n```\n\n---\n\n## 9. 后台管理方向\n\n如果后期接入 WordPress，可以将内容拆分成：\n\n```text\n产品数据\n博客文章\nFAQ 问答\n下载资料\n案例展示\n客户评价\n首页模块\n关于我们数据\n联系信息\n产品对比图片\n```\n\n这样可以让非技术人员也能在后台维护内容。\n\n---\n\n# 优化升级建议\n\n## 第一阶段：替换真实内容\n\n建议优先完成：\n\n1. 替换真实产品图片\n2. 替换真实项目案例图片\n3. 替换真实公司介绍\n4. 替换真实产品描述\n5. 替换真实联系方式\n6. 替换真实下载文件\n7. 替换真实 FAQ 内容\n\n---\n\n## 第二阶段：整理组件\n\n建议将重复模块整理为组件：\n\n```text\n内页 Banner\nCTA\n产品卡片\n博客卡片\n案例卡片\nFAQ Item\n下载卡片\n表单字段\n分页\n```\n\n---\n\n## 第三阶段：接入 WordPress\n\n建议逐步接入：\n\n```text\nHeader / Footer\n菜单系统\n页面模板\n文章循环\n产品循环\nACF 字段\nWooCommerce 模板\n表单插件\n```\n\n---\n\n## 第四阶段：增强用户体验\n\n可以继续增加：\n\n```text\n页面加载动画\n图片懒加载\n交互提示\n表单验证\n筛选动画\n搜索建议\n滚动进度\n移动端菜单\n产品快速咨询\n```\n\n---\n\n## 第五阶段：SEO 和性能完善\n\n建议重点优化：\n\n```text\n页面速度\n图片大小\n结构化数据\nMeta 信息\n内容层级\n关键词布局\n内部链接\n移动端体验\nCore Web Vitals\n```\n\n---\n\n# 使用建议\n\n## 静态预览\n\n建议从以下页面开始查看：\n\n```text\nindex.html\n```\n\n该页面集中展示了所有页面入口，方便快速预览整套主题。\n\n## 页面开发\n\n建议优先确认：\n\n1. 页面布局是否符合业务需求\n2. 模块顺序是否合理\n3. 图片比例是否适合真实素材\n4. 卡片高度是否稳定\n5. 交互是否适合后期动态化\n6. 移动端效果是否清晰\n\n## 程序化开发\n\n建议按以下顺序推进：\n\n1. 整理 Header / Footer\n2. 拆分公共模板模块\n3. 接入 WordPress 页面模板\n4. 接入 WooCommerce 产品数据\n5. 接入 ACF 字段\n6. 接入真实表单提交\n7. 替换真实内容\n8. 优化 SEO 和性能\n\n---\n\n# 注意事项\n\n- 当前图片大多是通用占位图，正式使用时需要替换为真实产品图和项目图。\n- 当前表单是静态演示，正式使用时需要接入后端或 WordPress 表单插件。\n- 当前下载按钮为占位结构，正式使用时需要绑定真实文件地址。\n- 当前产品价格、产品描述和产品属性为示例内容，后期需要由 WooCommerce 动态输出。\n- 当前案例弹框数据写在前端 JS 中，后期建议改为文章数据或 Ajax 获取。\n- 当前页面没有包含统一 Header 和 Footer，便于后期接入已有网站结构。\n- `index.html` 是独立预览入口页，其 CSS 写在页面内部，不参与主题公共样式系统。\n\n---\n\n# 总结\n\n这套 HTML 主题已经覆盖一个产品展示型企业网站和 WooCommerce 风格商城常见的大部分页面场景。\n\n它的核心价值在于：\n\n- 页面类型完整\n- 模块结构清晰\n- 交互效果实用\n- 视觉风格统一\n- 易于静态预览\n- 易于继续开发成 WordPress 主题\n- 易于接入 WooCommerce 和 ACF\n- 适合作为正式网站开发前的高质量静态原型\n\n后续可以在此基础上继续进行真实内容替换、WordPress 主题化、WooCommerce 动态化、SEO 优化和性能优化。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwaco-html-theme-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fwaco-html-theme-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwaco-html-theme-preview/lists"}