web-dev-qa-db-fra.com

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

J'essaie de créer quelques paragraphes avec Jade, mais c'est 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.
node.jsmarkuppug
115
mahemoff

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 un p, 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]]
113
Clayton Gulick

Vous pouvez utiliser un filtre de démarquage et utiliser le démarquage (et le code 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 pouvez 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 ne le savais pas moi-même et je l'ai simplement testé à l'aide de l'outil de ligne de commande jade. Cela semble bien fonctionner.

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, cela ressemblera à ceci para.a linkand ne pas para a link and

93
Daniel Baulig

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

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

3
P.Brian.Mackey

Une autre approche complètement différente serait de créer un filtre, qui doit d’abord remplacer les liens, puis rendu avec jade en second.

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>

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 en 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 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());
3
Billy Moon

Edit: Cette fonctionnalité a été implémentée et le problème est résolu, voir la réponse ci-dessus.

J'ai posté un problème pour que cette fonctionnalité soit ajoutée à Jade

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

Je n'ai pas eu le temps de le mettre en œuvre, plus de +1 peut aider!

2
jpillora

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!

1
Billy Moon

Comme suggéré par Daniel Baulig, utilisé ci-dessous avec params dynamiques

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

J'ai dû ajouter une période directement derrière un lien, comme ceci:

This is your test [link].

Je l'ai résolu comme ça:

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
Rick Pastoor
p
    | At Times Like These We Suggest Just Going:
    a(ui-sref="app") HOME
    | &nbsp;
0
Dr Manhattan

Je n'avais pas réalisé que le jade nécessite une ligne par étiquette. Je pensais que nous pouvons économiser de l'espace. Bien mieux si cela peut être compris ul> li> a [class = "emmet"] {text}

0
paoloumali

Il s'avère qu'il y a (maintenant au moins) une option parfaitement simple

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