如何让一行以 | 结尾（管道）在 HAML 中？答案

【问题标题】：How to let a line end with | (pipe) in HAML?如何让一行以 | 结尾（管道）在 HAML 中？
【发布时间】：2012-09-05 12:03:55
【问题描述】：

问题是行尾的|（由空格分隔）被识别为高级换行符的语法。如果你想得到这个字符作为输出怎么办？

示例

假设你想创建一个类似的菜单

Section 1 | Section 2 | ...

注意：如果这正是您想要的，请查看concatenate link_to with pipe。

是否显示链接取决于特定条件。在 HAML/Ruby on Rails 中，这可能看起来像 not 工作

%div.menu
    -if condition1?
        #{link_to 'Section 1', section_1_path} |
    -if condition2?
        #{link_to 'Section 2', section_2_path} |
    -if condition3?
        ...

解决方法

作为一个（有点脏的）变通方法，我更改了代码：

%div.menu
    -if condition1?
        #{link_to 'Section 1', section_1_path} #{'|'}
    -if condition2?
        #{link_to 'Section 2', section_2_path} #{'|'}
    -if condition3?
        ...

【问题讨论】：

用 \ 转义。所以它会是\|
行不通。请参阅我对下一个答案的评论。

标签： ruby-on-rails ruby haml

【解决方案1】：

我认为你需要转义这个角色。试试“\|”。

【讨论】：

这行不通。来自documentation：反斜杠字符转义一行的第一个字符，允许将其他解释的字符用作纯文本。

【解决方案2】：

菜单应该是一个列表，因此在 CSS 中将其设为无序列表：

.menu ul li:after {
  content: '|';
}

【讨论】：

这是一种替代方案。特别是我喜欢它的标记方面。另一方面，某些浏览器可能会遇到兼容性问题（例如基于文本的）。

【解决方案3】：

无需转义，只需与要分离的元素相同的缩进即可。

%div.menu
  -if condition1?
    #{link_to 'Section 1', section_1_path} 
    |
  -if condition2?
    #{link_to 'Section 2', section_2_path} 
    |
  -if condition3?
      ...

你可以在浏览器中试试这个： online haml editor: rendera 要么 html2haml

【讨论】：

【解决方案4】：

Haml 解析器查找| 字符前面有空格 表示多行块。您可以通过使用 HTML 字符引用而不是 Haml 中的普通空格来创建解决方法：

%div.menu
  -if condition1?
    #{link_to 'Section 1', section_1_path}&#x20;|
  -if condition2?
    #{link_to 'Section 2', section_2_path}&#x20;|
  -if condition3?
    ...

这样，Haml 将看不到空格，因此会将管道视为文字，但空格会出现在浏览器中。

您是否更喜欢这种解决方法可能是个人喜好问题。在这种特殊情况下，我认为基于 css 的解决方案会更好，但这取决于您需要支持的浏览器。

【讨论】：