时间戳

首页 > 解决方案 > 如何使用Sightly（HTL）在服务器端基于设备渲染元素

aem - 如何使用Sightly（HTL）在服务器端基于设备渲染元素

问题描述

尝试根据设备屏幕尺寸渲染元素，例如我有两个 DIV（桌面和移动），我想为桌面用户和移动用户渲染桌面 DIV，等等。

<sly data-sly-test="${ANY_LOGIC_HERE}">
    <div class="desktop-render">
        <button type="button" aria-label="${item.Label}" class="btn btn-primary btn-desktop">Click Here</button>
    </div>
</sly>
<sly data-sly-test="${ANY_LOGIC_HERE}">
    <div class="mobile-render">
        <button type="button" aria-label="${item.Label}" class="btn btn-primary btn-mobile">Click Here</button>
    </div>
</sly>

我知道有一些 CSS/JS 技巧，但我需要通过服务器端。因此，页面视图源只能有一个 div。

标签： aemsightly

解决方案

在回答这个问题之前，我会提醒您，为每个设备/用户代理呈现不同的标记通常是不好的做法。这使您的页面不可缓存，并且用户代理通常不是很可靠。还有其他技术，从客户端 DOM 操作到专用移动页面（如果设备是移动设备，您可以重定向到这些页面）。

也就是说，有一个助手MobileUtil，您可以在 Use-Object/Sling 模型中利用它来确定请求页面的设备是否似乎是移动设备。

确保检查所有AEM 服务器端移动 API！

推荐阅读