Jade: Tautan di dalam paragraf

Saya mencoba menulis beberapa paragraf dengan Jade, tetapi merasa kesulitan ketika ada tautan di dalam paragraf.

Yang terbaik yang bisa saya dapatkan, dan saya bertanya-tanya apakah ada cara untuk melakukannya dengan lebih sedikit markup:

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.

Mulai giok 1.0 ada cara yang lebih mudah untuk menangani ini, sayangnya saya tidak dapat menemukannya di mana pun di dokumentasi resmi.

Anda dapat menambahkan elemen sebaris dengan sintaks berikut:

#[a.someClass A Link!]

Jadi, contoh tanpa masuk ke beberapa baris di ap, akan menjadi seperti ini:

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]

Anda juga bisa melakukan elemen inline bersarang:

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

Anda dapat menggunakan filter penurunan harga dan menggunakan penurunan harga (dan HTML yang diizinkan) untuk menulis paragraf Anda.

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

Sebagai alternatif, sepertinya Anda dapat menggunakan HTML tanpa masalah:

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

Saya sendiri tidak menyadarinya dan hanya mengujinya menggunakan alat baris perintah giok. Sepertinya bekerja dengan baik.

EDIT: Sepertinya itu benar-benar dapat dilakukan sepenuhnya di Jade sebagai berikut:

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

Jangan lupa ruang ekstra di akhir ayat (meskipun Anda tidak dapat melihatnya. Dan antara | and. Jika tidak, akan terlihat seperti ini para.a linkandtidakpara a link and

Cara lain untuk melakukannya:

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

Pendekatan lain yang sama sekali berbeda, adalah membuat filter, yang pertama kali menusuk mengganti tautan, dan kemudian merender dengan giok kedua.

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

Merender:

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

Contoh kerja penuh: index.js (dijalankan dengan 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());

Solusi yang lebih umum akan membuat sub-blok giok mini dalam blok unik (mungkin diidentifikasi oleh sesuatu seperti ${jade goes here}), jadi ...

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

Ini dapat diterapkan dengan cara yang persis sama seperti di atas.

Contoh kerja solusi umum:

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

Jika tautan Anda berasal dari sumber data, Anda dapat menggunakan:

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

Lihat interpolasi

Edit: Fitur ini telah diimplementasikan dan masalah ditutup, lihat jawaban di atas.

Saya telah memposting masalah untuk menambahkan fitur ini ke Jade

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

Belum punya waktu untuk menerapkannya, lebih banyak +1 dapat membantu!

Ini yang terbaik yang bisa saya lakukan

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

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

Merender ...

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

Bekerja dengan baik, tetapi terasa seperti sedikit retasan - harus ada sintaks untuk ini!

Saya tidak menyadari bahwa batu giok membutuhkan garis per tag. Saya pikir kita bisa menghemat ruang. Jauh lebih baik jika ini bisa dipahami ul> li> a [class = "emmet"] {text}

Saya harus menambahkan titik tepat di belakang tautan, seperti ini:

This is your test [link].

Saya menyelesaikannya seperti ini:

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

Seperti yang disarankan oleh Daniel Baulig, digunakan di bawah ini dengan parameter dinamis

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

Ternyata ada (setidaknya sekarang) opsi yang sangat sederhana

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
    |  

Hal paling sederhana yang pernah ada;) tetapi saya berjuang dengan ini sendiri selama beberapa detik. Siapa pun, Anda perlu menggunakan entitas HTML untuk tanda "@" -> @ Jika Anda ingin menyertakan tautan, katakanlah / beberapa alamat email Anda menggunakan ini:

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