玉石：段落中的链接

Question

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

- mahemoff

Answer 1

从jade 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]]

- Clayton Gulick

---

这里有相关记录：http://jade-lang.com/reference/interpolation/，位于“标签内插”一节下。 - olan

Answer 2

你可以使用Markdown过滤器，使用Markdown（和允许的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.a linkand而不是para a link and

- Daniel Baulig

---

谢谢。Markdown非常适合这个。我发现NPM折扣包没有编译，并且NPM markdown（纯JS）包存在问题，版本为0.5（它使用正则表达式作为函数，从Chrome中删除）。对于其他人来说，解决方案似乎是“npm install markdown-js”，然后将其重命名为“markdown”。 （正如我发现Jade不看“markdown-js”一样。）对我有用。 - mahemoff

看起来这个问题可能很快就会得到解决，使用插值语法，你可以这样写p 这是一个段落#[a(href="#") 带有链接]在里面。详见 https://github.com/visionmedia/jade/issues/936 - Will

如果你选择第三个选项，请注意你使用的编辑器，我正在使用Sublime，它默认会删除段落末尾的空格。最终，我选择了上面的第二个选项，因为它是最不痛苦的。 - Ryan Eastabrook

Sublime只会去除您已要求其去除的尾随空格。我已经这样做了，因此我在第一行末尾使用了 ，但我正在考虑将来的方法。 - Dave Newton

这个问题已经在Jade 1.0中得到解决，请参见https://dev59.com/SWw05IYBdhLWcg3w11a0。 - Emilien

Answer 3

另一种方法：

p
  | this is the start of the para
  a(href="http://example.com") a link
  | 
  | this is the rest of the paragraph.

- pera

---

这是最优雅的解决方案。 - superluminary

Answer 4

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

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

查看插值

- P.Brian.Mackey

Answer 5

另一种完全不同的方法是创建一个过滤器，它首先尝试替换链接，然后再使用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>

完整的工作示例：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的小子块渲染到一个唯一的代码块中（可能由类似于${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());

- Billy Moon

---

这个解决方案太复杂了。现在有更简单的方法。 - JGallardo

@BillyMoon https://dev59.com/SWw05IYBdhLWcg3w11a0 - Emilien

Answer 6

编辑：此功能已实现并关闭问题，请参见上面的答案。

---

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

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

尚未有时间实施它，更多+1可能会有所帮助！

- jpillora

---

非常感谢 @jpillora 提出这个问题，这最终导致了内联功能的实现。 - Emilien

Answer 7

这是我能想到的最好的方案。

-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>

功能正常，但感觉有点像是一种折中的方法 - 实际上应该有一种语法来处理这个问题！

- Billy Moon

Answer 8

原来有一个（至少现在）完美简单的选项。

p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.

- Simon H

---

如果你在出现问题的第一个迹象时就不得不回到HTML中，那么使用预处理器的目的就有些失去了。 - superluminary

同意，但每次需要添加一个内联标签时使用管道和新行并不理想。我对Jade还不熟悉，但这似乎是一个重大遗漏。 - Simon H

我也是，我之前使用的是Haml，其中标签以%为前缀。不过Jade更漂亮。 - superluminary

Answer 9

p
    | At Times Like These We Suggest Just Going:
    a(ui-sref="app") HOME
    |  

- Dr Manhattan

Answer 10

我必须在链接后面直接添加一个句号，就像这样：

这是你的测试[链接]。

我是这样解决的：

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>.

- Rick Pastoor