125

我正在尝试使用 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.
4

13 回答 13

122

从玉 1.0 开始，有一种更简单的方法来处理这个问题，不幸的是我在官方文档的任何地方都找不到它。

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

#[a.someClass A Link!]

因此，在 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]

你也可以做嵌套的内联元素：

p: This is a #[a(href="#") link with a nested #[span element]]
于 2014-05-29T00:21:51.487 回答
100

您可以使用降价过滤器并使用降价（和允许的 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 中完成，如下所示：

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

于 2011-08-08T23:15:57.660 回答
47

另一种方法：

p
  | this is the start of the para
  a(href="http://example.com") a link
  | 
  | this is the rest of the paragraph.
于 2012-07-29T21:05:10.087 回答
3

另一种完全不同的方法是创建一个过滤器，它首先尝试替换链接，然后再用玉渲染

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 = ""+ // 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());
于 2012-09-28T21:39:08.037 回答
3

如果您的链接来自数据源，您可以使用：

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

见插值

于 2015-03-20T17:15:36.003 回答
2

编辑：此功能已实施并已关闭，请参阅上面的答案。

我发布了一个问题以将此功能添加到 Jade

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

虽然还没有时间实现它，更多 +1 可能会有所帮助！

于 2013-05-24T00:37:20.863 回答
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>

工作正常，但感觉有点像黑客 - 真的应该有这样的语法！

于 2012-09-28T20:07:57.670 回答
0

我没有意识到玉需要每个标签一行。我想我们可以节省空间。如果可以理解的话会更好 ul>li>a[class="emmet"]{text}

于 2013-05-13T10:03:59.777 回答
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>.
于 2014-01-17T12:23:35.233 回答
0

正如 Daniel Baulig 所建议的，在下面与动态参数一起使用 

| <a href=!{aData.link}>link</a>
于 2014-02-05T06:11:39.170 回答
0

事实证明（至少现在）有一个非常简单的选项

p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.
于 2015-02-02T13:38:45.577 回答
0 
p
    | At Times Like These We Suggest Just Going:
    a(ui-sref="app") HOME
    | &nbsp;
于 2015-06-03T11:17:06.733 回答
-1

有史以来最简单的事情；）但我自己为此挣扎了几秒钟。Anywho，您需要为“@”符号使用 HTML 实体 ->&#64; 如果您想包含链接，假设您/某个电子邮件地址使用此：

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
于 2015-07-31T19:35:37.783 回答