Jade:段落中的链接

时间:2011-08-08 23:05:19

标签: node.js markup pug

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

13 个答案:

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

完整的工作示例: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());

答案 4 :(得分:3)

如果您的链接来自数据源,则可以使用:

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

请参阅interpolation

答案 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
    | &nbsp;

答案 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 -> &#64; 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&#64;myemail.com