简介一款专为二次元ACG爱好者打造的动漫导航网站前端源码适合个人站长、动漫社区运营者使用也可作为前端初学者的练手项目。整套源码打包为zip压缩包大小仅822KB核心文件涵盖HTML页面结构、CSS样式表与JavaScript交互脚本无需PHP后台与数据库下载后直接修改文件即可上线。站点分类模块支持展开与收起不同动漫主题的链接可分组展示点击栏目条即可折叠维护时只需编辑对应文件非常轻量。目前该模板已有13066人学习下载在同类二次元导航源码中热度较高源码目录结构清晰交互逻辑直观稍作样式改动就能移植到个人站中适合快速搭建导航环境。1. 动漫导航网站源码到底是怎样的一套东西看到“动漫导航网站源码”这个标题先别想得太复杂。它本质上就是一套以分类目录为核心的网址导航页面视觉上走萌系二次元风格技术上则是“页面模板 站点数据”的组合。这类源码流传很广常见形态是 HTML 版和 PHP 版两套并存HTML 版拿来就能开适合快速预览PHP 版把站点数据从页面里拆出来新增、修改、分类调整都不用改页面结构。适合谁想做动漫资源导航站、想学“静态页面如何转成动态数据驱动”的小开发者以及在本地折腾源码建站的同学。下面我按数据模型、静态实现、PHP 化、上线排查的顺序讲透最后给一个数据校验脚本收尾。2. 导航站的数据模型分类、站点与展示配置先于页面存在大多数导航源码之所以维护起来痛苦是因为数据一开始就写死在 HTML 标签里。要加一个站点得复制一长串卡片结构再改文字要调排序得把整块结构搬到另一个位置。被反复“精仿”的那些版本真正赢在数据文件独立改链接不用动页面。所以动手写页面之前先把数据模型立住后面的路会顺很多。2.1 导航站的三个核心数据对象分类、站点与标签分类是导航站的骨架对应页面顶部的栏目按钮比如“动漫门户”“新番资讯”“工具站点”。分类必须有一个稳定的 id因为所有链接和筛选逻辑都用 id 做参数而不是中文名。sort 字段控制栏目的排序数值小的排前面这个约定越早定下来越好。站点是导航站真正有业务价值的部分链接到哪、标题叫什么、简介怎么写、图标从哪来。站点的字段设计直接影响后续维护成本。我通常要求每条站点记录至少包含 title、url、description、category、sort 这五个字段icon 属于锦上添花没有就用兜底图。标签的作用是横向筛选比如“新番”“合集”“图库”。一个站点可以挂多个标签但分类只能有一个这是两者最本质的区别。设计数据时不要把标签做成单个字符串尽量用数组后面做搜索匹配会省很多事。最常见的误用是把站点直接嵌套进分类数组里写起来直观但一旦要加标签筛选或全局搜索就得把嵌套结构拆开重排。我惯用的方案是扁平结构站点表里只存一个 category 字段通过它关联分类 id。加需求时扁平结构改一个字段就行嵌套结构往往要动整个数据文件。2.2 用 JSON 做数据源为什么这类源码偏爱 JSON导航站的数据量通常不大几百条站点记录JSON 文件读进来也就是几十毫秒完全没必要上数据库。这里把三种方案放在一起对比选型理由会更清楚方案优点缺点纯 HTML 硬编码零依赖双击能开新增和排序都要改大段结构容易改错JSON 数据文件JS、PHP 都能直接读Git 可追踪改错能回滚不适合并发写多用户编辑麻烦MySQL / SQLite支持后台管理、多用户提交、点击统计部署成本高纯粹为导航站引入数据库是杀鸡用牛刀个人维护的导航站JSON 是最优选这也是这类源码偏爱 JSON 的根本原因。它同时能被前端 fetch 和后端 file_get_contents 读取一份数据两头用不需要转换层。JSON 的边界要清楚它不适合并发写。如果你打算做一个用户能自行提交站点的导航站就必须换数据库否则两个人同时写文件后写的人会直接覆盖前一个人的数据。另外 JSON 文件一旦格式损坏整个页面都会挂所以第六章我会给一个数据校验脚本这是吃了不少亏之后沉淀下来的习惯。2.3 展示配置排序、图标、封面与跳转规则站点卡片的字段建议固定下来不常用的字段可以预留但不要滥用title、url、description、icon、category、tags、sort、target。icon 可以填本地图片路径也可以填目标站点的 favicon 地址。我习惯优先用本地图标目录理由就一条对方站点的 favicon 随时可能因为防盗链策略失效到时候整个导航页全是裂图。封面和图标是两个概念别混在一起。封面 cover 是给推荐位或大图 Banner 用的卡片列表里用小图标就够了。很多源码把封面大图当图标用结果一个页面塞了几十张几百 KB 的图加载慢得让人直接关掉页面。跳转规则方面导航站通常统一新窗口打开并加上 relnoopener noreferrer。这条规则不要散落在每条站点记录里而是放进全局配置个别需要同窗口打开的站点再单独覆盖字段。下面给一个最小但完整的 JSON 结构后面的实现都基于它{ settings: { site_name: 萌元素导航, description: 一个二次元风格的动漫导航站, open_new_window: true, default_icon: assets/images/fallback.png }, categories: [ { id: anime, name: 动漫门户, sort: 1 }, { id: tool, name: 工具站点, sort: 2 } ], sites: [ { title: 示例动漫站, url: https://example.com/, description: 动漫资讯与番剧更新, icon: assets/images/anime.png, category: anime, tags: [资讯, 新番], sort: 1 } ] }这段结构里settings 是全局配置categories 和 sites 分开存放site 里的 category 填分类 id 而不是中文名排序和筛选都靠这个 id 关联。default_icon 作为兜底防止某条站点没维护图标导致卡片破相。这套数据模型定下来之后无论是纯 HTML 渲染还是 PHP 服务端渲染逻辑都是同一套。3. 从静态页面到可维护前端一个最小导航页的完整实现数据模型定下来以后就可以做页面了。这一章先把纯静态方案跑通因为 HTML 版的优势就是不依赖服务器浏览器加载 JSON 然后渲染本地打开就能看到效果。等这套跑通了第四章再把它 PHP 化前后两套渲染逻辑共用同一份 JSON 数据切换成本很低。3.1 目录结构与文件职责我第一次接手这类源码时第一步一定是整理目录。结构乱的项目后期加功能全是坑。推荐的最小目录长这样nav/ ├── index.html # 页面入口 ├── data/ │ └── sites.json # 分类与站点数据 └── assets/ ├── css/ │ └── style.css # 页面样式 └── js/ └── render.js # 加载数据并渲染卡片index.html 只负责页面骨架和静态文件引用data/sites.json 是唯一的数据源render.js 负责把 JSON 变成 DOM。后续做 PHP 版时index.php 直接替换 index.htmlrender.js 可以保留也可以去掉取决于你选择前端渲染还是后端渲染。目录名全部用英文小写不要出现中文和空格这个习惯能避免后面部署时一半资源 404。3.2 数据文件与页面骨架数据文件沿用第二章的结构这里补到两个分类、六个站点方便看到卡片分组的效果。每个站点字段保持一致icon 暂时留空渲染时会自动落到兜底图{ settings: { site_name: 萌元素导航, open_new_window: true, default_icon: assets/images/fallback.png }, categories: [ { id: anime, name: 动漫门户, sort: 1 }, { id: tool, name: 工具站点, sort: 2 } ], sites: [ { title: 站点A, url: https://example.com/a, description: 新番与资讯, icon: , category: anime, tags: [新番, 资讯], sort: 2 }, { title: 站点B, url: https://example.com/b, description: 漫画与图库, icon: , category: anime, tags: [漫画], sort: 1 }, { title: 站点C, url: https://example.com/c, description: 二次元图库, icon: , category: tool, tags: [图库], sort: 1 } ] }index.html 的骨架如下。注意 meta charset 必须放在 head 最前面否则中文标题在某些浏览器里会乱码页面所有内容区都是空容器等 render.js 填充!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title萌元素导航/title link relstylesheet hrefassets/css/style.css /head body header classnav-header h1 idsiteName萌元素导航/h1 p idsiteDesc二次元动漫风格网址导航/p /header nav classcategory-tabs idcategoryTabs/nav div classsearch-box input typetext idsearchInput placeholder搜索站点名称或标签 /div main classsite-grid idsiteGrid/main script srcassets/js/render.js/script /body /html骨架全部是空容器页面内容完全由 render.js 填充。这样做的好处是以后换数据格式或者改渲染方式只需要动 js 而不需要动 html 结构。标题里的“HTML 版”指的就是这套静态结构它与后端的 PHP 代码互不干扰。3.3 卡片渲染、分类筛选与搜索render.js 是整个静态方案的核心负责三件事加载数据、按分类筛选、按关键词搜索。代码可以直接抄但建议先读完下面的说明再往项目里放const dataFile data/sites.json; async function loadData() { try { const resp await fetch(dataFile, { cache: no-cache }); if (!resp.ok) throw new Error(HTTP resp.status); return await resp.json(); } catch (err) { document.getElementById(siteGrid).innerHTML p classerror数据加载失败请确认 data/sites.json 存在/p; throw err; } } function renderCategories(categories, sites) { const tabs document.getElementById(categoryTabs); tabs.innerHTML ; const all document.createElement(button); all.textContent 全部; all.dataset.category ; tabs.appendChild(all); categories.forEach(function(cat) { const btn document.createElement(button); btn.textContent cat.name; btn.dataset.category cat.id; tabs.appendChild(btn); }); tabs.addEventListener(click, function(e) { if (e.target.tagName ! BUTTON) return; renderSites(sites, e.target.dataset.category || ); }); } function renderSites(sites, categoryId, keyword) { const keywordLower (keyword || ).trim().toLowerCase(); const filtered sites.filter(function(site) { const matchCategory categoryId ? site.category categoryId : true; const matchKeyword keywordLower ? (site.title site.tags.join( )) .toLowerCase().indexOf(keywordLower) ! -1 : true; return matchCategory matchKeyword; }); const grid document.getElementById(siteGrid); grid.innerHTML ; if (!filtered.length) { grid.innerHTML p classempty没有符合条件的站点/p; return; } filtered.forEach(function(site) { const card document.createElement(a); card.className site-card; card.href site.url; card.target _blank; card.rel noopener noreferrer; const icon site.icon || ./assets/images/fallback.png; card.innerHTML img classsite-icon src icon alt loadinglazy h3 site.title /h3 p site.description /p; grid.appendChild(card); }); } document.addEventListener(DOMContentLoaded, async function() { const data await loadData(); document.getElementById(siteName).textContent data.settings.site_name; renderCategories(data.categories, data.sites); renderSites(data.sites, ); const searchInput document.getElementById(searchInput); let timer null; searchInput.addEventListener(input, function() { clearTimeout(timer); const keyword searchInput.value; timer setTimeout(function() { const activeTab document.querySelector(#categoryTabs .active); const categoryId activeTab ? activeTab.dataset.category : ; renderSites(data.sites, categoryId, keyword); }, 200); }); });逻辑说明loadData 用 fetch 获取 JSON失败时给出可见的错误提示而不是白屏renderCategories 生成顶部按钮点击时按分类重新渲染renderSites 同时接收分类和关键词两个条件同时生效。搜索框这里做了 200 毫秒的防抖避免每次按键都刷新整个 DOM实际体验会更跟手。参数说明分类按钮用 dataset 存分类 id点击时通过 dataset.category 读取关键词匹配时把 title 和 tags 拼在一起统一转小写搜索“新番”能同时命中标题和标签。卡片图标为空时用 fallback.png 兜底loadinglazy 让首屏只加载可见图片relnoopener noreferrer 配合 target_blank防止新打开的页面通过 window.opener 反向控制导航页。提示file:// 协议下直接双击 index.html大部分浏览器会拦截 fetch 本地 JSON。最简单的做法是从项目根目录起一个静态服务再用 localhost 访问老源码里用 jsonp 拿数据的做法本质也是为了绕开这层跨域限制。4. 把导航站做成真正的 PHP 项目动态渲染、配置分离与缓存HTML 版在本地看没问题但真挂到服务器上会遇到两个硬伤data/sites.json 会被直接下载站点列表完全暴露搜索筛选依赖浏览器执行 JS对抓取和低版本环境不友好。常见的做法是把渲染逻辑搬进 PHP让服务端输出完整页面。标题里的 PHP 指的就是这一步。导航站选 PHP 而不是 Node原因也很简单这类项目部署最简单普通虚拟主机都能跑不需要常驻进程。4.1 用 PHP 读取 JSON 渲染页面先给一个最小可用的 index.php它和第三章的 HTML 版共用同一份 sites.json但渲染发生在服务端。关键代码?php declare(strict_types1); $dataFile __DIR__ . /data/sites.json; $data json_decode((string) file_get_contents($dataFile), true); if (!is_array($data)) { http_response_code(500); exit(数据文件损坏); } $requestedCategory $_GET[category] ?? ; $requestedKeyword trim($_GET[q] ?? ); $categories $data[categories] ?? []; $sites $data[sites] ?? []; function e(string $value): string { return htmlspecialchars($value, ENT_QUOTES, UTF-8); } $filtered array_filter($sites, function ($site) use ($requestedCategory, $requestedKeyword) { $matchCategory $requestedCategory || $site[category] $requestedCategory; $matchKeyword true; if ($requestedKeyword ! ) { $text $site[title] . . implode( , $site[tags]); $matchKeyword mb_stripos($text, $requestedKeyword) ! false; } return $matchCategory $matchKeyword; }); ? !doctype html html langzh-cn head meta charsetutf-8 title? e($data[settings][site_name]) ?/title /head body nav a hrefindex.php全部/a ?php foreach ($categories as $cat): ? a hrefindex.php?category? e($cat[id]) ?? e($cat[name]) ?/a ?php endforeach; ? /nav main classsite-grid ?php foreach ($filtered as $site): ? a classsite-card href? e($site[url]) ? target_blank relnoopener noreferrer h3? e($site[title]) ?/h3 p? e($site[description]) ?/p /a ?php endforeach; ? /main /body /html逻辑说明这里把渲染全部放到服务端浏览器拿到的是完整 HTMLSEO 比纯 JS 渲染友好也绕开了 file:// 协议下的跨域限制。json_decode 的第二个参数传 true得到关联数组后续用 [] 取值更顺手。e() 函数统一做 HTML 转义站点数据里万一有引号或尖括号也不会破坏页面结构这是防 XSS 的基本功。参数说明category 参数直接匹配分类 id空字符串表示全部q 参数是搜索关键词最终通过 e() 输出到页面。mb_stripos 做大小写不敏感的多字节匹配中文搜索不会出问题。declare(strict_types1) 是 PHP 7 之后的好习惯强制函数参数严格类型匹配避免隐式转换带来的一些隐性 bug。4.2 配置分离把站点名称、备案号、搜索开关放进 config.php数据文件独立之后主题配置继续放在 sites.json 里会有个问题每次改站点名都要重新翻一遍大 JSON。常见做法是把站点级配置挪到独立的 config.php 里?php declare(strict_types1); return [ site_name 萌元素导航, site_description 二次元风格动漫导航站, open_new_window true, records 备00000000号, enable_search true, ];使用方式是在 index.php 开头加一行$config require __DIR__ . /config.php;模板里输出? e($config[site_name]) ?。这样做的价值在于配置是 PHP 数组可以写注释解释每个开关的用途站点数据和站点配置的修改频率不同分开以后维护站点的人不需要关心页面配置改配置的人也不用碰站点数据。参数说明open_new_window 是全局跳转开关个别站点需要同窗口打开时在站点记录里加一个单独的 override 字段覆盖全局配置渲染循环里优先读站点字段即可。备案号这类页面底部信息放 config 很合适因为它是全站性的改一次全部生效。4.3 页面缓存动态数据与静态输出的折中方案导航站如果只有几十条记录PHP 每次请求都读一遍 JSON 毫无压力。但放在虚拟主机上或者以后把封面图也做成接口时CPU 和 IO 消耗就会冒出来。我常用的方案是输出缓存首次访问生成一个静态 HTML 文件之后直接返回缓存文件数据变更时手动删一次缓存即可?php declare(strict_types1); $cacheFile __DIR__ . /cache/index.html; $cacheMaxAge 86400; // 24小时 if (is_file($cacheFile) (time() - filemtime($cacheFile)) $cacheMaxAge) { readfile($cacheFile); exit; } ob_start(); // 这里放原本的渲染逻辑输出页面内容 $html ob_get_clean(); file_put_contents($cacheFile, $html, LOCK_EX); echo $html;逻辑说明第一次访问时ob_start 开启输出缓冲渲染逻辑产生的 HTML 被存进缓冲区渲染结束后用 file_put_contents 写到 cache 目录之后再访问直接 readfile。这个模式特别适合导航站这类读多写少的场景站点数据一天改不了几次缓存完全可以设到小时级。缓存代码务必放在渲染逻辑全部执行完之后的位置否则生成的缓存文件会缺一半内容。参数说明cacheMaxAge 设为 86400 秒就是 24 小时。数据变更后要立刻生效手动删掉 cache/index.html 即可也可以做一个 refresh.php里面 unlink 缓存文件后跳回首页这样在手机上改完 JSON 也能马上刷新。cache 目录记得在部署时设置好写权限不少 PHP 程序卡就卡在这一步页面一片空白但日志里没有任何报错。5. 导航站源码改造与上线排查最容易翻车的 5 个坑导航站本身逻辑简单翻车基本都翻在这些边角上。说句实话这些坑没有一个是玄学全是能复现的问题。以下五条按“现象 → 原因 → 解决”的顺序列出来动手前先看一遍能省不少事。5.1 中文路径与中文 URL 编码本地能开服务器上全是 404现象在 Windows 本地双击打开一切正常传到 Linux 服务器后图片、CSS 全部 404页面还出现乱码分类名是中文的链接第一次点击能开复制到别处再打开就失效。原因本地开发时文件名用了中文或空格服务器文件系统编码与 URL 处理方式不同分类链接里的中文没有编码浏览器和服务器解码方式不一致参数就对不上了。解决项目根目录和文件路径全部用英文小写加连字符HTML 的 meta charset 放在 head 最前面分类 id 用拼音或 ASCII比如 anime、tool不要用中文当参数。输出链接时如果需要带标签参数统一用 rawurlencode 编码它会正确把中文转成 % 开头的形式而不是用加号代替空格。5.2 搜索关键词带特殊字符页面排版直接崩掉现象用户搜索%、或之后页面排版错乱甚至看到疑似注入的内容。原因关键词从 $_GET 取出来后直接拼进 HTML 或 SQL特殊字符被浏览器解释成了标签或实体。解决输出到 HTML 前一律经过 htmlspecialchars($value, ENT_QUOTES, UTF-8)以后如果接数据库查询一律用预处理语句不要用字符串拼接。搜索%本身不是攻击但如果你试过拼接 SQL就会看到它把全表都捞出来了所以这个习惯必须养成。5.3 图标和封面全部空白防盗链、跨域与混合内容现象站点卡片上的小图标全是裂图尤其是直接引用目标站 favicon 的场景部分图片地址是 http而页面是 https图标加载被浏览器拦掉。原因目标站点开启了防盗链拒绝来自导航页的请求浏览器对 https 页面加载 http 资源有混合内容拦截策略。解决图标尽量下载到本地 assets/icon 目录用本地路径实在要远程引用时在 img 标签上加 referrerpolicyno-referrer让请求不携带来源信息能绕过一部分防盗链。这个属性在 HTML 版和 PHP 版渲染时都要加属于展示层处理不影响数据内容。5.4 伪静态规则与 PHP 版本不匹配页面直接 500现象index.php 能正常访问但改成 /list/anime.html 这类伪静态地址后 404甚至直接 500。原因Apache 或 Nginx 的重写规则写错把真实存在的 PHP 文件也拦了PHP 8 之后对路径参数的处理和旧版本行为不同一部分老规则会直接失效。解决Apache 环境先确认 mod_rewrite 已开启规则里加上RewriteCond %{REQUEST_FILENAME} !-f排除真实文件Nginx 环境优先用 try_files 而不是 rewrite 到固定路径。改完配置先访问静态文件确认 Web 服务正常再测伪静态地址这样能快速定位是规则问题还是 PHP 问题。5.5 data/sites.json 被直接下载站点清单全部暴露现象别人访问 /data/sites.json就能把导航站所有站点链接和描述拖走连爬虫都不用写。原因data 目录放在 Web 根目录下静态文件没有任何访问限制。解决最稳妥的是把 data 目录移到 Web 根目录之外PHP 通过DIR的上层路径读取数据如果没法移动目录至少在 data 目录下放访问控制文件Apache 环境返回 403。推荐的做法是调整目录结构让 Web 根目录指向 public/数据文件和 config.php 都放在 public 外面这样即使服务器配置出错数据文件也不在可访问范围内。6. 一个值得做的收尾用数据校验脚本保住导航站的命导航站维护到最后真正的问题不是页面不漂亮而是 JSON 数据哪天被改坏一个字段整站白屏。我现在的习惯是先写校验脚本再谈页面。下面这个 build.php 做三件事检查必填字段、检测重复 URL、生成静态首页?php declare(strict_types1); $dataFile __DIR__ . /data/sites.json; $data json_decode((string) file_get_contents($dataFile), true); if (!is_array($data)) { fwrite(STDERR, 数据文件不是合法 JSON . PHP_EOL); exit(1); } $errors []; foreach ($data[sites] ?? [] as $index $site) { foreach ([title, url, category] as $field) { if (empty($site[$field])) { $errors[] 第 {$index} 条站点缺少字段 {$field}; } } if (!empty($site[url])) { foreach ($data[sites] as $i $other) { if ($i ! $index ($other[url] ?? ) $site[url]) { $errors[] 第 {$index} 条与第 {$i} 条 URL 重复; } } } } if ($errors) { fwrite(STDERR, implode(PHP_EOL, $errors) . PHP_EOL); exit(1); } $html !doctype htmlmeta charsetutf-8title萌元素导航/title; foreach ($data[sites] ?? [] as $site) { $html . a href . htmlspecialchars($site[url]) . . htmlspecialchars($site[title]) . /a; } file_put_contents(__DIR__ . /dist/index.html, $html); echo 校验通过已生成 dist/index.html . PHP_EOL;这里的 HTML 只做了最小输出实际项目里可以把第四章的渲染逻辑封装成 renderPage 函数复用。运行方式很简单每次改完 sites.json在终端执行php build.php。有错误会列出具体条目和原因没有错误就直接生成 dist/index.html把这个目录扔到任何静态空间都能跑这也是导航站最后最舒服的部署方式。我做过不少导航类的项目早期跳过校验直接写渲染经常因为 JSON 末尾多一个逗号让整页空白查半天才发现是数据问题。现在无论项目多小我都会先把数据校验跑通再交付。若你也要在本地复现这个方案建议按这个顺序来改 JSON → 跑校验脚本 → 刷新页面这个习惯能省掉你后面大量返工。希望帮到你。本文还有配套的精品资源点击获取 动漫导航网站源码拆解：从JSON数据建模到PHP渲染与SEO优化
简介一款专为二次元ACG爱好者打造的动漫导航网站前端源码适合个人站长、动漫社区运营者使用也可作为前端初学者的练手项目。整套源码打包为zip压缩包大小仅822KB核心文件涵盖HTML页面结构、CSS样式表与JavaScript交互脚本无需PHP后台与数据库下载后直接修改文件即可上线。站点分类模块支持展开与收起不同动漫主题的链接可分组展示点击栏目条即可折叠维护时只需编辑对应文件非常轻量。目前该模板已有13066人学习下载在同类二次元导航源码中热度较高源码目录结构清晰交互逻辑直观稍作样式改动就能移植到个人站中适合快速搭建导航环境。1. 动漫导航网站源码到底是怎样的一套东西看到“动漫导航网站源码”这个标题先别想得太复杂。它本质上就是一套以分类目录为核心的网址导航页面视觉上走萌系二次元风格技术上则是“页面模板 站点数据”的组合。这类源码流传很广常见形态是 HTML 版和 PHP 版两套并存HTML 版拿来就能开适合快速预览PHP 版把站点数据从页面里拆出来新增、修改、分类调整都不用改页面结构。适合谁想做动漫资源导航站、想学“静态页面如何转成动态数据驱动”的小开发者以及在本地折腾源码建站的同学。下面我按数据模型、静态实现、PHP 化、上线排查的顺序讲透最后给一个数据校验脚本收尾。2. 导航站的数据模型分类、站点与展示配置先于页面存在大多数导航源码之所以维护起来痛苦是因为数据一开始就写死在 HTML 标签里。要加一个站点得复制一长串卡片结构再改文字要调排序得把整块结构搬到另一个位置。被反复“精仿”的那些版本真正赢在数据文件独立改链接不用动页面。所以动手写页面之前先把数据模型立住后面的路会顺很多。2.1 导航站的三个核心数据对象分类、站点与标签分类是导航站的骨架对应页面顶部的栏目按钮比如“动漫门户”“新番资讯”“工具站点”。分类必须有一个稳定的 id因为所有链接和筛选逻辑都用 id 做参数而不是中文名。sort 字段控制栏目的排序数值小的排前面这个约定越早定下来越好。站点是导航站真正有业务价值的部分链接到哪、标题叫什么、简介怎么写、图标从哪来。站点的字段设计直接影响后续维护成本。我通常要求每条站点记录至少包含 title、url、description、category、sort 这五个字段icon 属于锦上添花没有就用兜底图。标签的作用是横向筛选比如“新番”“合集”“图库”。一个站点可以挂多个标签但分类只能有一个这是两者最本质的区别。设计数据时不要把标签做成单个字符串尽量用数组后面做搜索匹配会省很多事。最常见的误用是把站点直接嵌套进分类数组里写起来直观但一旦要加标签筛选或全局搜索就得把嵌套结构拆开重排。我惯用的方案是扁平结构站点表里只存一个 category 字段通过它关联分类 id。加需求时扁平结构改一个字段就行嵌套结构往往要动整个数据文件。2.2 用 JSON 做数据源为什么这类源码偏爱 JSON导航站的数据量通常不大几百条站点记录JSON 文件读进来也就是几十毫秒完全没必要上数据库。这里把三种方案放在一起对比选型理由会更清楚方案优点缺点纯 HTML 硬编码零依赖双击能开新增和排序都要改大段结构容易改错JSON 数据文件JS、PHP 都能直接读Git 可追踪改错能回滚不适合并发写多用户编辑麻烦MySQL / SQLite支持后台管理、多用户提交、点击统计部署成本高纯粹为导航站引入数据库是杀鸡用牛刀个人维护的导航站JSON 是最优选这也是这类源码偏爱 JSON 的根本原因。它同时能被前端 fetch 和后端 file_get_contents 读取一份数据两头用不需要转换层。JSON 的边界要清楚它不适合并发写。如果你打算做一个用户能自行提交站点的导航站就必须换数据库否则两个人同时写文件后写的人会直接覆盖前一个人的数据。另外 JSON 文件一旦格式损坏整个页面都会挂所以第六章我会给一个数据校验脚本这是吃了不少亏之后沉淀下来的习惯。2.3 展示配置排序、图标、封面与跳转规则站点卡片的字段建议固定下来不常用的字段可以预留但不要滥用title、url、description、icon、category、tags、sort、target。icon 可以填本地图片路径也可以填目标站点的 favicon 地址。我习惯优先用本地图标目录理由就一条对方站点的 favicon 随时可能因为防盗链策略失效到时候整个导航页全是裂图。封面和图标是两个概念别混在一起。封面 cover 是给推荐位或大图 Banner 用的卡片列表里用小图标就够了。很多源码把封面大图当图标用结果一个页面塞了几十张几百 KB 的图加载慢得让人直接关掉页面。跳转规则方面导航站通常统一新窗口打开并加上 relnoopener noreferrer。这条规则不要散落在每条站点记录里而是放进全局配置个别需要同窗口打开的站点再单独覆盖字段。下面给一个最小但完整的 JSON 结构后面的实现都基于它{ settings: { site_name: 萌元素导航, description: 一个二次元风格的动漫导航站, open_new_window: true, default_icon: assets/images/fallback.png }, categories: [ { id: anime, name: 动漫门户, sort: 1 }, { id: tool, name: 工具站点, sort: 2 } ], sites: [ { title: 示例动漫站, url: https://example.com/, description: 动漫资讯与番剧更新, icon: assets/images/anime.png, category: anime, tags: [资讯, 新番], sort: 1 } ] }这段结构里settings 是全局配置categories 和 sites 分开存放site 里的 category 填分类 id 而不是中文名排序和筛选都靠这个 id 关联。default_icon 作为兜底防止某条站点没维护图标导致卡片破相。这套数据模型定下来之后无论是纯 HTML 渲染还是 PHP 服务端渲染逻辑都是同一套。3. 从静态页面到可维护前端一个最小导航页的完整实现数据模型定下来以后就可以做页面了。这一章先把纯静态方案跑通因为 HTML 版的优势就是不依赖服务器浏览器加载 JSON 然后渲染本地打开就能看到效果。等这套跑通了第四章再把它 PHP 化前后两套渲染逻辑共用同一份 JSON 数据切换成本很低。3.1 目录结构与文件职责我第一次接手这类源码时第一步一定是整理目录。结构乱的项目后期加功能全是坑。推荐的最小目录长这样nav/ ├── index.html # 页面入口 ├── data/ │ └── sites.json # 分类与站点数据 └── assets/ ├── css/ │ └── style.css # 页面样式 └── js/ └── render.js # 加载数据并渲染卡片index.html 只负责页面骨架和静态文件引用data/sites.json 是唯一的数据源render.js 负责把 JSON 变成 DOM。后续做 PHP 版时index.php 直接替换 index.htmlrender.js 可以保留也可以去掉取决于你选择前端渲染还是后端渲染。目录名全部用英文小写不要出现中文和空格这个习惯能避免后面部署时一半资源 404。3.2 数据文件与页面骨架数据文件沿用第二章的结构这里补到两个分类、六个站点方便看到卡片分组的效果。每个站点字段保持一致icon 暂时留空渲染时会自动落到兜底图{ settings: { site_name: 萌元素导航, open_new_window: true, default_icon: assets/images/fallback.png }, categories: [ { id: anime, name: 动漫门户, sort: 1 }, { id: tool, name: 工具站点, sort: 2 } ], sites: [ { title: 站点A, url: https://example.com/a, description: 新番与资讯, icon: , category: anime, tags: [新番, 资讯], sort: 2 }, { title: 站点B, url: https://example.com/b, description: 漫画与图库, icon: , category: anime, tags: [漫画], sort: 1 }, { title: 站点C, url: https://example.com/c, description: 二次元图库, icon: , category: tool, tags: [图库], sort: 1 } ] }index.html 的骨架如下。注意 meta charset 必须放在 head 最前面否则中文标题在某些浏览器里会乱码页面所有内容区都是空容器等 render.js 填充!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title萌元素导航/title link relstylesheet hrefassets/css/style.css /head body header classnav-header h1 idsiteName萌元素导航/h1 p idsiteDesc二次元动漫风格网址导航/p /header nav classcategory-tabs idcategoryTabs/nav div classsearch-box input typetext idsearchInput placeholder搜索站点名称或标签 /div main classsite-grid idsiteGrid/main script srcassets/js/render.js/script /body /html骨架全部是空容器页面内容完全由 render.js 填充。这样做的好处是以后换数据格式或者改渲染方式只需要动 js 而不需要动 html 结构。标题里的“HTML 版”指的就是这套静态结构它与后端的 PHP 代码互不干扰。3.3 卡片渲染、分类筛选与搜索render.js 是整个静态方案的核心负责三件事加载数据、按分类筛选、按关键词搜索。代码可以直接抄但建议先读完下面的说明再往项目里放const dataFile data/sites.json; async function loadData() { try { const resp await fetch(dataFile, { cache: no-cache }); if (!resp.ok) throw new Error(HTTP resp.status); return await resp.json(); } catch (err) { document.getElementById(siteGrid).innerHTML p classerror数据加载失败请确认 data/sites.json 存在/p; throw err; } } function renderCategories(categories, sites) { const tabs document.getElementById(categoryTabs); tabs.innerHTML ; const all document.createElement(button); all.textContent 全部; all.dataset.category ; tabs.appendChild(all); categories.forEach(function(cat) { const btn document.createElement(button); btn.textContent cat.name; btn.dataset.category cat.id; tabs.appendChild(btn); }); tabs.addEventListener(click, function(e) { if (e.target.tagName ! BUTTON) return; renderSites(sites, e.target.dataset.category || ); }); } function renderSites(sites, categoryId, keyword) { const keywordLower (keyword || ).trim().toLowerCase(); const filtered sites.filter(function(site) { const matchCategory categoryId ? site.category categoryId : true; const matchKeyword keywordLower ? (site.title site.tags.join( )) .toLowerCase().indexOf(keywordLower) ! -1 : true; return matchCategory matchKeyword; }); const grid document.getElementById(siteGrid); grid.innerHTML ; if (!filtered.length) { grid.innerHTML p classempty没有符合条件的站点/p; return; } filtered.forEach(function(site) { const card document.createElement(a); card.className site-card; card.href site.url; card.target _blank; card.rel noopener noreferrer; const icon site.icon || ./assets/images/fallback.png; card.innerHTML img classsite-icon src icon alt loadinglazy h3 site.title /h3 p site.description /p; grid.appendChild(card); }); } document.addEventListener(DOMContentLoaded, async function() { const data await loadData(); document.getElementById(siteName).textContent data.settings.site_name; renderCategories(data.categories, data.sites); renderSites(data.sites, ); const searchInput document.getElementById(searchInput); let timer null; searchInput.addEventListener(input, function() { clearTimeout(timer); const keyword searchInput.value; timer setTimeout(function() { const activeTab document.querySelector(#categoryTabs .active); const categoryId activeTab ? activeTab.dataset.category : ; renderSites(data.sites, categoryId, keyword); }, 200); }); });逻辑说明loadData 用 fetch 获取 JSON失败时给出可见的错误提示而不是白屏renderCategories 生成顶部按钮点击时按分类重新渲染renderSites 同时接收分类和关键词两个条件同时生效。搜索框这里做了 200 毫秒的防抖避免每次按键都刷新整个 DOM实际体验会更跟手。参数说明分类按钮用 dataset 存分类 id点击时通过 dataset.category 读取关键词匹配时把 title 和 tags 拼在一起统一转小写搜索“新番”能同时命中标题和标签。卡片图标为空时用 fallback.png 兜底loadinglazy 让首屏只加载可见图片relnoopener noreferrer 配合 target_blank防止新打开的页面通过 window.opener 反向控制导航页。提示file:// 协议下直接双击 index.html大部分浏览器会拦截 fetch 本地 JSON。最简单的做法是从项目根目录起一个静态服务再用 localhost 访问老源码里用 jsonp 拿数据的做法本质也是为了绕开这层跨域限制。4. 把导航站做成真正的 PHP 项目动态渲染、配置分离与缓存HTML 版在本地看没问题但真挂到服务器上会遇到两个硬伤data/sites.json 会被直接下载站点列表完全暴露搜索筛选依赖浏览器执行 JS对抓取和低版本环境不友好。常见的做法是把渲染逻辑搬进 PHP让服务端输出完整页面。标题里的 PHP 指的就是这一步。导航站选 PHP 而不是 Node原因也很简单这类项目部署最简单普通虚拟主机都能跑不需要常驻进程。4.1 用 PHP 读取 JSON 渲染页面先给一个最小可用的 index.php它和第三章的 HTML 版共用同一份 sites.json但渲染发生在服务端。关键代码?php declare(strict_types1); $dataFile __DIR__ . /data/sites.json; $data json_decode((string) file_get_contents($dataFile), true); if (!is_array($data)) { http_response_code(500); exit(数据文件损坏); } $requestedCategory $_GET[category] ?? ; $requestedKeyword trim($_GET[q] ?? ); $categories $data[categories] ?? []; $sites $data[sites] ?? []; function e(string $value): string { return htmlspecialchars($value, ENT_QUOTES, UTF-8); } $filtered array_filter($sites, function ($site) use ($requestedCategory, $requestedKeyword) { $matchCategory $requestedCategory || $site[category] $requestedCategory; $matchKeyword true; if ($requestedKeyword ! ) { $text $site[title] . . implode( , $site[tags]); $matchKeyword mb_stripos($text, $requestedKeyword) ! false; } return $matchCategory $matchKeyword; }); ? !doctype html html langzh-cn head meta charsetutf-8 title? e($data[settings][site_name]) ?/title /head body nav a hrefindex.php全部/a ?php foreach ($categories as $cat): ? a hrefindex.php?category? e($cat[id]) ?? e($cat[name]) ?/a ?php endforeach; ? /nav main classsite-grid ?php foreach ($filtered as $site): ? a classsite-card href? e($site[url]) ? target_blank relnoopener noreferrer h3? e($site[title]) ?/h3 p? e($site[description]) ?/p /a ?php endforeach; ? /main /body /html逻辑说明这里把渲染全部放到服务端浏览器拿到的是完整 HTMLSEO 比纯 JS 渲染友好也绕开了 file:// 协议下的跨域限制。json_decode 的第二个参数传 true得到关联数组后续用 [] 取值更顺手。e() 函数统一做 HTML 转义站点数据里万一有引号或尖括号也不会破坏页面结构这是防 XSS 的基本功。参数说明category 参数直接匹配分类 id空字符串表示全部q 参数是搜索关键词最终通过 e() 输出到页面。mb_stripos 做大小写不敏感的多字节匹配中文搜索不会出问题。declare(strict_types1) 是 PHP 7 之后的好习惯强制函数参数严格类型匹配避免隐式转换带来的一些隐性 bug。4.2 配置分离把站点名称、备案号、搜索开关放进 config.php数据文件独立之后主题配置继续放在 sites.json 里会有个问题每次改站点名都要重新翻一遍大 JSON。常见做法是把站点级配置挪到独立的 config.php 里?php declare(strict_types1); return [ site_name 萌元素导航, site_description 二次元风格动漫导航站, open_new_window true, records 备00000000号, enable_search true, ];使用方式是在 index.php 开头加一行$config require __DIR__ . /config.php;模板里输出? e($config[site_name]) ?。这样做的价值在于配置是 PHP 数组可以写注释解释每个开关的用途站点数据和站点配置的修改频率不同分开以后维护站点的人不需要关心页面配置改配置的人也不用碰站点数据。参数说明open_new_window 是全局跳转开关个别站点需要同窗口打开时在站点记录里加一个单独的 override 字段覆盖全局配置渲染循环里优先读站点字段即可。备案号这类页面底部信息放 config 很合适因为它是全站性的改一次全部生效。4.3 页面缓存动态数据与静态输出的折中方案导航站如果只有几十条记录PHP 每次请求都读一遍 JSON 毫无压力。但放在虚拟主机上或者以后把封面图也做成接口时CPU 和 IO 消耗就会冒出来。我常用的方案是输出缓存首次访问生成一个静态 HTML 文件之后直接返回缓存文件数据变更时手动删一次缓存即可?php declare(strict_types1); $cacheFile __DIR__ . /cache/index.html; $cacheMaxAge 86400; // 24小时 if (is_file($cacheFile) (time() - filemtime($cacheFile)) $cacheMaxAge) { readfile($cacheFile); exit; } ob_start(); // 这里放原本的渲染逻辑输出页面内容 $html ob_get_clean(); file_put_contents($cacheFile, $html, LOCK_EX); echo $html;逻辑说明第一次访问时ob_start 开启输出缓冲渲染逻辑产生的 HTML 被存进缓冲区渲染结束后用 file_put_contents 写到 cache 目录之后再访问直接 readfile。这个模式特别适合导航站这类读多写少的场景站点数据一天改不了几次缓存完全可以设到小时级。缓存代码务必放在渲染逻辑全部执行完之后的位置否则生成的缓存文件会缺一半内容。参数说明cacheMaxAge 设为 86400 秒就是 24 小时。数据变更后要立刻生效手动删掉 cache/index.html 即可也可以做一个 refresh.php里面 unlink 缓存文件后跳回首页这样在手机上改完 JSON 也能马上刷新。cache 目录记得在部署时设置好写权限不少 PHP 程序卡就卡在这一步页面一片空白但日志里没有任何报错。5. 导航站源码改造与上线排查最容易翻车的 5 个坑导航站本身逻辑简单翻车基本都翻在这些边角上。说句实话这些坑没有一个是玄学全是能复现的问题。以下五条按“现象 → 原因 → 解决”的顺序列出来动手前先看一遍能省不少事。5.1 中文路径与中文 URL 编码本地能开服务器上全是 404现象在 Windows 本地双击打开一切正常传到 Linux 服务器后图片、CSS 全部 404页面还出现乱码分类名是中文的链接第一次点击能开复制到别处再打开就失效。原因本地开发时文件名用了中文或空格服务器文件系统编码与 URL 处理方式不同分类链接里的中文没有编码浏览器和服务器解码方式不一致参数就对不上了。解决项目根目录和文件路径全部用英文小写加连字符HTML 的 meta charset 放在 head 最前面分类 id 用拼音或 ASCII比如 anime、tool不要用中文当参数。输出链接时如果需要带标签参数统一用 rawurlencode 编码它会正确把中文转成 % 开头的形式而不是用加号代替空格。5.2 搜索关键词带特殊字符页面排版直接崩掉现象用户搜索%、或之后页面排版错乱甚至看到疑似注入的内容。原因关键词从 $_GET 取出来后直接拼进 HTML 或 SQL特殊字符被浏览器解释成了标签或实体。解决输出到 HTML 前一律经过 htmlspecialchars($value, ENT_QUOTES, UTF-8)以后如果接数据库查询一律用预处理语句不要用字符串拼接。搜索%本身不是攻击但如果你试过拼接 SQL就会看到它把全表都捞出来了所以这个习惯必须养成。5.3 图标和封面全部空白防盗链、跨域与混合内容现象站点卡片上的小图标全是裂图尤其是直接引用目标站 favicon 的场景部分图片地址是 http而页面是 https图标加载被浏览器拦掉。原因目标站点开启了防盗链拒绝来自导航页的请求浏览器对 https 页面加载 http 资源有混合内容拦截策略。解决图标尽量下载到本地 assets/icon 目录用本地路径实在要远程引用时在 img 标签上加 referrerpolicyno-referrer让请求不携带来源信息能绕过一部分防盗链。这个属性在 HTML 版和 PHP 版渲染时都要加属于展示层处理不影响数据内容。5.4 伪静态规则与 PHP 版本不匹配页面直接 500现象index.php 能正常访问但改成 /list/anime.html 这类伪静态地址后 404甚至直接 500。原因Apache 或 Nginx 的重写规则写错把真实存在的 PHP 文件也拦了PHP 8 之后对路径参数的处理和旧版本行为不同一部分老规则会直接失效。解决Apache 环境先确认 mod_rewrite 已开启规则里加上RewriteCond %{REQUEST_FILENAME} !-f排除真实文件Nginx 环境优先用 try_files 而不是 rewrite 到固定路径。改完配置先访问静态文件确认 Web 服务正常再测伪静态地址这样能快速定位是规则问题还是 PHP 问题。5.5 data/sites.json 被直接下载站点清单全部暴露现象别人访问 /data/sites.json就能把导航站所有站点链接和描述拖走连爬虫都不用写。原因data 目录放在 Web 根目录下静态文件没有任何访问限制。解决最稳妥的是把 data 目录移到 Web 根目录之外PHP 通过DIR的上层路径读取数据如果没法移动目录至少在 data 目录下放访问控制文件Apache 环境返回 403。推荐的做法是调整目录结构让 Web 根目录指向 public/数据文件和 config.php 都放在 public 外面这样即使服务器配置出错数据文件也不在可访问范围内。6. 一个值得做的收尾用数据校验脚本保住导航站的命导航站维护到最后真正的问题不是页面不漂亮而是 JSON 数据哪天被改坏一个字段整站白屏。我现在的习惯是先写校验脚本再谈页面。下面这个 build.php 做三件事检查必填字段、检测重复 URL、生成静态首页?php declare(strict_types1); $dataFile __DIR__ . /data/sites.json; $data json_decode((string) file_get_contents($dataFile), true); if (!is_array($data)) { fwrite(STDERR, 数据文件不是合法 JSON . PHP_EOL); exit(1); } $errors []; foreach ($data[sites] ?? [] as $index $site) { foreach ([title, url, category] as $field) { if (empty($site[$field])) { $errors[] 第 {$index} 条站点缺少字段 {$field}; } } if (!empty($site[url])) { foreach ($data[sites] as $i $other) { if ($i ! $index ($other[url] ?? ) $site[url]) { $errors[] 第 {$index} 条与第 {$i} 条 URL 重复; } } } } if ($errors) { fwrite(STDERR, implode(PHP_EOL, $errors) . PHP_EOL); exit(1); } $html !doctype htmlmeta charsetutf-8title萌元素导航/title; foreach ($data[sites] ?? [] as $site) { $html . a href . htmlspecialchars($site[url]) . . htmlspecialchars($site[title]) . /a; } file_put_contents(__DIR__ . /dist/index.html, $html); echo 校验通过已生成 dist/index.html . PHP_EOL;这里的 HTML 只做了最小输出实际项目里可以把第四章的渲染逻辑封装成 renderPage 函数复用。运行方式很简单每次改完 sites.json在终端执行php build.php。有错误会列出具体条目和原因没有错误就直接生成 dist/index.html把这个目录扔到任何静态空间都能跑这也是导航站最后最舒服的部署方式。我做过不少导航类的项目早期跳过校验直接写渲染经常因为 JSON 末尾多一个逗号让整页空白查半天才发现是数据问题。现在无论项目多小我都会先把数据校验跑通再交付。若你也要在本地复现这个方案建议按这个顺序来改 JSON → 跑校验脚本 → 刷新页面这个习惯能省掉你后面大量返工。希望帮到你。本文还有配套的精品资源点击获取