玉:段落内的链接

我正在尝试用Jade创作几个段落,但在段落内部存在链接时却很难find。

最好的,我可以想出,我想知道是否有办法做到这一点与less标记:

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. 

从1.0版本开始,有一个更简单的方法来解决这个问题,不幸的是我在官方文档中找不到它。

您可以使用以下语法添加内联元素:

 #[a.someClass A Link!] 

所以,一个没有进入多行的例子就是这样的:

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

您可以使用降价filter并使用降价(和允许的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 

我没有意识到这一点,只是使用玉石命令行工具进行testing。 它似乎工作得很好。

编辑:它似乎可以完全在玉完成如下:

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

不要忘记在段落末尾有一个额外的空间(尽pipe你看不见它,而且在| and 。之间| 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. 

另一种完全不同的方法,就是创build一个filter,首先插入replace链接,然后用玉来渲染

 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 = ""+ // ps 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()); 

一个更一般的解决scheme将在一个独特的区块中呈现迷你玉石子块(可能由${jade goes here}的东西${jade goes here} ),所以…

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

这可以按照与上述相同的方式来实现。

一般解决scheme的工作示例:

 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 = ""+ // ps 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()); 

编辑:此function已实施,并closures问题,请参阅上面的答案。


我已经发布了一个问题,让这个function添加到翡翠

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

没有时间去实现它,更多+ 1s可以帮助!

如果您的链接来自数据源,您可以使用:

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

见插值

这是我能想到的最好的

 -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所build议的,下面用dynamic参数

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

结果是(现在至less)是一个非常简单的select

 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 | &nbsp; 

有史以来最简单的事情),但是我自己也在挣扎几秒钟。 无论如何,你需要使用一个HTML实体作为“@”符号 – > &#64; 如果你想包括一个链接,让我们说你/一些电子邮件地址使用这个:

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