web-dev-qa-db-ja.com

ヒスイ/パグの長い属性値の複数行

Jade/Pugで複数の行に長い属性値を書き込むにはどうすればよいですか？

SVGパスは非常に長くなる傾向があります。読みやすくするために、複数行にわたって属性値を書き込みます。たとえば、MozillaのHTMLで記述された 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")

「予期しないトークン」エラーをトリガーすることなく。

pug
38
Jon Saw

私はこれと同じ問題を抱えていますが、knockoutjsのコンテキストです。私はそのようにバックスラッシュを使用しました。以前：

div(data-bind="template: {name: 'ingredient-template', data: $data}")

今：

div(data-bind="template: {\
    name: 'ingredient-template',\
    data: $data}")

注：バックスラッシュの直後には改行が必要です。これが「公式」な方法かどうかはわかりませんが、私はそれをやっただけで、うまくいくようです。このメソッドの欠点の1つは、文字列が空白のままでレンダリングされることです。したがって、上記の例は次のようにレンダリングされます。

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

余分な文字が行の長さを短くするだけの価値があるかどうかはわかりません。

36
Sebastian Carroll

これは古い質問ですが、ここでは新しい回答です。

私の場合、私はPUG in vue単一ファイルコンポーネントのテンプレートを使用しています。したがって、次のように動作します。

<template lang='pug'>
  .day(:class=`{
    'disabled': isDisabled,
    'selected': isSameDay,
    'in-range': isInRange,
    'today': isToday,
    'weekend': isWeekend,
    'outside-month': isOutsideMonth }`,
    @click='selectDay'
  ) {{label}}
</template>

つまり、文字列補間を使用します`の代わりに'または"

18
Petur Subev

私はこれに対する答えを探していましたが、末尾のコンマをスキップすることで、玉の属性を複数の行に分割できると信じています。

例.

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

私はそれについてこのコミットメッセージを見つけました： https://github.com/visionmedia/jade/issues/65

15
blischalk

改行で文字列を閉じ、「+」を追加してから、継続行で新しい文字列を開くことでそれを行うことができます。

次に例を示します。

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",
     ...
7
Murphy Randle

また、属性値として文字列がありました。私は反応を使用しています

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

バックスラッシュの前にスペースがあることに注意してください

0
fatahn