Jade: enlaces dentro de un párrafo


118

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.

Respuestas:


116

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

6
Esto se documenta aquí: jade-lang.com/reference/interpolation en "Interpolación de etiquetas".
olan

94

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


1
Gracias. Markdown es perfecto para esto. Encontré que el paquete de descuento NPM no se compiló y hay un problema con el paquete NPM markdown (el JS puro) con 0.5 (está usando expresiones regulares como funciones, eliminadas de Chrome). Para cualquier otra persona que lea, aparentemente una solución es "npm install markdown-js" y luego cambiarle el nombre a "markdown". (Como encontré, Jade no mira "markdown-js".) Funcionó para mí.
mahemoff

9
Parece que esto podría abordarse en un futuro próximo con interpolación, para que pueda hacerlo p This is a paragraph #[a(href="#") with a link] in it. Ver github.com/visionmedia/jade/issues/936
Will

3
Si usa la tercera opción, tenga cuidado con el editor que está usando, estoy usando Sublime y eliminará el espacio al final del párrafo de forma predeterminada. Al final, elegí la opción 2 anterior porque era la menos dolorosa.
Ryan Eastabrook

Sublime solo elimina los espacios finales si se lo ha indicado. Sí, así que utilizo un &nbsp;al final de la primera línea, pero estoy debatiendo mis enfoques en el futuro.
Dave Newton

1
Esto se ha resuelto en Jade 1.0, consulte stackoverflow.com/questions/6989653#answer-23923895
Emilien

45

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.

4
Esta es la solución más elegante.
superluminario

3

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

1
Esta es una solución demasiado complicada. Ahora hay formas más fáciles.
JGallardo


3

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


2

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!


2
Muchas gracias @jpillora por crear ese problema, que terminó con la implementación de esta función de inserción.
Emilien

1

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!


0

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}


0

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

0

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

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

0

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.

2
Algo así como derrota el propósito de usar un preprocesador si tiene que volver a sumergirse en html a la primera señal de problemas.
superluminario

2
De acuerdo, pero usando una tubería y una nueva línea cada vez que necesite agregar una etiqueta en línea, no es lo ideal. Es nuevo en el jade, pero esto parece una omisión importante
Simon H

2
Yo también, vengo de haml donde una etiqueta tiene el prefijo%. Sin embargo, Jade es mucho más bonita.
superluminario

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

-1

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 "@" -> &#64; Si desea incluir un enlace, digamos que su / alguna dirección de correo electrónico use esto:

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.