Question

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

主页＆gt;搜索产品（多种产品类型）＆gt;产品详情

我试图编写自定义痕迹。

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

主页＆gt;搜索主席

然而，在执行搜索后，我点击了一个项目，我想查看更多关于（我的页面执行帖子）的详细信息，一旦在详细信息页面上，我的痕迹显示：

主页＆gt;主席详情

我所希望的是：

主页＆gt;搜索椅子＆gt;主席详情

有没有办法实现这个目标？

当前代码：

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> '));
}

****根据Harrys建议更新： *

$(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>

Answer 1

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

假设：您的网页遵循严格的主页＆gt;搜索＆gt;详细信息结构和详细信息页面无法从任何地方调用，但它是相应的搜索页面）

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

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

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

因此，本质上必须为每个页面分配一个页面类型，并根据我们决定在面包屑中显示的内容。

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

用户位于主页。 页面类型=主页所以 breadcrumb =主页。
用户点击搜索主席。在搜索主席页面中，页面类型=搜索，因此面包屑将是主页＆gt;搜索主席。
用户点击查看详细信息。 页面类型=详细信息，因此 breadcrumb = Home＆gt;搜索椅子（来自上一页）＆gt;查看椅子详情。
用户点击搜索表格的链接。 网页类型=搜索，因此 breadcrumb = Home＆gt;搜索表。上一页的面包屑被忽略。
用户点击查看详细信息。 页面类型=详细信息，因此 breadcrumb = Home＆gt;搜索表（来自上一页）＆gt;查看表格详细信息。
用户点击主页链接。 Page Type = Home，所以breadcrumb = Home 。上一页的面包屑被忽略。

这应该克服Sumurai8在this thread中提到的问题。

代码示例可用here和here。

将页面标题保存在变量中，以便在发布后可以访问它

1 个答案: