关于wxunk.com网站文件黑金模板的注意事项

适配这个黑金单页静态 index.html，包含：图标存放路径、图标调用规则、动画特效代码避坑、CSS 页面控制、服务器 Nginx 配置、修改后不卡顿不占资源全套说明，零基础能看懂。

一、网站文件整体结构（先看懂文件放哪）

你的网站根目录 /www/wwwroot/wxunk 内部标准结构

wxunk/
├─ index.html        网站唯一主页面（所有内容、文字、模块、入口图标都在这里）
├─ images/           所有图片、入口图标、卫浴图标、logo、背景图存放文件夹
├─ css/              页面样式文件（控制布局、颜色、大小、排版）
├─ js/               动画、弹窗、二维码弹出、交互特效代码
└─ favicon.ico       浏览器标签小图标

小白重点：所有图片 / 图标统一放 images 文件夹，不要散丢在根目录

二、图标相关全套注意事项（四个站点入口图标 + 卫浴图标）

1. 图标存放位置

1. 四个网站入口图标、乐盟卫浴图标全部放入：/images/
2. 命名规范（方便区分，不出现中文 / 空格）
   • wxunok-com.png
   • wxunok-cn.png
   • mweiyu-com.png
   • kupinw-com.png
   • lemeng-weiyu.png （乐盟卫浴专用图标）
3. 图片格式要求：统一 PNG 透明底，尺寸统一 80×80px（入口模块标准大小），单张大小≤50KB，避免图片过大拖慢服务器。

2. HTML 里图标调用代码在哪、怎么改

所有四个入口模块代码都在 index.html 里，搜索关键词 img src="images/" 就能快速定位。

标准调用模板

<!-- 网站入口图标模块 -->
<div class="item-box">
  <!-- 修改src引号内路径，替换成你的新图标文件名 -->
  <img src="images/lemeng-weiyu.png" alt="乐盟卫浴图标" class="entry-icon">
  <h3>乐盟卫浴</h3>
  <a href="https://mweiyu.com" target="_blank">进入官网</a>
</div>

小白修改步骤

1. 把新图标上传服务器 images 文件夹；
2. 打开 index.html，找到对应模块 img 标签；
3. 修改 src="images/xxx.png" 为新图标文件名；
4. alt 文字同步修改（方便搜索引擎识别，不影响显示）。

3. 图标大小、圆角、颜色由 CSS 控制

图标样式统一在 css 文件，搜索 .entry-icon 即可：

.entry-icon {
  width: 80px;    /* 图标宽度，统一不要乱改 */
  height: 80px;   /* 高度，宽高保持一致不变形 */
  border-radius: 12px; /* 圆角大小，数字越大越圆 */
  object-fit: cover; /* 防止图标拉伸变形（必加） */
  margin: 0 auto 10px; /* 图标居中，底部留间距 */
}

小白避坑

• 不要直接在 img 标签写 width/height，全部交给 CSS 控制，改一处全局全部图标同步变化；
• 图标尺寸不统一会导致四个入口模块高低不齐。

4. 图标常见报错 & 解决

1. 页面裂图（图片不显示）：文件名大小写错误、路径写错、没上传 images 文件夹；
2. 图标拉伸变形：缺少 object-fit: cover;；
3. 加载缓慢：图片体积太大，用压缩工具压缩后再上传。

三、页面 CSS 控制全解（小白专用）

1. CSS 文件在哪里

根目录 css/style.css，index.html 头部引入代码：

<link rel="stylesheet" href="./css/style.css">

页面所有颜色、布局、间距、按钮、模块大小、响应式手机适配全部由这个文件控制。

2. CSS 三种修改方式，分清用途

1. 外部 CSS（推荐，全部样式放这里）：css/style.css，统一管理，页面干净；
2. 内部样式（不推荐，临时修改用）：index.html <style> 这里写css </style>；
3. 行内样式（尽量不用）：<div style="color:red">文字</div>，后期难维护。

3. 常用修改位置

1. 页面整体背景、粒子效果背景：搜索 body {}
2. 顶部导航栏颜色、大小：.header {}
3. 四个网站入口模块整体布局：.entry-wrap {}
4. 单个入口卡片阴影、边框：.item-box {}
5. 移动端手机适配：文件底部 @media (max-width:768px) 内代码，专门控制手机页面排版。

4. CSS 小白硬性注意事项

1. 所有符号必须是英文半角 ; : { }，中文符号会直接导致页面样式错乱；
2. 修改 CSS 后页面不生效：浏览器按 Ctrl+F5 强制刷新清除缓存；
3. 不要随意删除 @media 手机适配代码，删掉手机页面会变形；
4. 动画相关 CSS 不要大批量删除，会丢失粒子、漂浮效果。

四、页面特效 JS 代码注意事项（粒子、弹窗二维码、漂浮动画）

1. JS 文件位置

js/main.js，页面底部引入：

<script src="./js/main.js"></script>

包含三大核心特效：

1. 全屏星光粒子漂浮动画；
2. 点击按钮弹出微信二维码弹窗（你之前要求恢复原版弹窗效果）；
3. 页面滚动渐显、呼吸发光动画。

2. 修改特效代码必看禁忌（改错直接卡顿、服务器占用飙升）

1. 粒子特效不要随便增加数量 JS 内控制粒子数量代码：for(let i=0;i<30;i++)，数字越大粒子越多，浏览器渲染越卡，服务器不会占用高，但访客打开页面卡顿，保持 20~30 之间即可。
2. 二维码弹窗代码禁止删除 弹窗逻辑全部写在 main.js，配套弹窗样式在 CSS .qr-modal，删除后无法弹出微信二维码；如果弹窗样式不对，只改 CSS，不动 JS 逻辑。
3. 动画时长控制 CSS animation 动画时长不要低于 3s，过快闪烁会造成页面掉帧、卡顿；
4. 第三方外部 JS 尽量删除 页面如果引入在线 CDN 统计、客服 JS，会出现加载超时、页面卡住，建议全部下载到本地 js 文件夹。

3. 特效失效排查

1. JS 代码报错：打开浏览器 F12 控制台，红色文字就是错误，大多是符号写错、路径失效；
2. 二维码弹不出来：检查弹窗 div 有没有被误删、JS 弹窗函数是否被注释；
3. 粒子不显示：body 背景 CSS 被修改、JS 文件路径写错。

五、修改页面通用操作流程（小白标准步骤，防止改错回不去）

每次修改页面必做备份，避免改错无法还原：

1. 服务器下载原文件 index.html、css/style.css、js/main.js 本地保存备份；
2. 本地电脑修改代码，测试无误后再上传服务器；
3. 上传完成后浏览器 Ctrl+F5 强制刷新；
4. 页面错乱直接上传备份文件覆盖恢复。

六、服务器 & Nginx 配套注意事项（解决你之前资源占用高问题）

1. 图片、CSS、JS 静态资源不要频繁修改，开启缓存后访客浏览器会本地缓存，减轻服务器压力；
2. 图片统一压缩，大图、背景图体积控制在 200KB 以内；
3. Nginx 配置不要随意删除 gzip、open_file_cache 缓存代码，删除后每次访问重读文件，CPU 占用升高；
4. 禁止重复定义 MIME 类型（之前报错 duplicate text/html），站点配置不要手写 types {} 代码块。

七、高频问题汇总（小白常踩坑）

1. 改完图标不显示：图片未上传 images 文件夹 / 文件名大小写不一致 / 路径写错；
2. 页面排版乱了：CSS 漏写分号、删除 @media 移动端代码；
3. 页面很卡、加载慢：粒子数量过多、图片太大、引入大量外部在线 JS；
4. 二维码弹窗消失：删除了 JS 弹窗代码或弹窗 div 模块；
5. Nginx 检测配置报错：日志格式写 main、重复 mime 类型、语法符号错误。