1

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

    <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在这个结构中如何表示？

4

2 回答 2

0

似乎您正在使用我自己没有使用过的 apache sling，但是对于设置简单的面包屑，只需使用 CSS 即可完成。这是我display: inline在 li 上设置的一个。

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;
}
于 2015-02-23T10:19:58.480 回答
0

我不完全确定你的问题是什么。“面包屑孩子”是什么意思？在 Sightly 示例中，您给出的每个item都是面包屑的元素之一，所以这就是我假设的“孩子”，但这似乎不是您的意思。

如果问题是关于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。请参阅 Adob​​e 的Sightly Intro中的比较表

于 2015-12-15T19:49:54.707 回答