我如何生成一个包含几行的列表？

Question

我有以下代码：

nav.nav-buttons
  each val in ["lock", 'monitor', "live", "folder", "video", "script", "presentation", "pack", "checked", "play-simple", "reload", "star", "lock", "tags"]
    a(href="#")!= '<svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-' + val + '"></use></svg>'

下面编译HTML：

<nav class="nav-buttons"><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-monitor"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-live"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-folder"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-video"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-script"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-presentation"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-pack"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-checked"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-play-simple"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-reload"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-star"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-tags"></use></svg></a>

我需要代码正确缩进，每个都在一个新行上，但我不知道该怎么做。

我需要类似于下面的代码

<nav class="nav-buttons">
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-monitor"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-live"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-folder"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-video"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-script"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-presentation"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-pack"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-checked"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-play-simple"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-reload"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-star"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-tags"></use></svg></a>
</nav>

Answer 1

使用 http://www.html2jade.org/ and read http://jade-lang.com/reference/ 两者都会帮助您完成任务。

Answer 2

这个代码

- var desc_tags = ["lock", 'monitor', "live", "folder", "video", "script", "presentation", "pack", "checked", "play-simple", "reload", "star", "lock", "tags"].map(function(val){
-    return '<a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-' + val + '"></use></svg></a>'
- });
nav.nav-buttons!= '\n  '+desc_tags.join('\n  ')+'\n'

产出

<nav class="nav-buttons">
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-monitor"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-live"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-folder"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-video"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-script"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-presentation"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-pack"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-checked"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-play-simple"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-reload"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-star"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-tags"></use></svg></a>
</nav>

希望对您有所帮助。

我如何生成一个包含几行的列表？

How do I jade generate a list of several lines?

html

node.js

pug

preprocessor