node.js - plantillas - Jade: enlaces dentro de un párrafo
render node js (13)
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]]
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.
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!
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!
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
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}
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 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());
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
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.
Según lo sugerido por Daniel Baulig, se usa a continuación con parámetros dinámicos
| <a href=!{aData.link}>link</a>
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
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>.
p
| At Times Like These We Suggest Just Going:
a(ui-sref="app") HOME
|