如何使用sightly(HTL)在服务器端渲染基于设备的元素

Question

尝试根据设备屏幕大小渲染元素，比如说我有两个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技巧，但我需要通过服务器端。因此，页面视图源只能有一个分区。

Answer 1

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

也就是说，有一个助手MobileUtil，你可以在你的使用对象/吊索模型中利用它来确定请求页面的设备是否是移动设备。

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