Jade: Links innerhalb eines Absatzes

Ich versuche, ein paar Absätze mit Jade zu verfassen, finde es aber schwierig, wenn sich in einem Absatz Links befinden.

Das Beste, was ich mir einfallen lassen kann, und ich frage mich, ob es einen Weg gibt, dies mit weniger Markup zu erreichen:

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.

Ab Jade 1.0 gibt es eine einfachere Möglichkeit, damit umzugehen. Leider kann ich es nirgendwo in der offiziellen Dokumentation finden.

Sie können Inline-Elemente mit der folgenden Syntax hinzufügen:

#[a.someClass A Link!]

Ein Beispiel, ohne in ap in mehrere Zeilen zu gehen, wäre ungefähr so:

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]

Sie können auch verschachtelte Inline-Elemente ausführen:

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

Sie können einen Markdown-Filter verwenden und Markdown (und zulässiges HTML) verwenden, um Ihren Absatz zu schreiben.

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

Alternativ können Sie HTML einfach ohne Probleme ausgeben:

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

Ich war mir dessen selbst nicht bewusst und habe es nur mit dem Jade-Befehlszeilentool getestet. Es scheint gut zu funktionieren.

EDIT: Es scheint, dass es tatsächlich vollständig in Jade wie folgt gemacht werden kann:

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

Vergessen Sie nicht ein zusätzliches Leerzeichen am Ende von Absatz (obwohl Sie es nicht sehen können. Und dazwischen | and. Andernfalls sieht es para.a linkandnicht so auspara a link and

Ein anderer Weg, es zu tun:

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

Ein anderer völlig anderer Ansatz wäre, einen Filter zu erstellen, der zuerst versucht, Links zu ersetzen, und dann mit Jade an zweiter Stelle rendert

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

Rendert:

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

Vollständiges Arbeitsbeispiel: index.js (mit nodejs ausführen)

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

Eine allgemeinere Lösung würde Mini-Unterblöcke aus Jade in einem eindeutigen Block rendern (möglicherweise durch etwas wie gekennzeichnet ${jade goes here}), also ...

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

Dies könnte genauso wie oben implementiert werden.

Arbeitsbeispiel einer allgemeinen Lösung:

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

Wenn Ihre Links aus einer Datenquelle stammen, können Sie Folgendes verwenden:

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

Siehe Interpolation

Bearbeiten: Diese Funktion wurde implementiert und das Problem geschlossen, siehe Antwort oben.

Ich habe ein Problem gepostet, um diese Funktion in Jade hinzuzufügen

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

Ich hatte noch keine Zeit, es zu implementieren, mehr +1 können helfen!

Dies ist das Beste, was ich mir vorstellen kann

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

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

Rendern ...

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

Funktioniert in Ordnung, fühlt sich aber wie ein Hack an - dafür sollte es wirklich eine Syntax geben!

Mir war nicht klar, dass Jade eine Zeile pro Tag benötigt. Ich dachte, wir können Platz sparen. Viel besser, wenn dies verstanden werden kann ul> li> a [class = "emmet"] {text}

Ich musste einen Punkt direkt hinter einem Link hinzufügen, wie folgt:

This is your test [link].

Ich habe es so gelöst:

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

Wie von Daniel Baulig vorgeschlagen, wird er unten mit dynamischen Parametern verwendet

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

Es stellt sich heraus, dass es (zumindest jetzt) ​​eine ganz einfache Option gibt

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
    |  

Das Einfachste überhaupt;) aber ich hatte selbst ein paar Sekunden damit zu kämpfen. Wie auch immer, Sie müssen eine HTML-Entität für das "@" - Zeichen verwenden -> @ Wenn Sie einen Link einfügen möchten, verwenden Sie beispielsweise Ihre / eine E-Mail-Adresse:

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