接着上次给 PbootCMS 接上 Cloudflare R2 对象存储之后，今天集中火力把整个企业官网做了一次大改版。从首页重构、全站风格统一、手机端适配到性能优化，一天干完。记录一下过程。

改版目标

原来的网站是典型的企业模板站，白底蓝边，Bootstrap 默认风格，看着就很「模板」。老板说想要大疆、苹果那种感觉：大图留白、简洁高级、有科技感。

具体拆解下来要做这些事：

  1. 首页完全重构
  2. 所有子页面风格统一
  3. 独立手机版模板
  4. SEO 优化
  5. 性能继续压
  6. 后台功能增强

首页重构

首页改动最大，基本是从零写的。新首页的模块结构：

  • Hero 全屏轮播 — Banner 淡入切换，文字颜色根据背景图亮度自动切换（暗图白字、亮图黑字），用 Canvas 采样实现
  • 数据统计 — 2009 / 100+ / 15M+ / 60+ 四组渐变数字
  • 产品横向滚动 — 12 个产品卡片横向滑动，手机端有 Swipe 提示
  • 产品分类网格 — 6 大分类，每张卡片自动取该分类下第一个产品图作缩略图
  • 关于我们 — 左文右图对称布局
  • 认证 Logo 墙 — 每次显示 4 张证书，每 3 秒淡入淡出切换
  • 最新新闻 — 3 列卡片
  • 展会 Gallery — 4 列图片网格
  • CTA — 深色背景 + 渐变光效

配色方案

一开始做了全黑暗色主题，看着确实科技感很强，但整体太压抑了。最后改成苹果的配色方案：

  • 主背景：白色 #fff 和浅灰 #f5f5f7 交替
  • 文字：近黑 #1d1d1f + 灰色 #6e6e73
  • 强调色：苹果蓝 #0071e3
  • CTA 和 Footer：深灰 #1d1d1f
  • 导航：白底毛玻璃 backdrop-filter: blur(20px)

字体用了 Google Fonts 的 Inter（正文）+ Poppins（标题），这两个搭配很有品牌感。

轮播文字自适应

有个细节值得说：Banner 图有亮有暗，文字颜色固定白色的话在亮色图上看不清。解决方案是用 Canvas 实时检测背景图亮度：

function detectBrightness(img) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 50; canvas.height = 50;
    ctx.drawImage(img, 0, 0, 50, 50);
    var data = ctx.getImageData(0, 0, 50, 50).data;
    var r=0, g=0, b=0, count = data.length / 4;
    for (var i=0; i < data.length; i+=4) {
        r += data[i]; g += data[i+1]; b += data[i+2];
    }
    return (r/count*0.299 + g/count*0.587 + b/count*0.114);
}

亮度超过 150 就切换成深色文字，低于 150 用白色文字，切换时有 0.8s 的颜色过渡。

全站风格统一

首页改完后，其他页面还是老样子，视觉割裂很严重。一口气改了 5 个页面：

  • 产品列表页 — 粘性分类标签栏 + 3 列大卡片网格
  • 产品详情页 — 左图右文双栏，保留 Swiper 图片轮播
  • 新闻列表页 — 3 列卡片网格
  • 新闻详情页 — 居中排版，max-width 800px，阅读体验好
  • 关于我们 — Tab 切换 + 数据统计 + 视频
  • 联系我们 — 左侧信息卡片 + 右侧圆角表单

所有页面统一了导航（白底毛玻璃）、Footer（深灰四栏）、字体、配色、动画效果。CSS 全部内联在每个页面的 style 标签中，不依赖外部 CSS 文件。

去掉 API 依赖

原来新闻列表和关于页的认证都是用 AJAX 调后台 API 加载的，关掉 API 就白屏。全部改成 PbootCMS 原生标签直接渲染，不再依赖 API，SEO 也更好。

独立手机版模板

PbootCMS 支持独立手机版模板，放在 template/default/wap/html/ 下。一共做了 18 个文件，专门为手机端优化：

  • 全屏覆盖式导航菜单
  • 底部固定快捷栏（一键拨号/邮件/询价）
  • 产品 2 列网格
  • 图片全宽展示
  • 触摸友好（按钮最小 44px）
  • iPhone 安全区适配

另外把 iPad 从移动端判断里去掉了，平板走 PC 版（本身有响应式），体验更好。

性能优化

在昨天 89 分的基础上继续优化：

  • 上传自动转 WebP — 在 PbootCMS 的 handle_upload 函数里加了自动转换，jpg/png 上传后自动转 WebP，体积减少 30-50%。只有 WebP 确实更小时才使用，否则保留原图
  • 产品图白底融合 — 用 mix-blend-mode: multiply 让白底产品图自然融合到浅灰背景上
  • 所有动画用 IntersectionObserver — 滚动到可视区域才触发，不阻塞渲染

后台功能增强

缓存配置界面

原来缓存和会话的配置写死在 config.php 里，要改得登服务器改代码。加了个后台配置界面，可以一键切换本地文件和 Redis，支持 socket 和 TCP 两种连接方式。

IP 获取修复

后台登录 IP 一直显示 0.0.0.0，排查发现是 get_user_ip() 函数的问题：

  1. 没读 Cloudflare 的 CF-Connecting-IP 头
  2. X-Forwarded-For 有多个 IP 时正则匹配失败
  3. IPv6 地址匹配不了

三个问题一起修了。

SEO 优化

  • lang="zh" 改成 lang="en"（英文网站）
  • 所有页面加了 Open Graph 和 Twitter Card 标签
  • 首页加了 Organization + WebSite 结构化数据
  • 产品详情页加了 Product 结构化数据
  • 新闻详情页加了 Article 结构化数据
  • 优化了 robots.txt
  • 全站链接格式统一（去掉多余的问号）

总结

一天时间把一个老旧的企业模板站改成了苹果风格的现代网站。核心改动：

  • 首页完全重构（10 个模块）
  • 6 个子页面风格统一
  • 18 个手机版模板文件
  • 后台新增缓存配置界面
  • 上传自动转 WebP
  • SEO 全套标签
  • IP 获取修复

整个过程没用任何前端框架（Vue/React），纯 HTML + CSS + 原生 JS，跟 PbootCMS 的模板系统无缝配合，维护也简单。