Nhiều dòng cho giá trị thuộc tính dài trong Jade/Pug

Question

Làm cách nào để viết giá trị thuộc tính dài trên nhiều dòng trong Jade/Pug?

Đường dẫn SVG có xu hướng thực sự dài. Chúng tôi muốn viết một giá trị thuộc tính trên nhiều dòng để giúp dễ đọc. Ví dụ: bạn có thể dễ dàng đọc được tutorial của Mozilla bằng HTML.

Bất kỳ cách nào để thay đổi điều này:

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

vào một cái gì đó như thế này:

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

mà không gây ra một "dấu hiệu bất ngờ" lỗi.

Answer 1

Tôi có cùng vấn đề này nhưng trong ngữ cảnh knockoutj. Tôi đã sử dụng dấu gạch chéo ngược như vậy. Trước đây:

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

Bây giờ là:

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

Lưu ý: Các dấu chéo ngược phải được tuân thủ ngay lập tức bằng một dòng mới. Tôi không chắc liệu đây có phải là cách 'chính thức' hay không, tôi chỉ làm điều đó và có vẻ như nó hoạt động. Một nhược điểm của phương pháp này là các chuỗi sau đó được trả lại với không gian màu trắng còn nguyên vẹn. Vì vậy, ví dụ trên được hiển thị dưới dạng:

<div data-bind="template: {     name: 'ingredient-template',     data: $data}"> 

Điều này có thể khiến nó không thể sử dụng được cho ví dụ của bạn.

Chỉnh sửa Cảm ơn Jon. Ý tưởng var từ bình luận của bạn có lẽ tốt hơn mặc dù vẫn không lý tưởng. Một cái gì đó như:

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

Không chắc chắn rằng các ký tự thừa có giá trị giảm độ dài dòng.

Answer 2

Tôi đã tìm kiếm câu trả lời cho điều này và tôi tin rằng bạn có thể chia nhỏ thuộc tính ngọc bích thành nhiều dòng bằng cách bỏ qua dấu phẩy.

Ví dụ:

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

Tôi thấy điều này cam kết thông báo về nó: https://github.com/visionmedia/jade/issues/65

Answer 3

Bạn có thể làm điều đó bằng cách đóng chuỗi tại dòng-break, thêm một '+', và sau đó mở một chuỗi mới trên dòng tiếp nối .

Dưới đây là một ví dụ:

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 4

Đây là một câu hỏi cũ nhưng đây là một câu trả lời mới.

Trong trường hợp của tôi, tôi đang sử dụng PUG trong các mẫu vue trong các thành phần tệp đơn lẻ. Vì vậy, sau đây làm việc cho tôi.

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

tức làsử dụng chuỗi suy ' thay vì ' hoặc "