Jade: enlaces dentro de un párrafo

Estoy tratando de escribir algunos párrafos con Jade, pero me resulta difícil cuando hay enlaces dentro de un párrafo.

Lo mejor que se me ocurre, y me pregunto si hay una manera de hacerlo con menos marcado:

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 partir de jade 1.0, hay una manera más fácil de lidiar con esto, desafortunadamente no puedo encontrarlo en ninguna parte de la documentación oficial.

Puede agregar elementos en línea con la siguiente sintaxis:

#[a.someClass A Link!]

Entonces, un ejemplo sin entrar en varias líneas en una p, sería algo como:

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]

También puede hacer elementos en línea anidados:

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

Puede utilizar un filtro de rebajas y utilizar rebajas (y HTML permitido) para escribir su párrafo.

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

Alternativamente, parece que simplemente puede salir HTML sin ningún problema:

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

Yo mismo no sabía esto y lo probé usando la herramienta de línea de comandos de jade. Parece funcionar bien.

EDITAR: Parece que en realidad se puede hacer por completo en Jade de la siguiente manera:

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

No olvide un espacio adicional al final de para (aunque no puede verlo. Y entre | and. De lo contrario, se verá así para.a linkandnopara a link and

Otra forma de hacerlo:

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

Otro enfoque completamente diferente sería crear un filtro, que primero intenta reemplazar enlaces y luego se renderiza con jade en segundo lugar.

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>

Ejemplo de trabajo completo: index.js (ejecutar 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 solución más general representaría mini sub-bloques de jade en un bloque único (tal vez identificado por algo como ${jade goes here}), así que ...

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

Esto podría implementarse exactamente de la misma manera que anteriormente.

Ejemplo de trabajo de solución general:

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

Si sus enlaces provienen de una fuente de datos, puede utilizar:

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

Ver interpolación

Editar: esta función se implementó y el problema se cerró, consulte la respuesta anterior.

Publiqué un problema para agregar esta función a Jade

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

Sin embargo, no he tenido tiempo de implementarlo, ¡más +1 pueden ayudar!

Esto es lo mejor que se me ocurre

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

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

Renders ...

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

Funciona bien, pero se siente como un truco, ¡realmente debería haber una sintaxis para esto!

No me di cuenta de que el jade requiere una línea por etiqueta. Pensé que podíamos ahorrar espacio. Mucho mejor si esto se puede entender ul> li> a [class = "emmet"] {text}

Tuve que agregar un punto directamente detrás de un enlace, como este:

This is your test [link].

Lo resolví así:

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

Como sugirió Daniel Baulig, usado a continuación con parámetros dinámicos

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

Resulta que hay (al menos ahora) una opción perfectamente simple

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 más simple que jamás haya existido;) pero estuve luchando con esto yo mismo durante unos segundos. En cualquier caso, debe usar una entidad HTML para el signo "@" -> @ Si desea incluir un enlace, digamos que su / alguna dirección de correo electrónico use esto:

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