How to let a line end with | (pipe) in HAML?

不问归期 提交于 2019-12-23 15:05:02

问题


The problem is that a | at the end of a line (seperated by whitespace) is recognized as syntax for advanced line-breaks. What to do if you want to get this character as output?

Example

Say you want to create a menu like

Section 1 | Section 2 | ...

Note: if this is just what you want then take a look at concatenate link_to with pipe.

Wether or not a link is shown depends on a certain condition. In HAML/Ruby on Rails this could look like which does not work

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

Work-around

As a (somehow dirty) work-around I changed the code:

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

回答1:


No need for escaping, just the same indentation than the element u want separated.

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

you can try this in browser: online haml editor: rendera or html2haml




回答2:


The Haml parser look fo the | character preceded by whitespace to signify a multiline block. You could use this to create a workaround by using a HTML character reference instead of a normal space in your Haml:

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

This way Haml won’t see the space so will treat the pipe as a literal, but the space will appear in the browser.

Whether you prefer this workaround to your own is likely a matter of taste. In this particular case I think a css based solution would be better, but that would depend on what browsers you need to support.




回答3:


Menu should be a list so make it an unordered list and in CSS:

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



回答4:


I think you need to escape this character. Try "\|".



来源:https://stackoverflow.com/questions/12388672/how-to-let-a-line-end-with-pipe-in-haml

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!