时间戳

首页 > 解决方案 > Pug : 处理的正确语法

html - Pug : 处理的正确语法

问题描述

哈巴狗新手在这里——我正在哈巴狗中实现重复的 html 只是为了让我的脚湿透。我有以下 HTML，我试图在哈巴狗中捕获并遇到跨度问题。我已经从下面的示例中删除了不相关的类和其他内容以简化。

原始 HTML： 

<nav class="...">
    <div class="container">
        <div class="navbar-header">
            <button type="button">
                <span class="sr-only">toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    </div>
</nav>

哈巴狗等效描述：

nav(class='...')
    div(class='container')
        div(class='navbar-header')
            button(type='button')
                span(class='sr-only') toggle navigation

帕格生成的 HTML：

<nav class="...">
  <div class="container">
    <div class="navbar-header">
      <button type="button"><span class="sr-only">toggle navigation</span></button>
    </div>
  </div>
</nav>

我意识到它在语法上是相同的，但我在做什么是触发它与按钮（它在 DOM 中的父级）在同一行上执行跨度。叫我奇怪，但我喜欢能够轻松阅读 HTML，是的，我正在使用“--pretty”选项生成它。我只是想了解它为什么这样做..想法？

如果重要的话，这适用于哈巴狗 2.0.3。

标签： htmlsyntaxpug

解决方案

谢谢@肖恩！我正在研究其中一些我以前从未有机会使用过的工具，所以对我来说有一点学习曲线。

我会给你答案的功劳，但坦率地说，我不确定该怎么做..

推荐阅读