node.js - plantillas - Jade: enlaces dentro de un párrafo

render node js

Question

Intento escribir algunos párrafos con Jade, pero 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.

Answer 1

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 ap sería algo así 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]]

Answer 2

Editar: esta característica se implementó y el problema se cerró, ver respuesta arriba.

He publicado un problema para que esta característica se agregue a Jade

github.com/visionmedia/jade/issues/936

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

Answer 3

Esto es lo mejor que puedo pensar

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

Answer 4

Lo más simple que he visto nunca;) pero estuve luchando con esto por unos segundos. Anywho, necesitas 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

Answer 5

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

Answer 6

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.

Answer 7

Otro enfoque completamente diferente sería crear un filtro, que primero apuñale los enlaces, y luego renderice 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 subbloques 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 arriba.

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

Answer 8

Puede usar un filtro de reducción y usar el descuento (y el 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 puede simplemente extraer 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 no estaba al tanto de esto y simplemente lo probé usando la herramienta de línea de comandos de jade. Parece que funciona bien.

EDITAR: parece que realmente se puede hacer completamente 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 olvides un espacio extra al final de para (aunque no puedas verlo, y entre | and . De lo contrario, se verá como este para.a linkand para a link and no para a link and

Answer 9

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

p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect''s</a> export functionality.

Answer 10

Según lo sugerido por Daniel Baulig, se usa a continuación con parámetros dinámicos

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

Answer 11

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

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

Ver jade-lang.com/reference/interpolation

Answer 12

Tuve que agregar un período directamente detrás de un enlace, como este:

This is your test [link].

Lo solucioné 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>.

Answer 13

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