我们如何在Jade / Pug中的多行上写一个长属性值？
SVG路径往往很长。我们想在多行上写一个属性值以帮助提高可读性。例如，用HTML编写的Mozilla tutorial易于阅读。
任何改变这个的方法：
h3 Arcs
svg(width="320px", height="320px")
path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10",
stroke="black", fill="green",
stroke-width="2", fill-opacity="0.5")
这样的事情：
h3 Arcs
svg(width="320px", height="320px")
path(d="M10 315 " +
"L 110 215 " +
"A 30 50 0 0 1 162.55 162.45 " +
"L 172.55 152.45 " +
"A 30 50 -45 0 1 215.1 109.9 " +
"L 315 10",
stroke="black", fill="green",
stroke-width="2", fill-opacity="0.5")
不会触发“意外令牌”错误。
答案 0 :(得分：35)
我有同样的问题但是在knockoutjs上下文中。我像这样使用反斜杠。 先前：
div(data-bind="template: {name: 'ingredient-template', data: $data}")
现在：
div(data-bind="template: {\
name: 'ingredient-template',\
data: $data}")
注意：反斜杠必须紧跟换行符。我不确定这是否是“官方”方式，我只是做了它似乎工作。这种方法的一个缺点是字符串然后在白色空间完整的情况下呈现。因此，上面的示例呈现为：
<div data-bind="template: { name: 'ingredient-template', data: $data}">
这可能使你的例子无法使用。
修改谢谢Jon。你评论中的var想法可能更好，但仍然不理想。类似的东西：
-var arg = "M10 315 "
-arg += "L 110 215 "
-arg += "A 30 50 0 0 1 162.55 162.45 "
-arg += "L 172.55 152.45 "
-arg += "A 30 50 -45 0 1 215.1 109.9 "
-arg += "L 315 10"
h3 Arcs
svg(width="320px", height="320px")
path(d=arg,
stroke="black", fill="green",
stroke-width="2", fill-opacity="0.5")
不确定额外字符是否值得减少行长。
答案 1 :(得分：18)
这是一个老问题，但这是一个较新的答案。
在我的情况下，我在单个文件组件中的vue模板中使用PUG。所以以下内容适用于我。
<template lang='pug'>
.day(:class=`{
'disabled': isDisabled,
'selected': isSameDay,
'in-range': isInRange,
'today': isToday,
'weekend': isWeekend,
'outside-month': isOutsideMonth }`,
@click='selectDay'
) {{label}}
</template>
即。使用字符串插值`而不是'或“
答案 2 :(得分：15)
我一直在寻找这个问题的答案，我相信你可以通过跳过尾随的逗号将jade属性分解为多行。
实施例
aside
a.my-link(
href="https://foo.com"
data-widget-id="1234567abc")
| Tweets by @foobar
我发现了关于它的提交消息：https://github.com/visionmedia/jade/issues/65
答案 3 :(得分：7)
您可以通过在换行符处关闭字符串，添加＆＃39; +＆＃39;，然后在延续行上打开一个新字符串来完成此操作。
以下是一个例子：
path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55" +
" 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10",
foo="etc",
...
答案 4 :(得分：1)
尚未提及的一种解决方案是使用数组并用空格连接其项：
h3 Arcs
svg(width="320px" height="320px")
path(
d=[
'M10 315',
'L 110 215',
'A 30 50 0 0 1 162.55 162.45',
'L 172.55 152.45',
'A 30 50 -45 0 1 215.1 109.9',
'L 315 10',
].join(' ')
fill="green"
fill-opacity="0.5"
stroke="black"
stroke-width="2"
)
输出（使用 Pug 2.0.4）：
<h3>Arcs</h3>
<svg width="320px" height="320px">
<path
d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"
fill="green"
fill-opacity="0.5"
stroke="black"
stroke-width="2"
></path>
</svg>
您还可以使用空格以外的其他内容连接数组项，这在某些情况下可能很方便。
答案 5 :(得分：0)
我还有一个字符串作为属性值。我正在使用反应
input(
...props
label="Contrary to popular belief, Lorem Ipsum is simply random text. \
It has roots in a piece of classical Latin literature from 45 BC, \
making it over 2000 years old."
)
在你的情况下...
path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 \
L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 \
10",
请注意，反斜杠之前有一个空格
答案 6 :(得分：0)
Pug允许在渲染过程中定义模板中可用的js函数，因此我使用此功能定义了一个函数，该函数从字符串中删除了不需要的空格，然后将其应用于多行属性字符串以摆脱不需要的白色生成的html中的空格。这是一个哈巴狗模板示例：
-
//- function to remove white space from strings, leaving a single space
var rws_rex = /[\n\r\s\t]+/g
function rws(ff){
return ff.replace(rws_rex, ' ');
}
span.clickable1( onclick=rws(`
$('.selected').removeClass('selected');
$(this).addClass('selected');
SA_getPersonDetails('${psn1.personUID}');
return false; `)
)
| Click for details
结果是
<span class="clickable1" onclick=" $('.selected').removeClass('selected'); $(this).addClass('selected'); SA_getPersonDetails('d1374ea2-2f35-4260-8332-abd7ec2d79b4'); return false; ">Click for details</span>
**请注意，这会从javascript代码中的所有文字值中删除空格，因此，如果要保留这些空格，则需要修改regexp和function。在上面的示例中，如果psn1.personUID包含多个连续的空格，则它们将减少为单个空格。但这对大多数类型的属性都适用。
答案 7 :(得分：0)
我找到了更好的方法，它考虑了最终 html 中的空格：
input(type='type'
class='block w-full'
+' pr-12 border-gray-300'
+' rounded-md focus:ring-indigo-500'
+' focus:border-indigo-500 sm:text-sm')