Я пытаюсь написать несколько абзацев с Jade, но мне трудно, когда в абзаце есть ссылки.
Самое лучшее, что я могу придумать, и мне интересно, есть ли способ сделать это с меньшей разметкой:
p
span.
this is the start
of the para.
a(href="#" onclick="location.href='http://example.com'; return false;") a link
span.
and this is the rest of
the paragraph.
По сравнению с 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]]
Вы можете использовать фильтр уценки и использовать уценку (и разрешенный 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. Кажется, что все работает нормально.
EDIT: Кажется, это действительно может быть сделано полностью в Джейде следующим образом:
p
| this is the start of the para
a(href='http://example.com;) a link
| and this is the rest of the paragraph
Не забудьте дополнительное пространство в конце пара (хотя вы не можете его увидеть) и между | and. В противном случае это будет выглядеть как para.a linkand not para a link and
Другой способ сделать это:
p
| this is the start of the para
a(href="http://example.com") a link
| this is he rest of the paragraph.
Другим совершенно другим подходом было бы создать фильтр, который первым ударил бы по замене ссылок, а затем отображает с помощью нефрита второй
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>
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 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 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());
Изменить: эта функция была реализована и закрыта, см. ответ выше.
Я опубликовал вопрос, чтобы добавить эту функцию в Jade
https://github.com/visionmedia/jade/issues/936
Не успел его реализовать, но больше + 1 может помочь!
Если ваши ссылки взяты из источника данных, вы можете использовать:
ul
each val in results
p
| blah blah
a(href="#{val.url}") #{val.name}
| more blah
См. interpolation
Это лучшее, что я могу придумать
-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>
Работает нормально, но чувствует себя немного взломанным - там действительно должен быть синтаксис для этого!
Я не понимал, что нефрит требует строки за тег. Я думал, что мы можем сэкономить место. Гораздо лучше, если это можно понять ul > li > a [ class= "emmet" ] {text}
Мне пришлось добавить период непосредственно за ссылку, например:
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>.
Как предложил Даниэль Баулиг, используемый ниже с динамическими параметрами
| <a href=!{aData.link}>link</a>
Оказывается, есть (по крайней мере) совершенно простой вариант
p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.
p
| At Times Like These We Suggest Just Going:
a(ui-sref="app") HOME
|
Самая простая вещь когда-либо;), но я боролся с этим сам в течение нескольких секунд. Anywho, вам нужно использовать объект HTML для знака "@" → @
Если вы хотите включить ссылку, скажем, ваш/какой-то адрес электронной почты:
p
a(href="mailto:[email protected]" target="_top") me@myemail.com