47

我们如何在 Jade / Pug 中将长属性值写入多行？

SVG 路径往往很长。我们希望将属性值写入多行以提高可读性。例如，Mozilla 用 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")

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

4

8 回答 8

43

我有同样的问题，但在敲除js上下文中。我像这样使用反斜杠。之前：

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

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

于 2013-07-27T05:08:50.200 回答
24

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

就我而言，我在单个文件组件的 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>

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

于 2017-03-16T10:48:03.953 回答
18

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

前任。

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

我发现了这个提交信息： https ://github.com/visionmedia/jade/issues/65

于 2013-12-25T18:02:30.223 回答
7

您可以通过在换行符处关闭字符串，添加“+”，然后在续行上打开一个新字符串来做到这一点。

这是一个例子：

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",
     ...
于 2014-07-24T02:00:24.997 回答
2

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

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

注意反斜杠前有一个空格

于 2018-06-09T09:30:31.013 回答
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>

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

于 2021-01-21T07:24:03.830 回答
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 代码中的任何文字值中删除空格，因此如果要保留这些空格，则需要修改正则表达式和函数。在我上面的示例中，如果 psn1.personUID 包含多个连续的空格，它们将被缩减为一个空格。但它适用于大多数类型的属性。

于 2020-08-01T10:55:41.227 回答
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')
于 2021-03-16T15:11:52.850 回答