Jade: collegamenti all'interno di un paragrafo

Sto cercando di scrivere alcuni paragrafi con Jade, ma trovo difficile quando ci sono collegamenti all'interno di un paragrafo.

Il meglio che riesco a trovare e mi chiedo se c'è un modo per farlo con meno 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.

A partire da jade 1.0 c'è un modo più semplice per affrontare questo problema, purtroppo non riesco a trovarlo da nessuna parte nella documentazione ufficiale.

Puoi aggiungere elementi in linea con la seguente sintassi:

#[a.someClass A Link!]

Quindi, un esempio senza entrare in più righe in ap, sarebbe qualcosa del tipo:

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]

Puoi anche creare elementi inline nidificati:

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

Puoi utilizzare un filtro markdown e utilizzare markdown (e HTML consentito) per scrivere il tuo paragrafo.

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

In alternativa, sembra che tu possa semplicemente estrarre l'HTML senza problemi:

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

Io stesso non ne ero a conoscenza e l'ho appena testato utilizzando lo strumento della riga di comando jade. Sembra funzionare benissimo.

EDIT: Sembra che in realtà possa essere fatto interamente in Jade come segue:

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

Non dimenticare uno spazio extra alla fine del para (anche se non puoi vederlo. E in mezzo | and. Altrimenti sembrerà para.a linkandnon cosìpara a link and

Un altro modo per farlo:

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

Un altro approccio completamente diverso, sarebbe quello di creare un filtro, che ha prima tentato di sostituire i collegamenti, quindi esegue il rendering con la giada secondo

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

Renders:

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

Esempio di lavoro completo: index.js (eseguito con 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());

Una soluzione più generale renderebbe i mini sottoblocchi di giada in un blocco unico (forse identificato da qualcosa di simile ${jade goes here}), quindi ...

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

Questo potrebbe essere implementato esattamente nello stesso modo come sopra.

Esempio di lavoro di soluzione generale:

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

Se i tuoi link provengono da un'origine dati puoi utilizzare:

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

Vedi interpolazione

Modifica: questa funzione è stata implementata e il problema è stato risolto, vedere la risposta sopra.

Ho pubblicato un problema per aggiungere questa funzione a Jade

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

Non ho avuto il tempo di implementarlo, però, più +1 potrebbero aiutare!

Questo è il meglio che riesco a trovare

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

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

Rende ...

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

Funziona bene, ma sembra un po 'un trucco: dovrebbe esserci davvero una sintassi per questo!

Non mi ero reso conto che jade richiede una riga per tag. Ho pensato che possiamo risparmiare spazio. Molto meglio se questo può essere compreso ul> li> a [class = "emmet"] {text}

Ho dovuto aggiungere un punto direttamente dietro un collegamento, come questo:

This is your test [link].

L'ho risolto in questo modo:

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

Come suggerito da Daniel Baulig, utilizzato di seguito con i parametri dinamici

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

Si scopre che c'è (almeno ora) un'opzione perfettamente semplice

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
    |  

La cosa più semplice di sempre;) ma stavo lottando con questo io stesso per alcuni secondi. Comunque, devi usare un'entità HTML per il segno "@" -> @ Se vuoi includere un link, diciamo che il tuo / qualche indirizzo email usa questo:

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