1

我有一个要求创建面包屑一目了然。我有以下在 JSP 中运行良好的代码。但是我正在努力将代码转换为清晰的代码，因为我没有在 currentStyle 对象中获得正确的方法来获取“absParent”和其他。任何帮助将不胜感激！

        <%@ include file="/libs/foundation/global.jsp" %>
        <%

            final int startLevel = currentStyle.get("absParent", 3);
            final int endLevel = currentPage.getDepth() - currentStyle.get("relParent", 0);
            final int minItems = currentStyle.get("minItems", 2);
            if (startLevel <= endLevel - minItems) {
             %><section class="breadcrumbs"><%
                for (int level = startLevel+1; level < endLevel; ++level) {
                    Page itemPage = currentPage.getAbsoluteParent(level);
                    if (itemPage == null || !itemPage.isValid() || itemPage.isHideInNav()) {
                        continue;
                    }

                    final String pagePath = itemPage.getPath() + ".html";   
                    final String pageTitle = itemPage.getNavigationTitle();

                    String className = "breadcrumb-item-"+level;
                    if (level == startLevel) className += " breadcrumb-first";
                    if (level == endLevel-1) className += " breadcrumb-last";

                    pageContext.setAttribute("className", className);%>
                <section class="breadcrumbs ">
                        <a href="<%= xssAPI.getValidHref(pagePath) %>" class="breadcrumb-item"><%= xssAPI.encodeForHTML(pageTitle) %></a>
                </section>    

                <%} %>
            </section><%
            }

        %>
4

2 回答 2

2

要创建面包屑，您必须编写一个 WCMuse 类并将其包含在此组件中。

<div 
    data-sly-use.breadcrumb="${'com.mySite.components.BreadcrumbUse'}">
            <!-- + Breadcrumb component + -->
            <div class="breadcrumb component">
                <div class="breadcrumb_nav_bar clearfix"
                    data-sly-test="${breadcrumb.navList}"
                    data-sly-list.element="${breadcrumb.navList}">
                    <p data-sly-test="${!elementList.last}">
                        <a href="${element.path}.html">${element.title ||
                            element.navigationTitle || element.name}</a>
                    </p>
                    <p data-sly-test="${elementList.last}">${element.title ||
                        element.navigationTitle || element.name}</p>
                </div>
            </div>
            <!-- - Breadcrumb component - -->
</div>

WCMUse 类的代码示例：

Public class BreadcrumbUse extends WCMUse
{
    private List<Page> navList = new ArrayList<Page>();

    @Override
    public void activate() throws Exception
    {
        setBreadCrumbItems();
    }

    private void setBreadCrumbItems()
    {
        long level = 4L;
        long endLevel = 1L;
        int currentLevel = getCurrentPage().getDepth();
        while (level < currentLevel - endLevel)
        {
            Page trailPage = getCurrentPage().getAbsoluteParent((int) level);
            if (trailPage == null)
            {
                break;
            }
            this.navList.add(trailPage);
            level++;
        }
    }

    public List<Page> getNavList()
    {
        return this.navList;
    }

}
于 2016-01-13T22:06:39.537 回答
0

下面的代码将用于在 AEM6.2 中使用 Javascript 和 HTL（以前很明显）创建面包屑。它对我来说效果很好..我们开始

在服务器端脚本中使用的 Javascript（也可以使用 java 创建）

脚本.js

use(function () {
    var title = currentPage.getTitle();
   //To get the title of the current page
    var level = currentPage.getDepth();
   //To find the depth of the current page from the root
    var cts = new Array();
    // To store the traversed page (object) from the root
     for(var i=1;i<level;i++)
    {  // Here I used i=1 for mycase(i=0 will be /content)
        var titl = currentPage.getAbsoluteParent(i);
        //To get the absolute parent at each level from root
        pageStack.push(titl);
      //Stack to maintain the pages
    }
    return {
        title: title,
        pageStack:pageStack

    };
});

面包屑.html

<sly data-sly-use.cpt="script.js">
    <h1>${cpt.title}</h1>
 <div data-sly-list="${cpt.pageStack}"> 
   <span> <a href ="${item.path}.html">${item.title}</a>/</span>
    </div> 
</div>

因此，我们为我们的演示准备好了面包屑！！！

于 2017-07-16T14:39:44.493 回答