제이드: 문단 내부 링크
저는 제이드와 함께 몇 개의 단락을 작성하려고 노력하고 있지만, 단락 안에 링크가 있을 때 어려움을 느낍니다.
제가 생각해 낼 수 있는 최선의 방법이 있는데, 마크업을 줄이면서 할 수 있는 방법이 있는지 궁금합니다.
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!]
따라서 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]]
마크다운 필터를 사용하고 마크다운(및 허용된 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
저도 이 사실을 인지하지 못했고 옥 명령줄 도구를 사용하여 테스트했을 뿐입니다.그것은 잘 작동하는 것 같아요.
편집: 다음과 같이 제이드로 완전히 수행할 수 있는 것 같습니다.
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
다른 방법:
p
| this is the start of the para
a(href="http://example.com") a link
|
| this is the 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
보간 참조
편집: 이 기능이 구현되어 이슈가 종결되었습니다. 위의 답변을 참조하십시오.
제이드에 이 기능을 추가하기 위해 이슈를 올렸습니다.
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
언급URL : https://stackoverflow.com/questions/6989653/jade-links-inside-a-paragraph
'source' 카테고리의 다른 글
텍스트 보기의 텍스트 색상을 프로그래밍 방식으로 설정하는 방법 (0) | 2023.08.05 |
---|---|
미수습자 처리 방법(약속) DOM 예외:일시 중지() 호출로 인해 재생() 요청이 중단되었습니다. (0) | 2023.08.05 |
빌드: '노드'에 대한 형식 정의 파일을 찾을 수 없습니다. (0) | 2023.08.05 |
CSS ":hover"를 활성화하는 순수 자바스크립트에서 마우스 오버를 시뮬레이션하려면 어떻게 해야 합니까? (0) | 2023.08.05 |
ES2015에서만 0에서 9까지의 범위의 숫자를 생성하는 방법은 무엇입니까? (0) | 2023.08.05 |