Jade: Linki w akapicie


118

Próbuję napisać kilka akapitów z Jade, ale jest to trudne, gdy w akapicie znajdują się linki.

Najlepsze, co mogę wymyślić, i zastanawiam się, czy można to zrobić z mniejszą liczbą znaczników:

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.

Odpowiedzi:


116

Od wersji jade 1.0 łatwiej sobie z tym poradzić, niestety nie mogę znaleźć tego nigdzie w oficjalnej dokumentacji.

Możesz dodawać elementy wbudowane o następującej składni:

#[a.someClass A Link!]

Tak więc, przykład bez wchodzenia w wiele linii w ap, wyglądałby tak:

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]

Możesz również zagnieżdżać elementy wbudowane:

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

6
Jest to udokumentowane tutaj: jade-lang.com/reference/interpolation w sekcji „Interpolacja znaczników”.
olan

94

Możesz użyć filtra przecen i użyć znacznika (i dozwolonego HTML) do napisania akapitu.

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

Alternatywnie wydaje się, że możesz po prostu wyrzucić HTML bez żadnych problemów:

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

Sam nie byłem tego świadomy i właśnie przetestowałem to za pomocą narzędzia wiersza poleceń jade. Wydaje się, że działa dobrze.

EDYCJA: Wygląda na to, że można to zrobić całkowicie w Jade w następujący sposób:

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

Nie zapomnij dodatkową przestrzeń na końcu ust (choć nie można go zobaczyć. I pomiędzy | and. W przeciwnym razie będzie to wyglądać tak para.a linkandniepara a link and


1
Dzięki. Markdown jest do tego idealny. Zauważyłem, że pakiet rabatowy NPM nie został skompilowany i występuje problem z pakietem NPM markdown (czysty JS) z wartością 0.5 (używa wyrażeń regularnych jako funkcji, usuniętych z Chrome). Dla każdego, kto czyta, rozwiązaniem najwyraźniej jest „npm install markdown-js”, a następnie zmień jego nazwę na „markdown”. (Okazało się, że Jade nie patrzy na „markdown-js”.) Pracowało dla mnie.
mahemoff

9
Wygląda na to, że można to rozwiązać w najbliższej przyszłości za pomocą interpolacji, więc możesz to zrobić p This is a paragraph #[a(href="#") with a link] in it. Zobacz github.com/visionmedia/jade/issues/936
będzie

3
Jeśli skorzystasz z trzeciej opcji, uważaj, którego edytora używasz, używam Sublime i domyślnie usunie spację na końcu akapitu. Ostatecznie wybrałem opcję 2 powyżej, ponieważ była najmniej bolesna.
Ryan Eastabrook

Sublime usuwa końcowe spacje tylko wtedy, gdy to nakazałeś. Tak, więc używam znaku &nbsp;na końcu pierwszej linii, ale debatuję nad swoim podejściem w przyszłości.
Dave Newton

1
Zostało to rozwiązane w Jade 1.0, patrz stackoverflow.com/questions/6989653#answer-23923895
Emilien,

45

Inny sposób:

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

4
To najbardziej eleganckie rozwiązanie.
superluminium

3

Innym zupełnie innym podejściem byłoby stworzenie filtru, który najpierw dźga w podmienianie linków, a potem renderuje z jadeitowym sekundą

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

Renderuje:

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

Pełny przykład roboczy: index.js (uruchamiany z 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());

Bardziej ogólne rozwiązanie wyrenderowałoby mini podbloki jadeitu w unikalnym bloku (może być identyfikowanym przez coś podobnego ${jade goes here}), więc ...

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

Można to zaimplementować w dokładnie taki sam sposób, jak powyżej.

Roboczy przykład rozwiązania ogólnego:

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
Jest to zbyt skomplikowane rozwiązanie. Teraz są łatwiejsze sposoby.
JGallardo


3

Jeśli Twoje linki pochodzą ze źródła danych, możesz użyć:

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

Zobacz interpolację


2

Edycja: ta funkcja została wdrożona i problem został zamknięty, patrz odpowiedź powyżej.


Wysłałem problem, aby dodać tę funkcję do Jade

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

Nie miałem jednak czasu, aby go wdrożyć, więcej + 1-ek może pomóc!


2
Wielkie dzięki @jpillora za stworzenie tego wydania, które zakończyło się wdrożeniem tej funkcji wstawiania.
Emilien

1

To najlepsze, co mogę wymyślić

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

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

Renderuje ...

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

Działa dobrze, ale wydaje się trochę hack - naprawdę powinna być do tego składnia!


0

Nie zdawałem sobie sprawy, że jadeit wymaga linii na tag. Pomyślałem, że możemy zaoszczędzić miejsce. Znacznie lepiej, jeśli można to zrozumieć ul> li> a [class = "emmet"] {text}


0

Musiałem dodać kropkę bezpośrednio za linkiem, na przykład:

This is your test [link].

Rozwiązałem to tak:

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

Zgodnie z sugestią Daniela Bauliga, użyte poniżej z parametrami dynamicznymi

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

0

Okazuje się, że istnieje (przynajmniej teraz) całkowicie prosta opcja

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

2
W pewnym sensie niweczy cel używania preprocesora, jeśli musisz zanurzyć się z powrotem w html przy pierwszych oznakach problemów.
superluminium

2
Zgoda, ale używanie rury i nowej linii za każdym razem, gdy trzeba dodać tag inline, nie jest idealne. W nowym jadeitowym, ale wydaje się to poważnym pominięciem
Simon H

2
Ja też przyszedłem z haml, w którym tag jest poprzedzony przedrostkiem%. Jade jest jednak znacznie ładniejsza.
superluminium


-1

Najprostsza rzecz na świecie;), ale sam walczyłem z tym przez kilka sekund. W każdym razie musisz użyć encji HTML dla znaku „@” -> &#64; Jeśli chcesz dołączyć link, powiedzmy, że Twój / jakiś adres e-mail użyj tego:

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.