Jade : 단락 내부 링크

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.

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

마크 다운 필터를 사용하고 마크 다운 (및 허용 된 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

para 끝 부분에 여분의 공백을 잊지 마세요 (볼 수는 없지만. | and . 그렇지 않으면 다음과 같이 para.a linkand보이지 않습니다.para a link and

이를 수행하는 또 다른 방법 :

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

완전히 다른 또 다른 접근 방식은 필터를 만드는 것입니다.이 필터는 링크를 교체 할 때 먼저 찌르고 두 번째로 옥으로 렌더링합니다.

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

링크가 데이터 소스에서 가져온 경우 다음을 사용할 수 있습니다.

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

보간 참조

편집 :이 기능이 구현되고 문제가 종료되었습니다. 위의 답변을 참조하십시오.

이 기능을 Jade에 추가하기 위해 문제를 게시했습니다.

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

구현할 시간이 없었습니다. 더 많은 +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>

잘 작동하지만 약간의 해킹처럼 느껴집니다. 실제로 이에 대한 구문이 있어야합니다!

나는 옥이 태그 당 한 줄을 필요로한다는 것을 몰랐다. 공간을 절약 할 수 있다고 생각했습니다. 이것을 이해할 수 있다면 훨씬 좋습니다. ul> li> a [class = "emmet"] {text}

다음과 같이 링크 바로 뒤에 마침표를 추가해야했습니다.

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

Daniel Baulig가 제안한대로 동적 매개 변수와 함께 아래에 사용됨

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

(적어도) 완벽하게 간단한 옵션이 있음이 밝혀졌습니다.

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
    |  

가장 간단한 것;) 그러나 나는 몇 초 동안 이것으로 어려움을 겪고있었습니다. 누구든지 "@"기호에 HTML 엔티티를 사용해야합니다.-> @ 링크를 포함하려면 다음을 사용한다고 가정 해 보겠습니다.

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