Jade：段落内的链接

发布于 2024-11-28 16:49:09 字数 252 浏览 2 评论 0原文

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

原文

I'm trying to author a few paragraphs with Jade, but finding it difficult when there are links inside a paragraph.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧话新听 2024-12-05 16:49:09

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

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.

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:

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

回复收藏 0 原文

傲鸠 2024-12-05 16:49:09

您可以使用 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 末尾有一个额外的空格（尽管你看不到它。以及在 | 和 之间。否则它会看起来就像这样 para.a linkand 而不是 para a link and

You can use a markdown filter and use markdown (and allowed HTML) to write your paragraph.

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

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.

EDIT:
It seems it can actually be done entirely in Jade as follows:

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 linkand not para a link and

回复收藏 0 原文

剪不断理还乱 2024-12-05 16:49:09

另一种方法：

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

Another way to do it:

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

回复收藏 0 原文

尛丟丟 2024-12-05 16:49:09

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

Another completely different approach, would be to create a filter, which has first stab at replacing links, and then renders with jade second

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)

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());

A more general solution would render mini sub-blocks of jade in a unique block (maybe identified by something like ${jade goes here}), so...

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());

回复收藏 0 原文

玩物 2024-12-05 16:49:09

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

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

请参阅插值

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

回复收藏 0 原文

毁梦 2024-12-05 16:49:09

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

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

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

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

回复收藏 0 原文

想你只要分分秒秒 2024-12-05 16:49:09

这是我能想到的最好的

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

工作正常，但感觉有点像黑客 - 确实应该有一个语法！

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!

回复收藏 0 原文

风启觞 2024-12-05 16:49:09

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

回复收藏 0 原文

抽个烟儿 2024-12-05 16:49:09

我必须在链接后面直接添加一个句点，如下所示：

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

I had to add a period directly behind a link, like this:

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

回复收藏 0 原文

铁轨上的流浪者 2024-12-05 16:49:09

根据 Daniel Baulig 的建议，下面与动态参数一起使用

| <a href=!{aData.link}>link</a>

As suggested by Daniel Baulig, used below with dynamic params

| <a href=!{aData.link}>link</a>

回复收藏 0 原文

对风讲故事 2024-12-05 16:49:09

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

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

Turns out there is (now at least) a perfectly simple option

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

回复收藏 0 原文

野の 2024-12-05 16:49:09

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

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

回复收藏 0 原文

┼── 2024-12-05 16:49:09

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

p
    a(href="mailto:[email protected]" target="_top") me@myemail.com

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 -> @
If you want to in include a link, let's say your/some email address use this:

p
    a(href="mailto:[email protected]" target="_top") me@myemail.com

回复收藏 0 原文

~没有更多了~

关于作者

云归处

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

Jade：段落内的链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（13）

渲染：

完整的工作示例：index.js（使用nodejs运行）

通用解决方案的工作示例：

Renders:

Full working example: index.js (run with nodejs)

Working example of general solution:

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

Jade：段落内的链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（13）

渲染：

完整的工作示例：index.js（使用nodejs运行）

通用解决方案的工作示例：

Renders:

Full working example: index.js (run with nodejs)

Working example of general solution:

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。