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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-02 14:27:16  来源:igfitidea点击:

Jade: Links inside a paragraph

node.jsmarkuppug

提问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 linkandpara 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}