自闭标签后的玉内容

Mic*_*ton 3 html pug

我正在将一些HTML从预先存在的应用程序转换为Jade.我有一块看起来像这样的HTML:

<div class="checkbox">
  <label>
    <input type="checkbox" name="data[day][sunday]" value="sunday">
  Sunday
  </label>
</div>
Run Code Online (Sandbox Code Playgroud)

同等的玉是什么意思呢?理想情况下,它看起来像这样:

div(class="checkbox"):
  label 
    input(type="checkbox" name="data[day][sunday]" value="sunday") 
    Sunday
Run Code Online (Sandbox Code Playgroud)

但因为input是一个自我结束的标签,我不能用"周日"的文字跟着它

我可以用另一种方式完全按照我的需要编写它,但我想知道如何准确地解决这个问题.

谢谢!

Jos*_*lik 5

您可以使用|in jade来解决此问题.

后面的任何文本|都将被解释为父文本中的文本

div(class="checkbox"):
  label 
    input(type="checkbox" name="data[day][sunday]" value="sunday") 
    | Sunday
Run Code Online (Sandbox Code Playgroud)

你也可以像这样使用非自闭项标签

div
  div
    span hello there
  | and plain text
Run Code Online (Sandbox Code Playgroud)

将导致像这样的HTML

<div>
  <div>
    <span>hello there</span>
  </div>
  and plain text
</div>
Run Code Online (Sandbox Code Playgroud)

请记住,在Jade中编写直接HTML是完全有效的,您也可以像这样解决这个问题.

div(class="checkbox"):
  label.
    <input type="checkbox" name="#{data[day][sunday]}" value="sunday"> 
    Sunday
Run Code Online (Sandbox Code Playgroud)

.翡翠以下标签会像对待文本的所有内容.