如何在 AEM 6.1 中将 jsp 代码转换为 html？

Question

我想在 AEM 中将 jsp 代码修改为 html。这里 jsp scriptlet 和 pageContext.setAttribute("coltype", xssAPI.filterHTML(properties.get("coltype",""))); --> 这段代码正在从对话框中获取值并存储到 jsp 中。同样如何在 html 中使用视觉概念。

<jsp:directive.include file="/libs/foundation/global.jsp"/>
<cq:includeClientLib categories="bootstrap" />
<jsp:directive.page session="false" />

<!-- <%=properties.get("coltype","")%> -->

<jsp:scriptlet>
    pageContext.setAttribute("coltype", xssAPI.filterHTML(properties.get("coltype","")));
</jsp:scriptlet>

<c:if test="${empty coltype}">
     Responsive Grid and Column Control Component
</c:if>

<c:if test="${not empty coltype}">

<c:set var = "column" value = "${properties.coltype}" />
<c:set var = "color" value = "${properties.color}" />
<div class="row">
    <c:choose>
        <c:when test="${coltype eq '8-4-col'}">
            <div class="col-sm-8 ${color}" ><cq:include path="col-8-4-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-4 ${color}"><cq:include path="col-8-4-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '4-8-col'}">
            <div class="col-sm-4 ${color}"><cq:include path="col-4-8-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-8 ${color}"><cq:include path="col-4-8-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '4-4-4-col'}">
            <div class="col-sm-4 ${color}"><cq:include path="col-4-4-4-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-4 ${color}"><cq:include path="col-4-4-4-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-4 ${color}"><cq:include path="col-4-4-4-3" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '6-6-col'}">
            <div class="col-sm-6 ${color}"><cq:include path="col-6-6-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-6 ${color}"><cq:include path="col-6-6-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '3-3-3-3-col'}">
            <div class="col-sm-3  ${color}"><cq:include path="col-3-3-3-3-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-3-3-3-3-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-3-3-3-3-3" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-3-3-3-3-4" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '2-2-2-2-2-2-col'}">
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-3" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-4" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-5" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-xs-6 col-sm-4 col-md-2 ${color}"><cq:include path="col-2-2-2-2-2-2-6" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '3-9-col'}">
            <div class="col-sm-3  ${color}"><cq:include path="col-3-9-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-9  ${color}"><cq:include path="col-3-9-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '9-3-col'}">
            <div class="col-sm-9  ${color}"><cq:include path="col-9-3-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-9-3-2" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '3-3-6-col'}">
            <div class=" col-sm-3 ${color}"><cq:include path="col-3-3-6-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class=" col-sm-3 ${color}"><cq:include path="col-3-3-6-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-6 ${color}"><cq:include path="col-3-3-6-3" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '6-3-3-col'}">
            <div class="col-sm-6  ${color}"><cq:include path="col-6-3-3-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-6-3-3-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3  ${color}"><cq:include path="col-6-3-3-3" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '6-2-2-2-col'}">
            <div class="col-sm-6  ${color}"><cq:include path="col-6-2-2-2-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-2  ${color}"><cq:include path="col-6-2-2-2-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-2  ${color}"><cq:include path="col-6-2-2-2-3" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-2  ${color}"><cq:include path="col-6-2-2-2-4" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
        <c:when test="${coltype eq '3-6-3-col'}">
            <div class="col-sm-3 ${color}"><cq:include path="col-3-6-3-1" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-6 ${color}"><cq:include path="col-3-6-3-2" resourceType="/libs/foundation/components/parsys" /></div>
            <div class="col-sm-3 ${color}"><cq:include path="col-3-6-3-3" resourceType="/libs/foundation/components/parsys" /></div>
        </c:when>
    </c:choose>
</div>
</c:if>

Answer 1

Sightly 默认提供display context 来防止XSS 安全问题。大多数情况下，它会自动检测上下文，但您也可以显式指定上下文。

JSP 代码将在 Sightly 中转换为类似的内容。

${properties.coltype @ context='html'}

Answer 2

看看 JavaScript 使用 API： https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/use-api-in-javascript.html#Passing%20Parameters%20to%20a%20Template

有一个关于如何使用服务器端 JS Use API 访问数据并将其传递给漂亮的 html 代码的小示例（还有一个可用的 Java Use API，或者作为替代方案，Sling Models，但这些可能是为了你的目的有点超重）。

Answer 3

您好，以下是使用 sighlty 传递变量的示例代码：

<sly data-sly-test.colomType="${properties.coltype}" />
<sly data-sly-test.color="${properties.color}" />

上面的“columType”和“color”就像一个变量，你可以像下面这样使用这些变量：

    <sly data-sly-test="${columType== '8-4-col'}">
        <div class="col-sm-8 ${color}"><sly data-sly-resource="${'col-8-4-1' @ resourceType='/libs/foundation/components/parsys'}" /></div>
        <div class="col-sm-4 ${color}"><sly data-sly-resource="${'col-8-4-2' @ resourceType='/libs/foundation/components/parsys'}" /></div>
    </sly>
    <sly data-sly-test="${columType== '4-8-col'}">
        <div class="col-sm-4 ${color}"><sly data-sly-resource="${'col-4-8-1' @ resourceType='/libs/foundation/components/parsys'}" /></div>
        <div class="col-sm-8 ${color}"><sly data-sly-resource="${'col-4-8-2' @ resourceType='/libs/foundation/components/parsys'}" /></div>
    </sly>