blocks|key|599508|text|另一种方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599509|p
++%7C+this+is+the+start+of+the+para
++a(href="http://example.com")+a+link
++%7C+
++%7C+this+is+the+rest+of+the+paragraph.|code-block|syntax|javascript|599510|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another way to do it:
<pre><code>p
 | this is the start of the para
 a(href=&quot;http://example.com&quot;) a link
 | 
 | this is the rest of the paragraph.
</code></pre>

blocks|key|815100|text|这是我能想到的最好的办法了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|815101|-var+a+=+function(href,text){+return+"<a+href='"%2Bhref%2B"'>"%2Btext%2B"</a>"+}

p+this+is+an+!{a("http://example.com/","embedded+link")}+in+the+paragraph|code-block|syntax|javascript|815102|渲染...|815103|this+is+an+<a+href='http://example.com/'>embedded+link</a>+in+the+paragraph|815104|运行正常，但感觉有点笨拙--真的应该有一个语法来解决这个问题！|815105|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This is the best I can come up with

<pre><code>-var a = function(href,text){ return "&lt;a href='"+href+"'&gt;"+text+"&lt;/a&gt;" }

p this is an !{a("http://example.com/","embedded link")} in the paragraph
</code></pre>

Renders...

<pre><code>&lt;p&gt;this is an &lt;a href='http://example.com/'&gt;embedded link&lt;/a&gt; in the paragraph&lt;/p&gt;
</code></pre>

Works ok, but feels like a bit of a hack - there really should be a syntax for this!

blocks|key|599700|text|另一种完全不同的方法是创建一个过滤器，它首先尝试替换链接，然后使用jade渲染。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599701|h1+happy+days
:inline
++p+this+can+have+[a+link](http://going-nowhere.com/)+in+it|code-block|syntax|javascript|599702|渲染：|599703|<h1>happy+days</h1>this+can+have+<a+href='http://going-nowhere.com/'>a+link</a>+in+it|599704|完整的工作示例:+index.js+(使用nodejs运行)|599705|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(/\[(.%2B?)\]$(.%2B?)$/,+"<a+href='$2'>$1</a>");
++return+jade.compile(txt)();
};

jadestring+=+""%2B+//+p.s.+I+hate+javascript's+non-handling+of+multiline+strings
++"h1+happy+days\n"%2B
++":inline\n"%2B
++"++p+this+can+have+[a+link](http://going-nowhere.com/)+in+it"


f+=+jade.compile(jadestring);

console.log(f());|599706|一种更通用的解决方案是在一个唯一的块中呈现小型的jade子块(可能用${jade+goes+here}之类的东西来标识)，所以……|offset|length|style|CODE|599707|p+some+paragraph+text+where+${a(href="wherever.htm")+the+link}+is+embedded|599708|这可以用与上面完全相同的方式来实现。|599709|一般解决方案的工作示例：|599710|var+f,+jade;

jade+=+require('jade');

jade.filters.inline+=+function(txt)+{
++txt+=+txt.replace(/\${(.%2B?)}/,+function(a,b){
++++return+jade.compile(b)();
++});
++return+jade.compile(txt)();
};

jadestring+=+""%2B+//+p.s.+I+hate+javascript's+non-handling+of+multiline+strings
++"h1+happy+days\n"%2B
++":inline\n"%2B
++"++p+this+can+have+${a(href='http://going-nowhere.com/')+a+link}+in+it"


f+=+jade.compile(jadestring);

console.log(f());|599711|entityMap^0|0|0|0|0|0|0|Y|H|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@$Q|1B|R|1C|S|T]]|9|@]|A|$]]|$1|U|3|V|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

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

<pre><code>h1 happy days
:inline
 p this can have [a link](http://going-nowhere.com/) in it
</code></pre>

<h3>Renders:</h3>

<pre><code>&lt;h1&gt;happy days&lt;/h1&gt;&lt;p&gt;this can have &lt;a href='http://going-nowhere.com/'&gt;a link&lt;/a&gt; in it&lt;/p&gt;
</code></pre>

<h3>Full working example: index.js (run with nodejs)</h3>

<pre><code>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(/\[(.+?)\]$(.+?)$/, "&lt;a href='$2'&gt;$1&lt;/a&gt;");
 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());
</code></pre>

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

<pre><code>p some paragraph text where ${a(href="wherever.htm") the link} is embedded
</code></pre>

This could be implemented in exactly the same way as above.

<h3>Working example of general solution:</h3>

<pre><code>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());
</code></pre>

blocks|key|815249|text|我没有意识到jade需要每个标记一行。我想我们可以节省空间。如果这能被理解就更好了“emmet”{ul>li>aclass=}|type|unstyled|depth|inlineStyleRanges|entityRanges|data|815250|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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}

blocks|key|599786|text|我必须在链接后面直接添加一个句号，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599787|This+is+your+test+[link].|offset|length|style|CODE|599788|我是这样解决的：|599789|label(for="eula").lbl.lbl-checkbox.lbl-eula+#{i18n.signup.text.accept_eula}
++++%7C+<a+href="#about/termsandconditions"+class=".lnk.lnk-eula">#{i18n.signup.links.eula}</a>.|code-block|syntax|javascript|599790|entityMap^0|0|0|P|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

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

<code>This is your test [link].</code>

I solved it like this:

<pre><code>label(for="eula").lbl.lbl-checkbox.lbl-eula #{i18n.signup.text.accept_eula}
 | &lt;a href="#about/termsandconditions" class=".lnk.lnk-eula"&gt;#{i18n.signup.links.eula}&lt;/a&gt;.
</code></pre>

blocks|key|815328|text|根据Daniel+Baulig的建议，下面与动态参数一起使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|815329|%7C+<a+href=!{aData.link}>link</a>|code-block|syntax|javascript|815330|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

As suggested by Daniel Baulig, used below with dynamic params 

<pre><code>| &lt;a href=!{aData.link}&gt;link&lt;/a&gt;
</code></pre>

blocks|key|815397|text|从jade+1.0开始，有一种更简单的方法来处理这个问题，不幸的是，我在官方文档中找不到它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|815398|您可以使用以下语法添加内联元素：|815399|#[a.someClass+A+Link!]|code-block|syntax|javascript|815400|因此，在p中不包含多行的示例如下所示：|815401|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]|815402|您还可以执行嵌套的内联元素：|815403|p:+This+is+a+#[a(href="#")+link+with+a+nested+#[span+element]]|815404|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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:

<pre><code>#[a.someClass A Link!]
</code></pre>

So, an example without going into multiple lines in a p, would be something like:

<pre><code>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]
</code></pre>

You can also do nested inline elements:

<pre><code>p: This is a #[a(href="#") link with a nested #[span element]]
</code></pre>

blocks|key|815493|text|事实证明(至少现在)有一个非常简单的选择|type|unstyled|depth|inlineStyleRanges|entityRanges|data|815494|p+Convert+a+.fit+file+using+<a+href="http://connect.garmin.com/">+Garmin+Connect's</a>+export+functionality.|code-block|syntax|javascript|815495|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

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

blocks|key|600083|text|如果您的链接来自数据源，则可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|600084|++ul
++++each+val+in+results
++++++p
++++++++%7C+blah+blah+
++++++++a(href="#{val.url}")+#{val.name}
++++++++%7C++more+blah|code-block|syntax|javascript|600085|请参阅interpolation|offset|length|600086|entityMap|0|LINK|mutability|MUTABLE|url|http://jade-lang.com/reference/interpolation/^0|0|0|3|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

If your links come from a data source you can use:

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

See <a href="http://jade-lang.com/reference/interpolation/" rel="nofollow">interpolation</a>

blocks|key|600141|text|p
++++%7C+At+Times+Like+These+We+Suggest+Just+Going:
++++a(ui-sref="app")+HOME
++++%7C+&nbsp;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|600142|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>p
 | At Times Like These We Suggest Just Going:
 a(ui-sref="app") HOME
 | &amp;nbsp;
</code></pre>

blocks|key|600232|text|这是有史以来最简单的事情;)但我自己也为此挣扎了几秒钟。任何人，你需要使用一个"@“的->+&#64;实体如果你想包括一个链接，假设你的/一些电子邮件地址使用这个：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|600233|p
++++a(href="mailto:me@myemail.com"+target="_top")+me&#64;myemail.com|code-block|syntax|javascript|600234|entityMap^0|1A|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

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

<pre><code>p
 a(href="mailto:me@myemail.com" target="_top") me&amp;#64;myemail.com
</code></pre>

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:

<pre><code>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.
</code></pre>

Jade: Links inside a paragraph

我正在尝试用Jade创作一些段落，但当段落中有链接时，我发现这很困难。我能想到的最好的，我想知道是否有一种方法可以用更少的标记来做到这一点：p  span.   this is the start   of the para.  a(href="http://example.com") a link  span.   ...

问Jade:段落中的链接
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jade:段落中的链接EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jade:段落中的链接
EN