Question

我在表格中表示面包屑如下：

    <ol class="breadcrumb" data-sly-use.breadcrumb="myModel.js">
    <output data-sly-unwrap data-sly-list="${breadcrumb}">
        <li  itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="${item.href}" itemprop="url">
                <span  itemprop="title">${item.label}</span>
            </a>
        </li>
    </output>
</ol>

如何在此结构中表示breadcrumb child？

Answer 1

好像你正在使用apache sling，我自己也没用过，但是为了设置一个简单的面包屑，它可以用CSS完成。这是我在li上使用display: inline设置的。

jsfiddle

我确定你可以使用一些漂亮的造型，但这是一个简单的例子，使用三角形作为面包屑上的箭头。

HTML

<div id="menu">
  <ul>
    <li>
      <a href="#" itemprop="url">
        <span itemprop="title">item 1</span>
      </a>
    </li>

    <div class="arrow-right"></div>

    <li>
      <a href="#" itemprop="url">
        <span itemprop="title">item 2</span>
      </a>
    </li>
  </ul>
</div>

CSS

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent; 
    border-left: 0.5em solid black;
    display: inline-block;
}

#menu ul{
  list-style: none;
}

#menu li{
  display: inline;
}

Answer 2

我不完全确定你的问题是什么。你是什么意思＆＃34; breadcrumb孩子＆＃34;？在每个示例中，您给每个item是面包屑的元素之一，所以这就是我认为＆＃34;孩子＆＃34;是的，但这似乎不是你的意思。

如果问题是关于myModel.js可能是什么样的，那么它只需要实现javascript Use API并返回一个对象列表。例如

"use strict";
use(function () {
    var crumbs= [];

    crumbs.push({href: '/home/path', label: 'Home'});
    crumbs.push({href: '/section/path', label: 'Section'});

    return crumbs;
});

您可以使用Sling为您提供当前页面父项的对象，而不是对面包屑进行硬编码，但这只是一个简单的示例。

注意：此时您应该使用Java API，而不是生产代码的javascript API。请参阅Adobe的Sightly Intro

中的比较图表

如何表示面包屑孩子？

2 个答案:

HTML

CSS