pug pretty option - новая строка после тега 'a' в формате HTML

Question

Я использую мопс через глоток с опцией {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> 

И да, = '\ п' не помогает в решении этой задачи, потому что она толкает тег новую строку с абсолютного начала и, следовательно, уничтожение форматирования дерева.

Answer 1

Причина, по которой мопс делает это, состоит в том, что a элементов inline элементов. В отличие от блок элементов (таких как div s), inline элементы обертываются на страницу, а тем самым и по соглашению в HTML-коде. Я не знаю, как сказать Пагу, чтобы сделать это по-другому, но я бы предложил обернуть элементы a в li элементах. Это сохранит новые строки, но также придерживается конвенции:

Обычно, когда вы указываете элементы (например, ссылки), обычно используется ul s (неупорядоченные списки). Особенно в навигационных элементах, перечисляя ряд якорных тегов. (Если вам не нравятся точки маркера, которые расположены перед элементами автоматически, вы можете легко это изменить с помощью некоторого CSS.)