2

我正在尝试为我的网站创建一个“快速简单”的面包屑路径。由于我的网站只有 3 个级别，因此最终的输出只能是：

首页 > 搜索产品（多种产品类型） > 产品详情

我试图编写自定义面包屑。

实际上，我正在做的是捕获页面标题，并将其与 HREF 一起显示到页面 URL。这在从 Home 执行搜索时非常有用：

主页 > 搜索椅

但是，在执行搜索后，我单击了一个我希望查看更多详细信息的项目（我的页面执行了一个帖子），一旦进入详细信息页面，我的面包屑就会显示：

首页 > 椅子详情

我所希望的是：

主页 > 搜索椅子 > 椅子详情

有没有办法可以做到这一点？

当前代码：

function createBreadcrumb() {

alert($(document).find("title").text());

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
}

****根据Harry的建议更新：*

$(function() {
    /* create page breadcrumb on initial page load */
    createBreadcrumb();
});

function createBreadcrumb(oldPagePass) {

if (oldPagePass !== null && oldPagePass !== undefined) {

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(oldAgePass + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
}  
else {
    alert($(document).find("title").text());

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
  }    
}

.ajaxSuccess(function() {

var $pageTitle = $(document).find("title").text();
var $pageURL = $(location).attr('href');

var $oldPage = $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));

createBreadcrumb($oldPage);
});

代码更新：

jQuery 函数

.on('click', '.searchResult', function() {
var row = $(this);
$('#resultForm > *').filter(':input').each(function(index, el) {
    var name = $(el).attr('name').slice(8).toLowerCase();
    var data = row.data(name);
    if (data !== 'undefined')
        $(el).val(data);
});

$('#resultForm').submit();
})

搜索页面表单标签：

<form:form method="post" id="resultForm"> </form:form>
4

1 回答 1

1

我不会为此推荐基于 JS 的方法，但如果您只对此选项感兴趣，以下算法/伪代码将为您提供帮助：

假设：您的页面遵循严格的 Home > Search > Details 结构，并且不能从任何地方调用 Details 页面，但它是相应的 Search Page）

是Page Type == Home吗？如果是，breacrumb = "Home" // 这是因为当它是主页时，面包屑总是只是主页，不需要锚点，因为它将成为同一页面的链接。

是Page Type == Search吗？如果是，breadcrumb = "<a href='home.htm'>Home</a>" + "Current Page Title" // 这是因为您的搜索页面始终是 2 级，而第一级始终是主页。请注意，第二级没有链接，因为它实际上是当前页面。

是Page Type == Details吗？如果是，breadcrumb = "<a href='home.htm'>Home</a>" + <a href='prev_page_url'>Previous Page Title</a> + "Current Page Title" //这是因为我们不知道上一页是什么类型的搜索页。它可以是 Search Chairs 或 Search Tables 或 Search XX。再次注意，由于上述原因，第 3 级没有链接。

因此，本质上，每个页面都必须分配一个页面类型，并基于此决定在面包屑中显示什么。

现在，让我们看一个示例：

  1. 用户在主页中。页面类型 = Home所以面包屑 = Home。
  2. 用户点击Search for Chairs。在 Search Chairs 页面中，Page Type = Search，所以面包屑将是Home > Search Chairs。
  3. 用户点击View Details。页面类型 = 详细信息，因此面包屑 = 主页 > 搜索椅子（来自上一页）> 查看椅子详细信息。
  4. 用户单击链接到Search for Tables。页面类型 = 搜索，所以面包屑 = 主页 > 搜索表。上一页的面包屑被忽略。
  5. 用户点击View Details。Page Type = Details，所以breadcrumb = Home > Search Tables (from previous page) > View Table Details。
  6. 用户点击主页链接。页面类型 = 主页，所以面包屑 = 主页。上一页的面包屑被忽略。

这应该可以克服 Sumurai8 在这个线程中提到的问题。

此处和此处提供了代码示例。

于 2013-07-29T13:09:51.233 回答