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

【问题标题】：How render elements based on device in server side using sightly (HTL)如何使用Sightly（HTL）在服务器端基于设备渲染元素
【发布时间】：2021-03-26 06:08:09
【问题描述】：

尝试根据设备屏幕大小渲染元素，例如我有两个 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。

【问题讨论】：

所以你牺牲了缓存性来减少 html 中的几行（或者不需要在 FE 中这样做）？我猜这不是最好的选择，尤其是 AEM。

标签： aem sightly

【解决方案1】：

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

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

请务必检查所有AEM server-side mobile APIs！

【讨论】：