125

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

13 に答える 13

100

マークダウン フィルターを使用し、マークダウン (および許可された 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 コマンド ライン ツールを使用してテストしました。それはうまくいくようです。

編集: 実際には、次のようにジェイドで完全に実行できるようです:

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

para の最後に余分なスペースを忘れないでください (見えませんが. と の間に| and. そうしpara.a linkandないと、このようになります。para a link and

于 2011-08-08T23:15:57.660 に答える
47

それを行う別の方法：

p
  | this is the start of the para
  a(href="http://example.com") a link
  | 
  | this is the rest of the paragraph.
于 2012-07-29T21:05:10.087 に答える
3

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

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

補間を参照

于 2015-03-20T17:15:36.003 に答える
3

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

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());
于 2012-09-28T21:39:08.037 に答える
2

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

この機能をジェイドに追加するためにイシューを投稿しました

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

実装する時間がありませんでしたが、+1 がもっと役立つかもしれません!

于 2013-05-24T00:37:20.863 に答える
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>

正常に動作しますが、ちょっとしたハックのように感じます - これには構文が必要です!

于 2012-09-28T20:07:57.670 に答える
0

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

于 2013-05-13T10:03:59.777 に答える
0

（少なくとも今では）完全に単純なオプションがあることがわかりました

p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.
于 2015-02-02T13:38:45.577 に答える
0

ダニエル・バウリグが提案したように、以下で動的パラメーターで使用されます 

| <a href=!{aData.link}>link</a>
于 2014-02-05T06:11:39.170 に答える
0 
p
    | At Times Like These We Suggest Just Going:
    a(ui-sref="app") HOME
    | &nbsp;
于 2015-06-03T11:17:06.733 に答える
-1

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

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
于 2015-07-31T19:35:37.783 に答える