node.js 玉:段落内的链接
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6989653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jade: Links inside a paragraph
提问by mahemoff
I'm trying to author a few paragraphs with Jade, but finding it difficult when there are links inside a paragraph.
我正在尝试用 Jade 创作一些段落,但发现段落中有链接时很难。
The best I can come up with, and I'm wondering if there's a way to do it with less markup:
我能想到的最好的,我想知道是否有办法用更少的标记来做到这一点:
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.
采纳答案by Clayton Gulick
As of jade 1.0 there's an easier way to deal with this, unfortunately I can't find it anywhere in the official documentation.
从 jade 1.0 开始,有一种更简单的方法来处理这个问题,不幸的是我在官方文档中找不到它。
You can add inline elements with the following syntax:
您可以使用以下语法添加内联元素:
#[a.someClass A Link!]
So, an example without going into multiple lines in a p, would be something like:
因此,在 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]
You can also do nested inline elements:
您还可以嵌套内联元素:
p: This is a #[a(href="#") link with a nested #[span element]]
回答by Daniel Baulig
You can use a markdown filter and use markdown (and allowed HTML) to write your paragraph.
您可以使用降价过滤器并使用降价(和允许的 HTML)来编写您的段落。
:markdown
this is the start of the para.
[a link](http://example.com)
and this is the rest of the paragraph.
Alternatively it seems like you can simply ouput HTML without any problems:
或者,您似乎可以简单地输出 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
I wasn't aware of this myself and just tested it using the jade command line tool. It seems to work just fine.
我自己并不知道这一点,只是使用 jade 命令行工具对其进行了测试。它似乎工作得很好。
EDIT:It seems it can actually be done entirely in Jade as follows:
编辑:似乎它实际上可以完全在 Jade 中完成,如下所示:
p
| this is the start of the para
a(href='http://example.com;) a link
| and this is the rest of the paragraph
Don't forget an extra space at the end of para (although you can't see it. and between | and. Otherwise it will look like this para.a linkandnot para a link and
不要忘记在 para 的末尾有一个额外的空格(虽然你看不到它。和之间| and。否则它看起来像这样para.a linkand不para a link and
回答by pera
Another way to do it:
另一种方法:
p
| this is the start of the para
a(href="http://example.com") a link
| this is he rest of the paragraph.
回答by Billy Moon
Another completely different approach, would be to create a filter, which has first stab at replacing links, and then renders with jade second
另一种完全不同的方法是创建一个过滤器,它首先尝试替换链接,然后使用 jade 进行渲染
h1 happy days
:inline
p this can have [a link](http://going-nowhere.com/) in it
Renders:
渲染:
<h1>happy days</h1><p>this can have <a href='http://going-nowhere.com/'>a link</a> in it</p>
Full working example: index.js (run with nodejs)
完整的工作示例: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=''></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());
A more general solution would render mini sub-blocks of jade in a unique block (maybe identified by something like ${jade goes here}), so...
一个更通用的解决方案是将翡翠的迷你子块渲染在一个独特的块中(可能由类似的东西标识${jade goes here}),所以......
p some paragraph text where ${a(href="wherever.htm") the link} is embedded
This could be implemented in exactly the same way as above.
这可以以与上述完全相同的方式实现。
Working example of general solution:
一般解决方案的工作示例:
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());
回答by P.Brian.Mackey
If your links come from a data source you can use:
如果您的链接来自数据源,您可以使用:
ul
each val in results
p
| blah blah
a(href="#{val.url}") #{val.name}
| more blah
See interpolation
见插值
回答by jpillora
Edit: This feature was implemented and issue closed, see answer above.
编辑:此功能已实施并已关闭,请参阅上面的答案。
I've posted an issue to get this feature added into Jade
我已经发布了一个问题来将此功能添加到 Jade 中
https://github.com/visionmedia/jade/issues/936
https://github.com/visionmedia/jade/issues/936
Haven't had time to implement it though, more +1s may help !
不过还没来得及实施,更多 +1 可能会有所帮助!
回答by Billy Moon
This is the best I can come up with
这是我能想到的最好的
-var a = function(href,text){ return "<a href='"+href+"'>"+text+"</a>" }
p this is an !{a("http://example.com/","embedded link")} in the paragraph
Renders...
渲染...
<p>this is an <a href='http://example.com/'>embedded link</a> in the paragraph</p>
Works ok, but feels like a bit of a hack - there really should be a syntax for this!
工作正常,但感觉有点像黑客 - 真的应该有一个语法!
回答by Rick Pastoor
I had to add a period directly behind a link, like this:
我必须直接在链接后面添加一个句点,如下所示:
This is your test [link].
This is your test [link].
I solved it like this:
我是这样解决的:
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>.
回答by Shams
As suggested by Daniel Baulig, used below with dynamic params
正如 Daniel Baulig 所建议的,在下面与动态参数一起使用
| <a href=!{aData.link}>link</a>
回答by paoloumali
I did not realize that jade requires a line per tag. I thought we can save space. Much better if this can be understood ul>li>a[class="emmet"]{text}
我没有意识到玉需要每个标签一行。我以为我们可以节省空间。如果可以理解就更好了 ul>li>a[class="emmet"]{text}

