我正在尝试用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.
答案 0 :(得分:109)
从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]]
答案 1 :(得分:92)
您可以使用降价过滤器并使用降价(和允许的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>
答案 2 :(得分:45)
另一种方法:
p
| this is the start of the para
a(href="http://example.com") a link
| this is he rest of the paragraph.
答案 3 :(得分: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>
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());
答案 4 :(得分:3)
如果您的链接来自数据源,则可以使用:
ul
each val in results
p
| blah blah
a(href="#{val.url}") #{val.name}
| more blah
答案 5 :(得分:2)
编辑:此功能已实施并已关闭,请参阅上面的答案。
我发布了一个问题,将此功能添加到Jade
https://github.com/visionmedia/jade/issues/936
没有时间实施它,更多+ 1可能有帮助!
答案 6 :(得分: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>
工作正常,但感觉有点像黑客 - 真的应该有这个语法!
答案 7 :(得分:0)
我没有意识到玉每个标签需要一行。我以为我们可以节省空间。如果可以理解这一点,那就更好了ul> li&gt; a [class =“emmet”] {text}
答案 8 :(得分:0)
我必须在链接后面直接添加句点,如下所示:
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>.
答案 9 :(得分:0)
根据Daniel Baulig的建议,下面使用动态参数
| <a href=!{aData.link}>link</a>
答案 10 :(得分:0)
原来(现在至少)有一个非常简单的选项
p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.
答案 11 :(得分:0)
p
| At Times Like These We Suggest Just Going:
a(ui-sref="app") HOME
|
答案 12 :(得分:-1)
Most simplest thing ever ;) but I was struggling with this myself for a few seconds. Anywho, you need to use an HTML entity for the "@" sign -> @
If you want to in include a link, let's say your/some email address use this:
p
a(href="mailto:me@myemail.com" target="_top") me@myemail.com