Jade: Bir paragrafın içindeki bağlantılar

Jade ile birkaç paragraf yazmaya çalışıyorum, ancak bir paragrafın içinde bağlantılar varken bunu zor buluyorum.

Bulabildiğim en iyi şey ve bunu daha az işaretlemeyle yapmanın bir yolu olup olmadığını merak ediyorum:

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.

Jade 1.0'dan itibaren bununla başa çıkmanın daha kolay bir yolu var, ne yazık ki resmi belgelerde hiçbir yerde bulamıyorum.

Aşağıdaki sözdizimi ile satır içi öğeler ekleyebilirsiniz:

#[a.someClass A Link!]

Öyleyse, ap'de birden fazla satıra girmeyen bir örnek şöyle olabilir:

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]

Ayrıca iç içe yerleştirilmiş satır içi öğeler de yapabilirsiniz:

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

Bir markdown filtresi kullanabilir ve paragrafınızı yazmak için markdown (ve izin verilen HTML) kullanabilirsiniz.

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

Alternatif olarak, HTML'yi sorunsuz bir şekilde çıkarabileceğiniz gibi görünüyor:

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

Bunun farkında değildim ve sadece jade komut satırı aracını kullanarak test ettim. İyi çalışıyor gibi görünüyor.

DÜZENLEME: Görünüşe göre tamamen Jade'de şu şekilde yapılabilir:

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

Eğer onu göremiyorum rağmen (paragraf sonundaki fazladan bir boşluk unutmayın. Arasında | and. Aksi takdirde bu gibi görünecektir para.a linkanddeğilpara a link and

Bunu yapmanın başka bir yolu:

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

Tamamen farklı bir başka yaklaşım, ilk önce bağlantıları değiştirirken bıçaklayan ve ardından yeşim taşı ile işleyen bir filtre oluşturmaktır.

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

çizer:

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

Tam çalışma örneği: index.js (nodejs ile çalıştırın)

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

Daha genel bir çözüm, mini yeşim alt bloklarını benzersiz bir blokta (belki benzer bir şeyle tanımlanabilir ${jade goes here}) oluşturur, bu yüzden ...

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

Bu, yukarıdaki ile tamamen aynı şekilde uygulanabilir.

Genel çözümün çalışma örneği:

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

Bağlantılarınız bir veri kaynağından geliyorsa, kullanabilirsiniz:

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

Enterpolasyona bakın

Düzenleme: Bu özellik uygulandı ve sorun kapatıldı, yukarıdaki cevaba bakın.

Bu özelliğin Jade'e eklenmesi için bir sorun yayınladım

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

Yine de uygulamak için zamanım olmadı, daha fazla +1 yardımcı olabilir!

Bu bulabileceğim en iyi şey

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

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

Çizer ...

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

Tamam çalışıyor, ancak biraz hack gibi geliyor - bunun için gerçekten bir sözdizimi olmalı!

Jade'in etiket başına bir satır gerektirdiğini fark etmemiştim. Yerden tasarruf edebileceğimizi düşündüm. Bu anlaşılabilirse çok daha iyi olur ul> li> a [class = "emmet"] {text}

Bir bağlantının hemen arkasına nokta eklemem gerekiyordu, şöyle:

This is your test [link].

Bunu şu şekilde çözdüm:

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

Daniel Baulig tarafından önerildiği gibi, aşağıda dinamik parametrelerle kullanılmıştır

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

Görünüşe göre (şimdi en azından) tamamen basit bir seçenek var

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
    |  

Şimdiye kadarki en basit şey;) ama bununla birkaç saniyeliğine kendim mücadele ediyordum. Her neyse, "@" işareti için bir HTML varlığı kullanmanız gerekir -> @ Bir bağlantı eklemek istiyorsanız, diyelim ki / bazı e-posta adresiniz şunu kullanın:

p
    a(href="mailto:me@myemail.com" target="_top") me@myemail.com