CS 工作笔记：disabledInCsr

加上配置后，在 PDP 页面，只剩两个 resolver 了，感觉把之前 default 的 resolver 配置 overwrite 掉了：

上面代码注释掉之后：

如何访问到之前默认的 pageMeta 数据？

在 Web 前端开发中，breadcrumb（中文称为面包屑导航）是一种导航界面组件或设计模式，旨在帮助用户理解并追踪他们在一个网站或应用中的位置。面包屑导航通常呈现为一个水平的路径，显示用户当前位置以及可以倒退到的各个页面或层次。

面包屑导航名称的来源与《格林童话》中 Hansel 和 Gretel 的故事相关，他们通过撒面包屑来标记返回的路径。这个概念在网站导航中也起到了类似的作用，帮助用户在复杂的网站结构中找到回到上一级页面或首页的路径。

面包屑导航的核心特性包括：

1. 位置指示：显示当前页面在网站层次结构中的位置。
2. 路径追踪：用户能够轻松地返回到之前的页面或更高层次的页面。
3. 用户体验优化：简化导航，减少用户迷失在网站中的可能性。

面包屑导航的类型

面包屑导航主要有三种类型：位置型、路径型和属性型。每种类型有其独特的应用场景和设计方式。

1. 位置型面包屑（Location-based Breadcrumbs）

位置型面包屑显示了用户在网站层次结构中的位置。它通常用于层次结构明确的网站，如电子商务网站、内容管理系统等。

示例：

<ul class="breadcrumb">
  <li><a href="/">首页</a></li>
  <li><a href="/products">产品</a></li>
  <li><a href="/products/electronics">电子产品</a></li>
  <li>智能手机</li>
</ul>

这一段面包屑导航展示了用户从首页逐层导航到 智能手机 页面的路径。用户可以点击任何一个中间节点返回更高层次的页面。

2. 路径型面包屑（Path-based Breadcrumbs）

路径型面包屑显示了用户从进入网站以来所走的路径。这种面包屑导航更多地依赖于用户的历史操作，适用于需要复杂导航的应用程序。

示例：

<ul class="breadcrumb">
  <li><a href="/">首页</a></li>
  <li><a href="/search">搜索结果</a></li>
  <li><a href="/product/12345">产品 12345 详情</a></li>
</ul>

这个例子中，面包屑导航反映了用户从首页到 搜索结果 页面，再到某个具体 产品详情 页面的路径。

3. 属性型面包屑（Attribute-based Breadcrumbs）

属性型面包屑通常用于展示对象的属性或分类。这种面包屑在像电子商务网站等有丰富分类的系统中非常有用。

示例：

<ul class="breadcrumb">
  <li><a href="/">首页</a></li>
  <li>手机</li>
  <li>品牌: Apple</li>
  <li>价格: 3000-4000 元</li>
</ul>

这个例子展示了一个用户在 首页，根据 手机 分类以及选择了 Apple 品牌和特定价格区间的路径。

实现面包屑导航的技术细节

实现一个面包屑导航通常涉及 HTML、CSS 和 JavaScript。以下是一个基本的实现例子。

HTML 结构

定义面包屑导航的基本结构，使用 ul 和 li 标签。

<nav aria-label="breadcrumb">
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">首页</a></li>
    <li class="breadcrumb-item"><a href="/products">产品</a></li>
    <li class="breadcrumb-item"><a href="/products/electronics">电子产品</a></li>
    <li class="breadcrumb-item active" aria-current="page">智能手机</li>
  </ul>
</nav>

CSS 样式

样式设计添加视觉效果，包括间距、字体颜色等。

.breadcrumb {
  list-style: none;
  display: flex;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 5px;
}

.breadcrumb-item a {
  text-decoration: none;
  color: blue;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: grey;
}

JavaScript 增强功能（可选）

在某些情况下，可能需要使用 JavaScript 动态生成或更新面包屑导航。以下是一个基本的动态生成例子。

document.addEventListener("DOMContentLoaded", function () {
  const breadcrumbContainer = document.querySelector(".breadcrumb");
  const pages = [
    { name: "首页", link: "/" },
    { name: "产品", link: "/products" },
    { name: "电子产品", link: "/products/electronics" },
    { name: "智能手机", link: null } // 当前页面
  ];

  pages.forEach((page, index) => {
    const li = document.createElement("li");
    li.classList.add("breadcrumb-item");

    if (page.link) {
      const a = document.createElement("a");
      a.href = page.link;
      a.textContent = page.name;
      li.appendChild(a);
    } else {
      li.classList.add("active");
      li.setAttribute("aria-current", "page");
      li.textContent = page.name;
    }

    breadcrumbContainer.appendChild(li);
  });
});

面包屑导航的用户体验设计

面包屑导航不仅仅是一个技术问题，还涉及用户体验（UX）设计。一个好的面包屑导航应当：

1. 清晰易读：面包屑中的页面名称应该简要明确。
2. 导航合理：确保每个链接都能准确导航到对应的页面。
3. 兼容性好：在不同设备和浏览器中，面包屑导航应该表现一致。
4. 无障碍支持：为视障用户提供良好的访问体验，如通过 aria 属性增加无障碍支持。

实际案例：

1. 电子商务网站：在电子商务网站中，面包屑导航可以帮助用户快速返回到某个产品类别或层次。例如，一个用户正在浏览某个特定品牌的鞋子，在面包屑导航中可以点击返回到 所有鞋子 或 所有品牌 进行重新选择。

2. 内容丰富的网站：在博客或新闻网站中，面包屑导航可以帮助用户理解当前文章在网站内容层次结构中的位置。例如，从首页到某个特定的新闻类别，再到分类下的某篇文章。

3. 多层次的后台管理系统：在内容管理系统（CMS）中，面包屑导航可以帮助管理员明确当前所处的页面层次，比如从总览页面到某个分类管理页面，再到某个具体的内容编辑页面。

性能和优化提升

在性能方面，面包屑导航通常不会带来显著的负担，但有几点需要注意：

1. 动态生成：在某些复杂的单页应用（SPA）中，面包屑导航的路径可能基于用户的交互动态变化，需要频繁更新。确保动态生成逻辑高效且不影响页面加载速度。

2. 异步加载：在网络请求较多的应用中，如需要从服务器获取路径信息，可以考虑异步加载和缓存以减轻服务器负担和提升用户体验。

3. CDN 和缓存：静态资源的加载可以通过内容分发网络（CDN）和浏览器缓存进行优化，确保面包屑导航及其相关资源能快速加载。

总结

面包屑导航是用户界面设计中的一个重要工具，既能提升用户体验，又能增强网站的导航功能。通过清晰的路径指示，用户可以轻松返回上一级或明确自己在网站层次结构中的位置。结合 HTML、CSS 和 JavaScript，实现一个功能丰富、用户友好的面包屑导航并不复杂，而合理的设计和优化能让这一组件在更多类型的网站和应用中发挥其巨大作用。

如其作用的多样性所示，面包屑导航不仅是技术和设计的结合点，更是用户交互体验的提升工具。通过不断改进设计细节和优化技术实现，你将在现代 Web 开发中利用好面包屑导航这一利器，为用户提供无缝、愉悦的浏览体验。