Jade: liens à l'intérieur d'un paragraphe

J'essaie de créer quelques paragraphes avec Jade, mais je trouve cela difficile quand il y a des liens dans un paragraphe.

Le mieux que je puisse trouver, et je me demande s'il existe un moyen de le faire avec moins de balisage:

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.

Depuis jade 1.0, il existe un moyen plus simple de gérer cela, malheureusement je ne le trouve nulle part dans la documentation officielle.

Vous pouvez ajouter des éléments en ligne avec la syntaxe suivante:

#[a.someClass A Link!]

Donc, un exemple sans entrer dans plusieurs lignes dans ap, serait quelque chose comme:

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]

Vous pouvez également créer des éléments en ligne imbriqués:

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

Vous pouvez utiliser un filtre de démarquage et utiliser le démarquage (et le HTML autorisé) pour écrire votre paragraphe.

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

Alternativement, il semble que vous puissiez simplement sortir du HTML sans aucun problème:

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

Je n'étais pas au courant de cela moi-même et je l'ai juste testé à l'aide de l'outil de ligne de commande jade. Cela semble fonctionner très bien.

EDIT: Il semble que cela puisse être fait entièrement en Jade comme suit:

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

N'oubliez pas un espace supplémentaire à la fin de para (bien que vous ne puissiez pas le voir. Et entre | and. Sinon, il ressemblera à ceci para.a linkandnonpara a link and

Une autre façon de le faire:

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

Une autre approche complètement différente consisterait à créer un filtre, qui a d'abord tenté de remplacer les liens, puis rendu avec jade ensuite

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

Rendus:

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

Exemple de travail complet: index.js (exécuté avec 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());

Une solution plus générale rendrait les mini sous-blocs de jade dans un bloc unique (peut-être identifié par quelque chose comme ${jade goes here}), donc ...

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

Cela pourrait être mis en œuvre exactement de la même manière que ci-dessus.

Exemple de travail de solution générale:

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 vos liens proviennent d'une source de données, vous pouvez utiliser:

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

Voir interpolation

Modifier: cette fonctionnalité a été mise en œuvre et le problème a été résolu, voir la réponse ci-dessus.

J'ai publié un problème pour ajouter cette fonctionnalité à Jade

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

Cependant, je n'ai pas eu le temps de l'implémenter, plus de +1 peuvent aider!

C'est le mieux que je puisse trouver

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

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

Rend ...

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

Fonctionne bien, mais ressemble un peu à un hack - il devrait vraiment y avoir une syntaxe pour cela!

Je ne savais pas que le jade nécessite une ligne par tag. Je pensais que nous pouvions économiser de l'espace. Beaucoup mieux si cela peut être compris ul> li> a [class = "emmet"] {text}

J'ai dû ajouter un point directement derrière un lien, comme ceci:

This is your test [link].

Je l'ai résolu comme ceci:

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

Comme suggéré par Daniel Baulig, utilisé ci-dessous avec des paramètres dynamiques

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

Il s'avère qu'il y a (au moins maintenant) une option parfaitement 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 chose la plus simple qui soit;) mais je me suis débattu moi-même pendant quelques secondes. Anywho, vous devez utiliser une entité HTML pour le signe "@" -> @ Si vous voulez inclure un lien, disons que votre / une adresse e-mail utilise ceci:

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