ジェイド:段落内のリンク


118

Jadeを使用していくつかの段落を作成しようとしていますが、段落内にリンクがあるとわかりにくいです。

私が思いつくことができる最高のもの、そしてより少ないマークアップでそれを行う方法があるかどうか疑問に思っています:

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.

回答:


116

jade 1.0以降、これに対処する簡単な方法があります。残念ながら、公式ドキュメントにはどこにもありません。

次の構文でインライン要素を追加できます。

#[a.someClass A Link!]

したがって、apの複数の行に入らない例は、次のようになります。

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]

ネストされたインライン要素を行うこともできます:

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

6
これは、「タグ補間」の下のjade-lang.com/reference/interpolationに記載されています。
olan 2015

94

マークダウンフィルターを使用し、マークダウン(および許可されたHTML)を使用して段落を記述できます。

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

または、問題なくHTMLを出力できるように見えます。

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

私自身はこれに気づかず、jadeコマンドラインツールを使用してテストしました。正常に動作するようです。

編集: それは実際には次のようにJadeで完全に行うことができるようです:

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

あなたがそれを見ることができないが(パラの末尾に余分なスペースを忘れてはいけない。との間で| and。そうでなければ、それはこのようになりますpara.a linkandではありませんpara a link and


1
ありがとう。Markdownはこれに最適です。NPM割引パッケージがコンパイルされず、0.5のNPMマークダウン(純粋なJS)パッケージに問題があることがわかりました(Chromeから削除された、関数として正規表現を使用しています)。読んでいる誰にとっても、解決策は明らかに「npm install markdown-js」であり、それを「markdown」に名前変更することです。(私が見つけたように、ジェイドは「markdown-js」を見ていない。)私のために働いた。
mahemoff

9
これは近い将来内挿で対処される可能性があるように見えますp This is a paragraph #[a(href="#") with a link] in it。参照してくださいgithub.com/visionmedia/jade/issues/936
ウィル

3
3番目のオプションを使用する場合は、使用しているエディターに注意してください。私はSublimeを使用しており、デフォルトで段落の最後のスペースが削除されます。結局のところ、痛みが最も少ないので、上記のオプション2を選択しました。
Ryan Eastabrook 2014年

Sublimeは、指示した場合にのみ末尾のスペースを削除します。私は持っているので&nbsp;、最初の行の終わりにを使用しますが、今後のアプローチについては議論しています。
Dave Newton、

1
これはJade 1.0で解決されました
。stackoverflow.com/ questions / 6989653

45

それを行う別の方法:

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

4
これは最もエレガントなソリューションです。

3

別の完全に異なるアプローチは、最初にリンクを置き換えるときに突き刺し、次に翡翠でレンダリングするフィルターを作成することです

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

レンダリング:

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

完全に機能する例:index.js(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());

より一般的な解決策は、ジェイドのミニサブブロックを一意のブロック(おそらくのようなもので識別される${jade goes here})にレンダリングするので、...

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

これは、上記とまったく同じ方法で実装できます。

一般的なソリューションの実施例:

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
これは、ソリューションとしては複雑すぎます。今より簡単な方法があります。
JGallardo 2013


3

リンクがデータソースからのものである場合は、次を使用できます。

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

補間を参照


2

編集:この機能が実装され、問題は解決しました。上記の回答を参照してください。


この機能をJadeに追加するための問題を投稿しました

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

それを実装する時間はありませんでしたが、+ 1を増やすと役立つ場合があります。


2
この問題を作成してくれた@jpilloraに感謝します。その結果、このインライン機能が実装されました。
Emilien 2015

1

これは私が思いつくことができる最高のものです

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

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

レンダリング...

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

動作しますが、少しハックのように感じられます-これには構文があるはずです!


0

ヒスイはタグごとに行が必要であることを知りませんでした。スペースを節約できると思いました。これが理解できればはるかに良いul> li> a [class = "emmet"] {text}


0

次のように、リンクの直後にピリオドを追加する必要がありました。

This is your test [link].

私はそれを次のように解決しました:

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

Daniel Bauligによって提案されたように、動的パラメータとともに以下で使用されます

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

0

(少なくとも)完全にシンプルなオプションがあることがわかります

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

2
トラブルの最初の兆候でhtmlに戻らなければならない場合、プリプロセッサを使用する目的を無効にします。

2
同意しましたが、インラインタグを追加する必要があるたびにパイプと改行を使用するのは理想的ではありません。ヒスイは初めてですが、これは大きな脱落のようです
Simon H

2
私も、タグの前に%が付いているhamlからやって来ました。ジェイドはもっときれいです。


-1

これまでで最も簡単なこと;)しかし、私はこれに数秒間苦労していました。だれでも、 "@"記号にHTMLエンティティを使用する必要があります-> &#64; リンクを含めたい場合は、自分のメールアドレスで次のように使用するとします。

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.