Question

我需要以面包屑样式显示搜索结果列表中的网址（例如Google会这样做 - Google Breadcrumbs），并且对JavaScript的了解有限（并且几乎无法触及它）两年）。你能帮我吗？我可以应用代码，如果它提供了清晰的指令，并且对HTML和CSS非常熟悉，但之前没有尝试创建没有列表的面包屑。

我从哪里开始？

输入将是页面的URL（类是.slimBreadcrumbLink） - 例如https://www.example.com/level1/level2/level3/level4 - 输出如下：

2级＆gt; 3级＆gt; 4级

我还没有尝试过任何有意义的东西，我从这里开始。我已经阅读了所提出的其他面包屑问题，但到目前为止它没有帮助。我找到了以下内容，但不知道如何实现它。

var path = location.pathname;

var here = location.href.split('/').slice(3);

var parts = [{
  "text": 'Home',
  "link": '/'
}];

for (var i = 0; i < here.length; i++) {
  var part = here[i];
  var text = part.toUpperCase();
  var link = '/' + here.slice(0, i + 1).join('/');
  parts.push({
    "text": text,
    "link": link
  });
}

谢谢。

Answer 1

这是一个为面包屑创建HTML结构的函数：

const getLevels = url => url.replace(/http(s.):\/\//, "").split("/");
const createBreadcrumb = function(url, elem) {
    const ol = document.createElement("ol");
        getLevels(url).forEach((e, i) => {
            if(i > 2) {
                const li = document.createElement("li");
                const a  = document.createElement("a");

                a.href = url.substring(0, url.indexOf(e) + e.length);
                a.innerText = e;

                li.appendChild(a)        
                ol.appendChild(li);
            }   
        }
    });
    elem.appendChild(ol);
};

因为它是ES6，所以你必须使用像babel之类的转换器来使它与旧浏览器兼容。此外，由于您正在解析URL，因此无法自定义链接的标题。

然后，您可以使用这样的函数来解析url并使用ol在元素中创建id列表。

createBreadcrumb(url, document.getElementById("id"));

Answer 2

我推出了自己的演示代码段。代码有很多要解释，但是如果有什么东西没有解释，请随时告诉我，我会在这里详细说明。

// Utility functions
function createBreadcrumbs (origin, path) {
    var levels = path.slice(1).split('/')
    
    return levels.map(function (e, i, levels) {
      var text = e.replace(/-+/g, ' ').replace(/\s*\b\S/g, function (e) {
          return e.toUpperCase()
      })
      return anchor(origin + '/' + levels.slice(0, i+1).join('/'), text)
    })
}

function anchor (href, text) {
    var a = document.createElement('a')
    a.href = href
    a.textContent = text
    return a
}

function render (breadcrumbs) {
  var ol = document.createElement('ol')
  ol.className = 'breadcrumbs'
  breadcrumbs.forEach(function (anchor) {
      var li = document.createElement('li')
      anchor.className = 'breadcrumbs__link'
      li.className = 'breadcrumbs__crumb'
      li.appendChild(anchor)
      ol.appendChild(li)
  })
  return ol
}


// How to use
var breadcrumbs = createBreadcrumbs('//example.com', '/example-thing/location-stuff/level-2'),
    list = render(breadcrumbs)

console.log(breadcrumbs)
document.body.appendChild(list)

<p>Breadcrumbs for <a href="//example.com/example-thing/location-stuff/level-2">//example.com/example-thing/location-stuff/level-2</a></p>

将搜索结果URL显示为breadcrumb

2 个答案: