Question

我正在使用pug通过gulp和{pretty: true}选项。使用div / header / section / nav标记就可以了，但是当我使用a或span时，它会在没有空格的情况下进行编译标签。

nav.header__menu
    a(class="header__menu__link" href="#") About
    a(class="header__menu__link" href="#") Home

编译为

<nav class="header__menu"><a class="header__menu__link" href="#">About</a><a class="header__menu__link" href="#">Home</a></nav>

我想要

<nav class="header__menu">
   <a class="header__menu__link" href="#">About</a>
   <a class="header__menu__link" href="#">Home</a>
</nav>

是的， ='\ n'对此任务没有帮助，因为它正在从绝对开始将标记推送到新行，因此会破坏树格式化。

Answer 1

Pug之所以这样做，是因为a元素是内联元素。与块元素（例如div s）相反，内联元素包含在页面上，因此也（按照惯例）包含在HTML代码中。我不知道有什么方法可以告诉Pug以不同的方式执行此操作，但我建议将a元素包装在li元素中。这将保留新行，但也遵守惯例：

通常，无论何时列出项目（例如链接），通常都会使用ul s（无序列表）。特别是在导航元素中，列出了许多锚标签。（如果你不喜欢自动放在元素前面的子弹点，你可以用一些CSS轻松改变它。）