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


118

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.

Réponses:


116

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

6
Ceci est documenté ici: jade-lang.com/reference/interpolation sous "Tag Interpolation".
olan

94

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


1
Merci. Markdown est parfait pour cela. J'ai trouvé que le package de réduction NPM n'a pas été compilé et qu'il y a un problème avec le package NPM markdown (le pur JS) avec 0.5 (il utilise des expressions régulières comme fonctions, supprimées de Chrome). Pour tous ceux qui lisent, une solution est apparemment de "npm install markdown-js", puis de le renommer en "markdown". (Comme je l'ai trouvé, Jade ne regarde pas "markdown-js".) A travaillé pour moi.
mahemoff

9
On dirait que cela pourrait être résolu dans un proche avenir avec une interpolation, afin que vous puissiez le faire p This is a paragraph #[a(href="#") with a link] in it. Voir github.com/visionmedia/jade/issues/936
Sera

3
Si vous utilisez la troisième option, faites attention à l'éditeur que vous utilisez, j'utilise Sublime et cela supprimera l'espace à la fin du paragraphe par défaut. Finalement, j'ai choisi l'option 2 ci-dessus car c'était la moins douloureuse.
Ryan Eastabrook

Sublime ne supprime les espaces de fin que si vous le lui avez dit. J'ai, donc j'utilise un &nbsp;à la fin de la première ligne, mais je débat de mes approches dans le futur.
Dave Newton

1
Cela a été résolu dans Jade 1.0, voir stackoverflow.com/questions/6989653#answer-23923895
Emilien

45

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.

4
C'est la solution la plus élégante.
Superluminary

3

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

1
C'est une solution bien trop compliquée. Il existe maintenant des moyens plus simples.
JGallardo


3

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


2

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!


2
Merci beaucoup @jpillora pour la création de ce problème, qui s'est terminé par la mise en œuvre de cette fonctionnalité intégrée.
Emilien

1

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!


0

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}


0

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

0

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

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

0

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.

2
En quelque sorte, cela va à l'encontre de l'objectif d'utiliser un préprocesseur si vous devez vous replonger dans le html au premier signe de problème.
Superluminary

2
D'accord, mais en utilisant un tuyau et une nouvelle ligne à chaque fois que vous devez ajouter une balise en ligne, nous ne sommes guère idéaux. Nouveau sur jade mais cela semble une omission majeure
Simon H

2
Moi aussi, je viens d'un hameau où une balise est préfixée d'un%. Jade est cependant beaucoup plus jolie.
Superluminary

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

-1

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 "@" -> &#64; Si vous voulez inclure un lien, disons que votre / une adresse e-mail utilise ceci:

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.