如何使用 JavaScript 创建动态面包屑？

面包屑是一种用于指示当前页面在网站结构中的位置的导航元素。它通常出现在页面顶部或左侧，帮助用户定位和浏览网站内容。本文将介绍如何使用 JavaScript 创建动态面包屑。

实现步骤

1. 获取当前页面的 URL

JavaScript 中有一个 window.location 对象，它包含了当前页面的信息，包括 URL。我们可以使用 window.location.pathname 获取当前页面的路径。例如，当前页面的 URL 为 https://example.com/products/shoes，则路径为 /products/shoes。

const path = window.location.pathname;

2. 将路径分解为各个部分

我们可以使用 String.prototype.split() 方法将路径分解为各个部分。例如，将 /products/shoes 分解为 ['products', 'shoes']。

const parts = path.split('/').filter(Boolean);

其中，filter(Boolean) 用于去除数组中的空字符串。

3. 创建面包屑元素

我们可以使用 JavaScript 动态创建面包屑元素。例如，创建一个包裹面包屑链接的 ul 元素和一个包含网站首页链接的面包屑 li 元素。

const ol = document.createElement('ol');
const homepage = document.createElement('li');
const homepageLink = document.createElement('a');
homepageLink.href = '/';
homepageLink.textContent = 'Home';
homepage.appendChild(homepageLink);
ol.appendChild(homepage);

4. 根据路径添加面包屑链接

我们可以根据路径中的部分，动态创建面包屑链接，并添加到面包屑元素中。例如，对于 ['products', 'shoes']，我们可以创建 ['Products', 'Shoes'] 两个链接，并将它们添加到面包屑元素中。

parts.reduce((accumulator, currentValue) => {
  accumulator.push(currentValue);
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = `/${accumulator.join('/')}`;
  a.textContent = currentValue.charAt(0).toUpperCase() + currentValue.slice(1);
  li.appendChild(a);
  ol.appendChild(li);
  return accumulator;
}, []);

其中，reduce() 方法用于遍历路径的各个部分，同时累加路径的上级部分（例如，['products', 'shoes'] 的上级路径为 ['products']），以便创建正确的链接。

5. 将面包屑元素添加到页面中

最后，我们需要将面包屑元素添加到页面中，以便用户能够看到。

const container = document.querySelector('.breadcrumb-container');
container.appendChild(ol);

其中，.breadcrumb-container 为容器元素的 CSS 类名。我们可以提前在 HTML 中创建一个空的容器元素，然后使用 JavaScript 将面包屑添加到容器中。

完整代码

以下是完整的 JavaScript 代码，示例演示如何将动态面包屑添加到页面中。

const path = window.location.pathname;
const parts = path.split('/').filter(Boolean);
const ol = document.createElement('ol');
const homepage = document.createElement('li');
const homepageLink = document.createElement('a');
homepageLink.href = '/';
homepageLink.textContent = 'Home';
homepage.appendChild(homepageLink);
ol.appendChild(homepage);
parts.reduce((accumulator, currentValue) => {
  accumulator.push(currentValue);
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = `/${accumulator.join('/')}`;
  a.textContent = currentValue.charAt(0).toUpperCase() + currentValue.slice(1);
  li.appendChild(a);
  ol.appendChild(li);
  return accumulator;
}, []);
const container = document.querySelector('.breadcrumb-container');
container.appendChild(ol);

在 HTML 中，我们需要提前创建一个空的容器元素，以便将动态面包屑添加到页面中。

<div class="breadcrumb-container"></div>

结论

本文介绍了如何使用 JavaScript 创建动态面包屑。我们可以使用 JavaScript 动态获取当前页面的 URL，并通过各种操作，将 URL 分解为各个部分，再根据部分动态创建面包屑链接。最后，我们需要将面包屑元素添加到页面中，以便用户能够看到。