我们如何在 Jade / Pug 中将长属性值写在多行上？
SVG 路径往往很长。我们希望将属性值写在多行上以提高可读性。例如，Mozilla 的 tutorial 用 HTML 编写，很容易阅读。
有什么方法可以改变这个：
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")
不会触发“意外令牌”错误。
我也有同样的问题，但是是在 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}">
这可能会使其无法用于您的示例。
编辑谢谢乔恩。您的评论中的 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")
不确定额外的字符是否值得减少行长度。
这是一个老问题，但这是一个新的答案。
就我而言，我在单文件组件的 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>
即使用字符串插值 ` 而不是 ' 或 "
我一直在寻找这个问题的答案，我相信你可以通过跳过尾随逗号将玉属性分成多行。
例如。
aside
a.my-link(
href="https://foo.com"
data-widget-id="1234567abc")
| Tweets by @foobar
我找到了关于它的提交消息：https://github.com/visionmedia/jade/issues/65
您可以通过在换行符处关闭字符串，添加“+”，然后在续行上打开一个新字符串来完成此操作。
这是一个例子：
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",
...
我还有一个字符串作为属性值。我正在使用反应
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",
注意反斜杠前面有一个空格
尚未提及的一个解决方案是使用数组并用空格连接其项目：
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>
您还可以使用空格以外的其他内容来连接数组项，这在某些情况下可能很方便。
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 代码中任何文字值内的空格，因此如果您想保留这些空格，则需要修改正则表达式和函数。在上面的示例中，如果 psn1.personUID 包含多个连续空格，它们将被减少为单个空格。但它适用于大多数类型的属性。
我找到了更好的方法，它考虑了最终 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')
我知道这句话已经很老了；只是想让人们在 2022 年搜索这个，现在你可以在 Pug 中简单地使用 ES6 多行字符串。
html
head
meta(http-equiv='Content-Security-Policy' content=`
default-src * data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval' 'unsafe-dynamic';
script-src * data: blob: 'unsafe-inline' 'unsafe-eval';
connect-src * data: blob: 'unsafe-inline';
img-src * data: blob: 'unsafe-inline';
frame-src * data: blob: ;
style-src * data: blob: 'unsafe-inline';
font-src * data: blob: 'unsafe-inline';
frame-ancestors * data: blob: 'unsafe-inline';
`)