Question

我们如何在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")

不会触发“意外令牌”错误。

Answer 1

我有同样的问题但是在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")

不确定额外字符是否值得减少行长。

Answer 2

这是一个老问题，但这是一个较新的答案。

在我的情况下，我在单个文件组件中的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>

即。使用字符串插值`而不是'或“

Answer 3

我一直在寻找这个问题的答案，我相信你可以通过跳过尾随的逗号将jade属性分解为多行。

实施例

aside                                                                            
  a.my-link(                                                            
    href="https://foo.com"                                         
    data-widget-id="1234567abc")                                         
    | Tweets by @foobar

我发现了关于它的提交消息：https://github.com/visionmedia/jade/issues/65

Answer 4

您可以通过在换行符处关闭字符串，添加＆＃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",
     ...

Answer 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',
    ].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>

您还可以使用空格以外的其他内容连接数组项，这在某些情况下可能很方便。

Answer 6

我还有一个字符串作为属性值。我正在使用反应

 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",

请注意，反斜杠之前有一个空格

Answer 7

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包含多个连续的空格，则它们将减少为单个空格。但这对大多数类型的属性都适用。

Answer 8

我找到了更好的方法，它考虑了最终 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')

Jade / Pug中长属性值的多行

8 个答案: