企业官网建设流程全解析

# 步骤 2：浏览器访问安装向导（假设域名是 nav.local） # 打开 http://nav.local/install.php # → 自动检测通过后，点击【初始化数据库】 # → 输入管理员账号（默认 admin / 123456，首次登录后强制修改）

# 步骤 3：登录后台并验证 # 访问 http://nav.local/admin/ # 输入刚设的账号，进入仪表盘 # 左侧菜单点击【导航管理】→【添加新条目】 # 填写：名称=“Python 教程合集”，URL=https://example.com/py-course，分类=“编程语言”，图标=book.svg # 点击【保存】→ 到首页刷新，立即可见

注意：install.php执行成功后会自动重命名自身为install.lock，防止重复执行。如需重装，手动删掉该文件即可。

3.2 后台核心功能拆解：每个按钮背后都是可审计的操作

后台不是花架子，所有操作都留痕、可逆、有边界：

• 分类管理：支持三级嵌套（如 “AI 工具 > 训练加速 > 量化工具”），但禁止循环引用（后台校验逻辑在admin/class.category.php第 89 行）；
• 状态开关：每条目有「上线」「下线」「维护中」三态，「维护中」时前端显示黄色警示条+倒计时（时间取自数据库maintenance_until字段）；
• 排序拖拽：列表页使用SortableJS实现视觉拖拽，松手瞬间触发 AJAX 请求，将新顺序写入sort_order字段（非前端 JS 排序假象）；
• URL 安全校验：提交时自动过滤javascript:、data:、vbscript:协议，且强制要求http://或https://开头（includes/sanitize.php第 42 行正则）。

3.3 添加一个真实可用的“课程资源”分类全流程

以某导师的机器学习课件为例，演示如何让非技术人员也能安全操作：

1. 后台【分类管理】→ 【添加分类】

   • 分类名称：ML 课程资源
   • 父级分类：空（作为一级分类）
   • 图标：上传ml-icon.svg（尺寸限制 2KB 以内，后台自动压缩）
   • 描述：吴恩达《机器学习》中文笔记与代码实践

2. 【导航管理】→ 【添加新条目】

   • 名称：第1周：线性回归
   • URL：https://course.example.com/week1.pdf
   • 分类：选择刚建的ML 课程资源
   • 图标：file-pdf.svg（从后台图标库选择）
   • 状态：上线
   • 备注：含习题答案与 Colab Notebook 链接

3. 保存后，前台首页自动出现「ML 课程资源」大分类，点击展开即见「第1周：线性回归」，鼠标悬停显示备注文字，点击跳转 PDF —— 全流程无需碰代码。

4. 常见问题排查：那些让你重启三次 Apache 还没解决的玄学问题

4.1 现象：后台登录成功，但点击【导航管理】空白页，F12 看 Network 显示 500 错误

原因：data/目录权限不足，或 SQLite 数据库文件被意外删除，导致get_nav_list()查询时 PDO 抛出未捕获异常。
解决：

• 检查data/db.sqlite是否存在且大小 > 0；若不存在，删掉install.lock重新运行install.php；
• 若存在但权限不对，执行chmod 644 data/db.sqlite；
• 查看 PHP 错误日志（通常在/var/log/apache2/error.log），搜索SQLSTATE[HY000]关键字定位具体 SQL 错误。

4.2 现象：手机端导航菜单点开后立刻关闭，无法点击子项

原因：iOS Safari 对touchstart事件的默认行为拦截未正确阻止，导致click事件被穿透到背景层。
解决：

• 打开assets/js/nav.js，找到function toggleMenu(e)函数；
• 在e.preventDefault()后增加一行：e.stopPropagation()；
• 清除手机浏览器缓存，或强制刷新（Safari 中长按地址栏刷新按钮）。

4.3 现象：后台上传 SVG 图标后，前台显示为方块或乱码

原因：SVG 文件包含外部引用（如<image href="logo.png">）或内联 CSS 样式，被后台的 SVG 安全过滤器截断。
解决：

• 用 SVGOMG 在线工具精简 SVG，勾选「Remove title / desc」和「Remove doctype」；
• 确保 SVG 根节点为<svg xmlns="http://www.w3.org/2000/svg">，不含<style>标签；
• 上传前用文本编辑器打开 SVG，确认无<?xml声明行（后台会主动剔除，导致解析失败）。

4.4 现象：Nginx 环境下，访问/admin/报 403 Forbidden

原因：Nginx 默认禁止访问以.开头的文件，而后台登录页admin/index.php依赖admin/.htpasswd（Apache 用）做基础认证，Nginx 未等价配置。
解决：

• 编辑 Nginx 站点配置，在server { }块内添加：

location ^~ /admin/ { auth_basic "Admin Area"; auth_basic_user_file /var/www/html/nav/admin/.htpasswd; }

• 使用htpasswd -c /var/www/html/nav/admin/.htpasswd admin生成密码文件；
• 重启 Nginx：sudo systemctl restart nginx。

4.5 现象：修改了assets/css/main.css，但浏览器始终加载旧样式

原因：CSS 文件被强缓存，且源码未启用版本哈希（为简化未加?v=xxx），浏览器认为资源未变。
解决：

• 开发阶段：在index.php头部<link>标签后手动加时间戳：

<link rel="stylesheet" href="assets/css/main.css?v=<?php echo time(); ?>">

• 生产环境：部署时用find assets/css -name "*.css" -exec touch {} \;更新文件 mtime，再配合 Nginxexpires 1h;缓存策略。

5. 进阶技巧：把下载页变成可追踪、可埋点、可灰度发布的轻量级平台

5.1 给每个下载链接加来源追踪：三行代码实现 UTM 参数自动拼接

业务需要知道用户是从哪个渠道点击下载的（比如微信公众号推文 vs 内部邮件）。不必改每条数据，只需在index.php渲染链接前统一处理：

// 在 index.php 的导航循环内（约第 120 行），找到 echo "<a href='$url'>" 这行 // 替换为以下逻辑： $track_url = $url; if (isset($_GET['utm_source'])) { $separator = (parse_url($url, PHP_URL_QUERY) === null) ? '?' : '&'; $track_url = $url . $separator . http_build_query([ 'utm_source' => $_GET['utm_source'], 'utm_medium' => $_GET['utm_medium'] ?? 'nav', 'utm_campaign' => $_GET['utm_campaign'] ?? date('Y-m') ]); } echo "<a href='" . htmlspecialchars($track_url) . "' target='_blank'>";

说明：htmlspecialchars()防止 XSS；parse_url()判断原 URL 是否已含参数，避免?a=1&&utm=1双问号错误；date('Y-m')作为默认活动名，方便按月归档分析。

5.2 埋点统计：不依赖第三方 SDK，用纯 PHP 记录点击行为

想看哪类资源最火？哪天访问峰值最高？不用接百度统计，自己记：

// 在 includes/functions.php 底部新增函数 function log_download_click($item_id, $user_agent = '') { $db = new PDO('sqlite:' . __DIR__ . '/../data/db.sqlite'); $stmt = $db->prepare("INSERT INTO download_logs (item_id, ip, user_agent, created_at) VALUES (?, ?, ?, ?)"); $stmt->execute([ $item_id, $_SERVER['REMOTE_ADDR'] ?? 'unknown', substr($user_agent ?: $_SERVER['HTTP_USER_AGENT'], 0, 255), date('Y-m-d H:i:s') ]); } // 在 index.php 的链接 <a> 标签内，加入 onclick 事件（注意：需开启 JS） echo "<a href='" . htmlspecialchars($url) . "' onclick=\"fetch('includes/log_click.php?id={$item['id']}');\" target='_blank'>";

然后新建includes/log_click.php：

<?php require_once 'functions.php'; if (isset($_GET['id']) && is_numeric($_GET['id'])) { log_download_click((int)$_GET['id']); http_response_code(204); // No Content，不干扰页面跳转 } ?>

提示：download_logs表已在install.php中预建，含id,item_id,ip,user_agent,created_at五字段。后续用SELECT item_id, COUNT(*) FROM download_logs WHERE created_at > '2024-01-01' GROUP BY item_id ORDER BY COUNT(*) DESC;即可查热榜。

5.3 灰度发布：让 10% 用户先看到新版导航，其余人保持旧版

当你要上线重大 UI 改动，又怕影响全部用户，可以用 IP 哈希做简单分流：

// 在 index.php 顶部（session_start() 后）加入： session_start(); $ip_hash = hexdec(substr(md5($_SERVER['REMOTE_ADDR']), 0, 2)) % 100; $_SESSION['is_beta_user'] = ($ip_hash < 10); // 10% 用户进入 beta // 在导航渲染逻辑中，根据 session 切换模板： if ($_SESSION['is_beta_user']) { include 'templates/nav-beta.php'; // 新版导航结构 } else { include 'templates/nav-default.php'; // 当前稳定版 }

注意：md5($_SERVER['REMOTE_ADDR'])是为了确保同一 IP 每次哈希一致；substr(..., 0, 2)取前两位十六进制字符（范围 00–ff，即 0–255），% 100得到 0–99 的整数，< 10即 10%。从那以后我每次上线新导航，都强制走一遍这个灰度逻辑，哪怕只是改个图标颜色——毕竟用户点击率下降 5%，比代码报错更难 debug。希望帮到你。

本文还有配套的精品资源，点击获取