web-dev-qa-db-ja.com

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

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.
node.jsmarkuppug
115
mahemoff

Jade 1.0の時点では、これに対処する簡単な方法がありますが、残念ながら公式のドキュメントには見当たりません。

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

#[a.someClass A Link!]

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

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

マークダウンフィルターを使用し、マークダウン（および許可された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のようになります

93
Daniel Baulig

別の方法：

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

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

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

補間 を参照してください

3
P.Brian.Mackey

もう1つの完全に異なるアプローチは、フィルターを作成することです。このフィルターは、最初にリンクの置換時にスタブを作成し、次にジェイドでレンダリングします

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

編集：この機能は実装され、問題は解決されました。上記の回答をご覧ください。

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

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

それを実装する時間がありませんでしたが、もっと多くの+1が役立つかもしれません！

2
jpillora

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

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

動作しますが、ちょっとしたハックのように感じます-本当にこのための構文があるはずです！

1
Billy Moon

ダニエル・バウリグが示唆したように、動的パラメータとともに以下で使用

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

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

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

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

0
paoloumali

（少なくとも現在）完全にシンプルなオプションがあることが判明

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