玉:段落内的链接
我正在尝试用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 |
有史以来最简单的事情),但是我自己也在挣扎几秒钟。 无论如何,你需要使用一个HTML实体作为“@”符号 – > @
如果你想包括一个链接,让我们说你/一些电子邮件地址使用这个:
p a(href="mailto:me@myemail.com" target="_top") me@myemail.com