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

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.

Đố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]]

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

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.

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());

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

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!

Đâ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!

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}

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>.

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>

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.

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

Đ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 "@" -> @ 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@myemail.com