导航网站源码怎么搭建：从页面结构到数据管理

导航网站看起来只是把一组链接排成卡片，真正动手时却会遇到不少实际问题：页面结构如何组织，分类和搜索怎样实现，链接数据放在哪里，用户提交的网址是否可信，以及静态页面发布后该如何更新。本文从一个不依赖框架的最小可运行项目开始，逐步搭建页面、数据和交互，并说明它适合什么场景、不适合承担什么责任。

示例使用原生 HTML、CSS 和 JavaScript，不需要安装第三方依赖。完成后，页面可以按分类筛选导航项、搜索名称和描述，并在渲染前检查链接格式。它适合个人书签页、团队内部的公开资源目录、静态站点原型等场景。它不是带用户系统和权限控制的后台，也不会自动提供数据审核、云端同步或访问统计。

一、先划定适用场景和功能边界

在写代码之前，先明确导航站要服务谁、由谁维护数据。只有少量固定链接、维护者是一两个人时，直接编辑 JSON 或 JavaScript 数据文件通常最省事。若需要多人登录、角色权限、提交审核、操作记录、批量导入和定时检测，就需要后端服务或成熟的内容管理系统，不能把浏览器里的隐藏按钮当作权限控制。

• 适合静态实现：个人主页、公开资源索引、小型团队手册入口、活动资料导航，以及用于验证信息架构的原型。
• 需要后端或平台支持：公开用户投稿、管理员登录、权限分级、审核流程、持久化编辑、操作审计和大规模数据管理。
• 不要默认承诺：链接永久可用、目标网站内容安全、数据自动同步、用户隐私受保护或搜索引擎必然收录。上述能力都需要额外设计和验证。

还有一个容易忽略的边界：导航站展示外部链接，不等于替目标网站背书。链接可能失效、跳转到其他地址，甚至指向恶意内容。维护者应制定收录规则，并为用户说明链接来自哪里；如果允许投稿，还要加入人工审核和滥用处理流程。

二、准备项目文件

新建一个目录，例如 simple-nav，在其中放置以下文件。示例没有构建步骤，也没有 npm 依赖，因此可以直接通过本地静态服务器运行。

simple-nav/
├── index.html
├── styles.css
├── data.js
└── app.js

浏览器以文件协议直接打开页面，有时会因为浏览器的本地文件访问策略而限制脚本加载。建议启动一个本地 HTTP 服务。在项目目录中运行：

python -m http.server 8000

然后访问 http://localhost:8000。如果系统使用的是 Python 3，通常可以使用以上命令；若命令不可用，应先检查本机 Python 安装和命令名称。也可以用其他本地静态服务器。部署到静态托管平台时，上传这些文件即可，具体发布方式取决于平台。

三、编写页面结构

页面结构只负责提供输入框、分类区域和结果容器。内容稍后由 JavaScript 根据数据生成。这样能让页面骨架和链接数据分开，也便于调整样式。把下面内容保存为 index.html：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="按分类整理常用网站和工具入口。">
  <title>常用网址导航</title>
  <link rel="stylesheet" href="./styles.css">
  <script src="./data.js" defer></script>
  <script src="./app.js" defer></script>
</head>
<body>
  <header class="page-header">
    <p class="eyebrow">LINK DIRECTORY</p>
    <h1>常用网址导航</h1>
    <p>按类别查找经过整理的网站与工具。</p>
    <label class="search-label" for="search-input">搜索导航项</label>
    <input
      id="search-input"
      type="search"
      placeholder="输入名称、描述或分类"
      autocomplete="off"
    >
  </header>

  <main>
    <nav id="category-list" class="category-list"
         aria-label="导航分类"></nav>
    <p id="result-status" class="result-status"
       aria-live="polite"></p>
    <section id="link-list" class="link-list"
             aria-label="导航链接"></section>
  </main>

  <footer class="page-footer">
    <p>链接仅作导航入口，访问前请确认目标网站与地址。</p>
  </footer>
</body>
</html>

这里使用了语义化的 header、main、nav 和 section。搜索框有对应的 label，结果状态使用 aria-live，方便辅助技术感知结果变化。它们不会自动让页面满足所有无障碍要求，但为键盘操作和屏幕阅读器提供了更好的基础。

四、设计可维护的数据格式

导航数据应尽量采用稳定、容易检查的字段。下面示例将数据放在单独的 data.js 文件中，并挂在一个全局变量上，供无构建步骤的浏览器项目读取。实际项目可以按团队习惯改成 JSON 文件、模块或后端接口；关键是字段含义一致，并为数据变更保留清晰流程。

window.NAV_ITEMS = [
  {
    id: "docs-mdn",
    title: "MDN Web Docs",
    description: "Web 平台技术文档与参考资料",
    category: "开发",
    url: "https://developer.mozilla.org/"
  },
  {
    id: "docs-whatwg",
    title: "WHATWG",
    description: "Web 标准相关资料",
    category: "开发",
    url: "https://whatwg.org/"
  },
  {
    id: "tools-github",
    title: "GitHub",
    description: "代码托管与协作平台",
    category: "开发",
    url: "https://github.com/"
  },
  {
    id: "design-color",
    title: "Color contrast checker",
    description: "检查前景色和背景色的对比度",
    category: "设计",
    url: "https://webaim.org/resources/contrastchecker/"
  },
  {
    id: "reference-wikipedia",
    title: "维基百科",
    description: "在线百科全书",
    category: "参考",
    url: "https://www.wikipedia.org/"
  }
];

每条记录使用稳定的 id，不要把数组序号当成永久标识：排序或插入数据后，序号会改变。title 是展示名称，description 是简短说明，category 用于分组筛选，url 是目标地址。数据规模扩大后，可再增加图标、维护者、更新时间等字段；不要为了未来可能用到的功能预先堆积无定义的字段。

此处的 window.NAV_ITEMS 适合简单的静态页面，不等于数据库，也不提供版本冲突处理。多人同时编辑时，建议用代码仓库审核变更，或者迁移到具备权限和审计能力的数据管理系统。

五、实现搜索、分类和安全渲染

下面的脚本完成四件事：读取并检查数据、生成分类按钮、根据关键词和类别过滤记录，以及生成链接卡片。将代码保存为 app.js：

const items = Array.isArray(window.NAV_ITEMS)
  ? window.NAV_ITEMS
  : [];

const categoryList = document.querySelector("#category-list");
const linkList = document.querySelector("#link-list");
const searchInput = document.querySelector("#search-input");
const resultStatus = document.querySelector("#result-status");

let activeCategory = "全部";

function normalizeText(value) {
  return String(value ?? "").trim().toLocaleLowerCase();
}

function getSafeHttpUrl(value) {
  if (typeof value !== "string" || value.length === 0) {
    return null;
  }

  try {
    const url = new URL(value);
    if (url.protocol !== "https:" && url.protocol !== "http:") {
      return null;
    }
    if (url.username || url.password) {
      return null;
    }
    return url.href;
  } catch {
    return null;
  }
}

function getValidItems() {
  return items.filter((item) =>
    item &&
    typeof item.id === "string" &&
    typeof item.title === "string" &&
    typeof item.description === "string" &&
    typeof item.category === "string" &&
    getSafeHttpUrl(item.url)
  );
}

const validItems = getValidItems();

function makeCategoryButton(category) {
  const button = document.createElement("button");
  button.type = "button";
  button.className = "category-button";
  button.textContent = category;
  button.setAttribute(
    "aria-pressed",
    String(category === activeCategory)
  );

  button.addEventListener("click", () => {
    activeCategory = category;
    renderCategories();
    renderLinks();
  });

  return button;
}

function renderCategories() {
  categoryList.replaceChildren();

  const categories = [
    "全部",
    ...new Set(validItems.map((item) => item.category))
  ];

  for (const category of categories) {
    categoryList.append(makeCategoryButton(category));
  }
}

function renderLinks() {
  const query = normalizeText(searchInput.value);

  const filtered = validItems.filter((item) => {
    const matchesCategory =
      activeCategory === "全部" ||
      item.category === activeCategory;

    const searchableText = normalizeText(
      [item.title, item.description, item.category].join(" ")
    );

    return matchesCategory && searchableText.includes(query);
  });

  linkList.replaceChildren();

  for (const item of filtered) {
    const article = document.createElement("article");
    article.className = "link-card";

    const link = document.createElement("a");
    link.className = "link-card__title";
    link.href = getSafeHttpUrl(item.url);
    link.target = "_blank";
    link.rel = "noopener noreferrer";
    link.textContent = item.title;

    const description = document.createElement("p");
    description.textContent = item.description;

    const category = document.createElement("span");
    category.className = "link-card__category";
    category.textContent = item.category;

    article.append(link, description, category);
    linkList.append(article);
  }

  resultStatus.textContent =
    filtered.length === 0
      ? "没有找到匹配的导航项。"
      : `找到 ${filtered.length} 个导航项。`;
}

searchInput.addEventListener("input", renderLinks);

renderCategories();
renderLinks();

链接校验使用浏览器的 URL 解析器，并且只接受 http: 和 https:。这能排除无法解析的地址、javascript: 等非 HTTP(S) 协议，以及带用户名或密码部分的 URL。它只是针对当前导航链接字段的格式筛选，不代表目标网站可信、不会重定向、没有恶意内容，也不能替代服务器端校验。

脚本通过 textContent 写入名称和描述，而不是把数据拼成 HTML 字符串后使用 innerHTML。因此，数据里出现类似标签的文本会作为文本展示，不会被当作页面标记解析。这是避免常见 HTML 注入问题的基本做法；如果将来需要支持富文本，必须采用经过验证的消毒方案，而不是直接信任投稿内容。

卡片在新标签页打开，并设置 rel="noopener noreferrer"。其中 noopener 用于切断新页面通过 window.opener 操作原页面的关系，noreferrer 会抑制引用来源信息。是否需要隐藏来源信息，应结合产品需求和隐私要求决定。单靠这一属性仍不能判断目标站点是否安全。

六、添加基础样式

将以下内容保存为 styles.css。布局使用 CSS Grid 自动适配卡片宽度，不需要为每种屏幕尺寸写固定列数。需要更换颜色或字体时，优先调整变量，避免在多个选择器里重复修改。

:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #202534;
  background: #f5f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 24px;
}

.page-header {
  padding: 36px 0 24px;
}

.eyebrow {
  color: #59677f;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

h1 {
  margin: 8px 0;
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.search-label {
  display: block;
  margin: 24px 0 8px;
  font-weight: 600;
}

#search-input {
  width: min(100%, 620px);
  padding: 12px 14px;
  border: 1px solid #cbd2df;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.category-button {
  padding: 8px 12px;
  border: 1px solid #cbd2df;
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.category-button[aria-pressed="true"] {
  border-color: #3158b8;
  background: #3158b8;
  color: #fff;
}

.category-button:focus-visible,
#search-input:focus-visible,
.link-card a:focus-visible {
  outline: 3px solid #f0a202;
  outline-offset: 3px;
}

.result-status {
  min-height: 1.5em;
  color: #59677f;
}

.link-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.link-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e0e5ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgb(28 42 70 / 5%);
}

.link-card__title {
  color: #244a9b;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.link-card p {
  color: #59677f;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.link-card__category {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: #edf1f8;
  color: #44516a;
  font-size: 0.85rem;
}

.page-footer {
  margin-top: 36px;
  color: #59677f;
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

样式中的 minmax(min(100%, 240px), 1fr) 让卡片列在窄屏上不强行溢出；如果项目需要支持较旧浏览器，可根据目标浏览器范围调整写法并实际测试。焦点样式用于提示键盘当前所在位置，不建议为了视觉简洁而完全移除。

七、运行后如何维护数据

打开页面后，可以输入关键词，也可以点击分类按钮。搜索范围包括名称、描述和分类，不区分大小写；空关键词会显示当前分类下的全部记录。若筛选结果为空，页面会显示提示，而不是留下空白区域。

增加一条记录时，在 data.js 的数组中追加对象，并为它设置唯一的 id、合适的分类、简明描述和完整网址。保存后刷新页面即可看到变化。删除记录时直接移除对应对象。对于多人维护的项目，建议每次变更都检查以下事项：

1. 名称是否准确，描述是否说明链接用途，而非只重复网站名称。
2. 分类是否复用已有分类；避免同一含义出现“开发”“编程”“开发工具”等多个近似分类。
3. 地址是否为规范的 HTTPS 或 HTTP 地址，复制时有无空格、拼写错误或意外跳转链接。
4. id 是否唯一。当前示例没有自动检测重复 ID；若后续按 ID 更新或删除数据，应加入重复检查。
5. 该站点是否值得收录，是否需要标明来源、运营主体或更新时间。

项目规模较小时，数据文件易于阅读和审查。达到数百条乃至更多记录后，人工编辑会变得容易出错，可以将数据改为独立 JSON、表格导入流程或内容管理系统。迁移前先确定必填字段、字段类型、重复项处理方式和导入失败时的回滚方案，不要只因为数据“看起来像表格”就假设任何 CSV 都能无损转换。

八、公开投稿与后台管理的安全边界

静态数据文件会随页面资源一起交付给访问者，任何人都可以通过浏览器查看它。即使页面上不展示某个字段，也不能把它当作机密存储。不要把 API 密钥、私人访问令牌、内部凭据或不应公开的员工信息写进前端文件。

同样，前端代码里的“管理员密码”、隐藏管理入口或仅在页面上显示的权限按钮，不能保护数据。用户可以查看和修改自己浏览器中的代码与请求。真正的写入权限必须由可信的服务器端验证，并且要考虑认证、授权、输入校验、速率限制、日志和备份等问题。具体做法取决于部署环境和威胁模型，不能用一段客户端代码代替安全设计。

如果要开放投稿，至少应把提交内容视为不可信输入：限制字段类型和长度，拒绝不支持的协议，进行审核或反滥用处理，避免直接渲染用户提供的 HTML，并考虑垃圾内容与钓鱼链接。URL 格式正确只说明它符合某种地址语法，不说明网站可靠。也不要把“访问链接并检查页面内容”随意放到服务器上执行：自动抓取可能引入服务器端请求伪造、恶意文件和资源消耗等风险，需要单独设计受限的抓取服务。

九、常见错误及排查方法

1. 页面有框架，卡片却没有显示

先确认 data.js 和 app.js 的文件名、相对路径与大小写是否一致。然后打开浏览器开发者工具查看控制台：若出现加载失败、语法错误或 NAV_ITEMS 未定义，通常能定位到脚本路径、代码拼写或脚本加载顺序问题。示例用 defer 加载脚本，且先加载数据文件，顺序不要颠倒。

2. 链接点击后没有打开

检查数据里的 URL 是否是包含协议的完整地址，例如 https://example.com/。当前校验不会接受 javascript:、mailto: 或仅有域名而没有协议的值。若产品需要邮箱入口，应为它定义明确的字段和渲染规则，而不是降低 HTTP(S) 链接校验。

3. 数据内容变成了奇怪的标签或执行代码

不要把数据拼成 HTML 字符串传给 innerHTML。本例使用 createElement 和 textContent，普通文本不会被解释为 HTML。更复杂的富文本需求应单独评估消毒库、允许标签范围和链接处理，并保持依赖更新。

4. 分类越来越多，用户找不到入口

分类数量不是越多越好。为类别制定命名规则，合并含义相近的分类，并定期检查长期没有内容或无法解释的分类。若条目具有多个主题，可以扩展为标签数组，但需要明确分类与标签的差异，并调整筛选逻辑，不能只改数据字段名称。

5. 以为链接检查能保证网站安全

本例只校验 URL 是否可解析、协议是否为 HTTP(S)，不访问目标站点，不验证证书状态，不检查页面内容，也不追踪重定向。因此它不能证明链接安全或可用。链接可用性监测需要额外服务和明确的请求策略，同时要控制访问频率、超时和目标范围。

十、部署前检查清单

发布之前，分别在桌面和手机尺寸下打开页面，确认搜索、分类切换、空结果状态和键盘焦点都正常；通过浏览器开发者工具检查资源加载和控制台错误；逐条抽查目标链接；确认数据文件没有秘密信息；检查页面标题、描述和版权、来源说明是否符合项目要求。

静态托管适合发布这类纯前端页面，但不同托管平台的域名、缓存和访问日志策略各不相同。修改数据后若线上仍显示旧内容，应先确认新文件已经部署，再检查浏览器缓存和托管平台的缓存设置，不要未经验证就把问题归因于 JavaScript。需要稳定更新流程时，可以通过代码仓库提交和审查变更，并在发布后保留可回滚的版本。

结语

搭建导航网站的关键不在于卡片样式有多复杂，而在于把页面、数据和管理边界分清楚。对于固定内容的小型目录，HTML、CSS 与 JavaScript 足以实现分类、搜索和安全的文本渲染；链接字段应明确校验规则，用户提供的内容则始终按不可信数据处理。当需求扩展到登录、投稿审核、权限控制或大规模维护时，应迁移到具备服务端能力的方案，而不是继续在静态页面里叠加看似安全的按钮。

从最小的数据结构开始，保持字段一致、维护流程可检查，再依据真实需求增加功能，通常比一开始引入复杂框架更容易维护。