Jade: Các liên kết bên trong một đoạn văn


118

Tôi đang cố gắng viết một vài đoạn văn bằng Jade, nhưng cảm thấy khó khăn khi có các liên kết bên trong một đoạn văn.

Điều tốt nhất tôi có thể nghĩ ra và tôi đang tự hỏi liệu có cách nào để làm điều đó với ít đánh dấu hơn không:

p
  span.
   this is the start
   of the para.
  a(href="http://example.com") a link
  span.
    and this is the rest of
    the paragraph.

Câu trả lời:


116

Đối với jade 1.0, có một cách dễ dàng hơn để giải quyết vấn đề này, rất tiếc là tôi không thể tìm thấy nó ở bất kỳ đâu trong tài liệu chính thức.

Bạn có thể thêm các phần tử nội dòng bằng cú pháp sau:

#[a.someClass A Link!]

Vì vậy, một ví dụ mà không đi vào nhiều dòng trong ap, sẽ là một cái gì đó như:

p: #[span this is the start of the para] #[a(href="http://example.com") a link] #[span and this is the rest of the paragraph]

Bạn cũng có thể thực hiện các phần tử nội tuyến lồng nhau:

p: This is a #[a(href="#") link with a nested #[span element]]

6
Điều này được ghi lại tại đây: jade-lang.com/reference/interpolation trong "Nội suy thẻ".
olan

94

Bạn có thể sử dụng bộ lọc đánh dấu và sử dụng đánh dấu xuống (và HTML được phép) để viết đoạn văn của mình.

:markdown
  this is the start of the para.
  [a link](http://example.com)
  and this is the rest of the paragraph.

Ngoài ra, có vẻ như bạn có thể đơn giản tải HTML mà không gặp bất kỳ sự cố nào:

p
  | this is the start of the para.
  | <a href="http://example.com">a link</a>
  | and this is he rest of the paragraph

Bản thân tôi cũng không nhận ra điều này và chỉ thử nghiệm nó bằng công cụ dòng lệnh ngọc bích. Nó dường như hoạt động tốt.

CHỈNH SỬA: Có vẻ như nó thực sự có thể được thực hiện hoàn toàn bằng Jade như sau:

p
  | this is the start of the para  
  a(href='http://example.com;) a link
  |  and this is the rest of the paragraph

Đừng quên một khoảng trống thừa ở cuối đoạn para (mặc dù bạn không thể nhìn thấy nó. Và ở giữa | and. Nếu không, nó sẽ giống như thế này thì para.a linkandkhôngpara a link and


1
Cảm ơn. Markdown là hoàn hảo cho việc này. Tôi thấy gói chiết khấu NPM không được biên dịch và có vấn đề với gói NPM markdown (gói JS thuần túy) với 0,5 (gói này sử dụng biểu thức chính quy làm hàm, đã bị xóa khỏi Chrome). Đối với bất kỳ ai khác đang đọc, một giải pháp rõ ràng là "npm install markdown-js", sau đó đổi tên nó thành "markdown". (Như tôi thấy Jade không nhìn vào "markdown-js".) Làm việc cho tôi.
mahemoff

9
Có vẻ như vấn đề này có thể được giải quyết trong tương lai gần bằng phép nội suy, vì vậy bạn có thể thực hiện p This is a paragraph #[a(href="#") with a link] in it. Xem github.com/visionmedia/jade/issues/936
Sẽ

3
Nếu bạn sử dụng tùy chọn thứ ba, hãy cẩn thận xem bạn đang sử dụng trình soạn thảo nào, tôi đang sử dụng Sublime và nó sẽ xóa khoảng trắng ở cuối đoạn theo mặc định. Cuối cùng, tôi đã chọn phương án 2 ở trên vì nó ít đau nhất.
Ryan Eastabrook

Sublime chỉ loại bỏ các dấu cách ở cuối nếu bạn đã yêu cầu. Tôi có, vì vậy tôi sử dụng một &nbsp;ở cuối dòng đầu tiên, nhưng tôi đang tranh luận về cách tiếp cận của mình trong tương lai.
Dave Newton

1
Điều này đã được giải quyết trong Jade 1.0, xem stackoverflow.com/questions/6989653#answer-23923895
Emilien

45

Một cách khác để làm điều đó:

p
  | this is the start of the para
  a(href="http://example.com") a link
  | this is he rest of the paragraph.

4
Đây là giải pháp thanh lịch nhất.
superluminary

3

Một cách tiếp cận hoàn toàn khác, sẽ là tạo một bộ lọc, bộ lọc đầu tiên sẽ thay thế các liên kết, sau đó hiển thị bằng ngọc thứ hai

h1 happy days
:inline
  p this can have [a link](http://going-nowhere.com/) in it

Kết xuất:

<h1>happy days</h1><p>this can have <a href='http://going-nowhere.com/'>a link</a> in it</p>

Ví dụ hoạt động đầy đủ: index.js (chạy với nodejs)

var f, jade;

jade = require('jade');

jade.filters.inline = function(txt) {
  // simple regex to match links, might be better as parser, but seems overkill
  txt = txt.replace(/\[(.+?)\]\((.+?)\)/, "<a href='$2'>$1</a>");
  return jade.compile(txt)();
};

jadestring = ""+ // p.s. I hate javascript's non-handling of multiline strings
  "h1 happy days\n"+
  ":inline\n"+
  "  p this can have [a link](http://going-nowhere.com/) in it"


f = jade.compile(jadestring);

console.log(f());

Một giải pháp tổng quát hơn sẽ làm cho các khối ngọc nhỏ nhỏ trong một khối duy nhất (có thể được xác định bởi một cái gì đó giống như ${jade goes here}), vì vậy ...

p some paragraph text where ${a(href="wherever.htm") the link} is embedded

Điều này có thể được thực hiện theo cách chính xác như trên.

Ví dụ làm việc của giải pháp chung:

var f, jade;

jade = require('jade');

jade.filters.inline = function(txt) {
  txt = txt.replace(/\${(.+?)}/, function(a,b){
    return jade.compile(b)();
  });
  return jade.compile(txt)();
};

jadestring = ""+ // p.s. I hate javascript's non-handling of multiline strings
  "h1 happy days\n"+
  ":inline\n"+
  "  p this can have ${a(href='http://going-nowhere.com/') a link} in it"


f = jade.compile(jadestring);

console.log(f());

1
Đây là cách quá phức tạp như một giải pháp. Có nhiều cách dễ dàng hơn bây giờ.
JGallardo


3

Nếu các liên kết của bạn đến từ một nguồn dữ liệu, bạn có thể sử dụng:

  ul
    each val in results
      p
        | blah blah 
        a(href="#{val.url}") #{val.name}
        |  more blah

Xem phép nội suy


2

Chỉnh sửa: Tính năng này đã được triển khai và vấn đề đã đóng, xem câu trả lời ở trên.


Tôi đã đăng vấn đề để thêm tính năng này vào Jade

https://github.com/visionmedia/jade/issues/936

Tuy nhiên, tôi chưa có thời gian để triển khai, nhiều +1 hơn có thể giúp ích!


2
Cảm ơn rất nhiều @jpillora vì đã tạo ra vấn đề đó, sự cố đã kết thúc bằng việc triển khai tính năng nội tuyến này.
Emilien

1

Đây là điều tốt nhất tôi có thể nghĩ ra

-var a = function(href,text){ return "<a href='"+href+"'>"+text+"</a>" }

p this is an !{a("http://example.com/","embedded link")} in the paragraph

Kết xuất ...

<p>this is an <a href='http://example.com/'>embedded link</a> in the paragraph</p>

Hoạt động ổn, nhưng có vẻ hơi bị hack - thực sự nên có một cú pháp cho việc này!


0

Tôi không nhận ra rằng ngọc bích yêu cầu một dòng trên mỗi thẻ. Tôi nghĩ chúng ta có thể tiết kiệm không gian. Tốt hơn nhiều nếu điều này có thể hiểu được ul> li> a [class = "emmet"] {text}


0

Tôi đã phải thêm dấu chấm ngay sau một liên kết, như sau:

This is your test [link].

Tôi đã giải quyết nó như thế này:

label(for="eula").lbl.lbl-checkbox.lbl-eula #{i18n.signup.text.accept_eula}
    | <a href="#about/termsandconditions" class=".lnk.lnk-eula">#{i18n.signup.links.eula}</a>.

0

Theo đề xuất của Daniel Baulig, được sử dụng bên dưới với các thông số động

| <a href=!{aData.link}>link</a>

0

Hóa ra có (ít nhất là bây giờ) một lựa chọn hoàn toàn đơn giản

p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.

2
Loại bỏ mục đích sử dụng bộ tiền xử lý nếu bạn phải nhúng lại vào html khi có dấu hiệu rắc rối đầu tiên.
superluminary

2
Đồng ý nhưng sử dụng một đường ống và dòng mới mỗi khi bạn cần thêm thẻ nội tuyến với chúng tôi là điều khó lý tưởng. Trong mới để Jade nhưng điều này dường như thiếu sót lớn
Simon H

2
Tôi cũng vậy, tôi đã xem qua từ haml, nơi một thẻ có tiền tố là%. Jade đẹp hơn nhiều.
superluminary

0
p
    | At Times Like These We Suggest Just Going:
    a(ui-sref="app") HOME
    | &nbsp;

-1

Điều đơn giản nhất từ ​​trước đến nay;) nhưng tôi đã tự mình đấu tranh với điều này trong vài giây. Bất kỳ ai, bạn cần sử dụng thực thể HTML cho dấu "@" -> &#64; Nếu bạn muốn bao gồm một liên kết, giả sử địa chỉ email của bạn / một số sử dụng:

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.