如何避免 Slim 模板中缩进导致的 HTML 标签放置错误？答案

【问题标题】：How to avoid wrong placement of HTML tags caused by indentation in a Slim template?如何避免 Slim 模板中缩进导致的 HTML 标签放置错误？
【发布时间】：2018-12-12 10:53:33
【问题描述】：

我在 Rails 视图中有以下精简代码：

- @collection_tags.each do |c|
    .cell.small-9.medium-4.large-3
      = content_tag :h2, c.name
      .brands-list
        - first_letter = nil
        - @brands.each do |brand|
          - if brand.page.tags.where(group_id: APP_CONFIG[:collection_tags_group_id] || 2).first.id == c.id
            - if brand.short_title.first.upcase != first_letter
              - first_letter = brand.short_title.first.upcase
              .letter-block
                .letter
                  = first_letter
                ul.menu.vertical
                  li
                    = link_to brand.short_title.capitalize, '#'
            - else
              li
                = link_to brand.short_title.capitalize, '#'

Here's the result。最后两项应该放在最后一个块内，因为字母仍然相同，但我不知道该怎么做，因为 Slim 基于缩进关闭 HTML 标签。

有什么方法可以让它在 Slim 中工作，还是我应该回到 ERB 来查看这个特定的视图？

【问题讨论】：

你试过html2slim.herokuapp.com 吗？
我并没有尝试将 HTML 视图转换为 Slim 视图。我正在迭代@brands（哈希列表），如果 short_title 值的第一个字母与前一个不同，我正在创建一个新的字母块。否则，我想将它打印在与前一个相同的块内。我最终更改了变量的结构以避免这个问题，但如果我从外部 API 获取数据，它仍然是一个问题。
我的意思是，如果您的 html 在没有 slim 的情况下可以正常工作，并且您认为它的难度很小，只需通过此转换器将其转换并检查您的问题出在哪里。

标签： ruby-on-rails slim-lang

【解决方案1】：

查看您的输出，slim 似乎在做正确的事情。尝试缩进第二个li 行以匹配if 的then 部分中li 的缩进级别。这应该可以解决您的问题。

【讨论】：