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

Question

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

Le meilleur que je puisse trouver, et je me demande s’il est possible 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.
 

Answer 1

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

Ainsi, 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 imbriqués en ligne:

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

Answer 2

Vous pouvez utiliser un abattement de filtre et utiliser markdown (et autorisé HTML) pour l'écriture de 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 pouvez tout simplement en sortie 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 conscient de moi-même et juste testé à l'aide de la jade outil de ligne de commande. Il semble très bien fonctionner.

EDIT: Il semble qu'il peut réellement ê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 pouvez pas le voir. et entre l'un et l'autre. Sinon, il ressemblera à ceci "par.un lienet" non "par un lien et"

Answer 3

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.
 

Answer 4

Une autre approche complètement différente, serait de créer un filtre, qui a le premier coup de couteau à remplacer les liens, et rend alors avec jade deuxième

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

Rend:

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

Plein de travail exemple: index.js (courir 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());

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

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

Answer 5

C'est le meilleur 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
 

Renders ...

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

Fonctionne bien, mais semble être un peu un bidouillage - il devrait y avoir une syntaxe pour cela!