使用Slim渲染局部视图

Question

当前的Slim.html：

#fullpage
  =render partial: 'section_one'
  =render partial: 'section_two'
  =render partial: 'section_three'
  =render partial: 'section_four'
  =render partial: 'section_five'

我遇到的问题是，如果在移动端查看，我不想呈现partial: 'section_four'。

我尝试了这个：

#fullpage
  =render partial: 'section_one'
  =render partial: 'section_two'
  =render partial: 'section_three'
  - if $(window).width() >= 700
    =render partial: 'section_four'
  =render partial: 'section_five'

但它不起作用。有什么想法吗？

- user3007294

Answer 1

试着使用request.user_agent来识别移动设备。在检查移动设备时，你应该使用内联if条件:

= render partial: 'section_four' if request.user_agent =~ /Mobile|webOS/

有时候，request.user_agent =~ /Mobile|webOS/ 可能会因为浏览器自定义的 user_agent 而返回意外结果。

因此，我建议使用 Mobile-Fu 以更好地处理它。

- RAJ

Answer 2

$(window).width() >= 700 是一段 JavaScript 代码，你不能这样做。除了使用 request.user_agent 之外，你还可以使用 CSS 媒体查询来有选择地显示或隐藏部分内容。假设你的部分 section_four 包含如下内容：

#some_id
  .your_content

现在您可以通过CSS选择器定位#some_id，并根据设备宽度显示或隐藏它。

@media all and (max-width: 699px) {
  #some_id {
    display: none;
  }
}

详细信息请查看css媒体查询

- Mandeep