Джейд: ссылки внутри абзаца
Я пытаюсь создать несколько абзацев с Джейд, но найти его трудно, когда есть связи внутри абзаца.
лучшее, что я могу придумать, и мне интересно, есть ли способ сделать это с меньшей разметкой:
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 ответов:
как Джейд 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.в качестве альтернативы кажется, что вы можете просто ouput 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не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>полный рабочий пример: индекс.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=''></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());
Если все ваши ссылки приходят из источника данных вы можете использовать:
ul each val in results p | blah blah a(href="#{val.url}") #{val.name} | more blahпосмотреть интерполяция
Edit: эта функция была реализована и проблема закрыта, см. ответ выше.
Я опубликовал вопрос, чтобы получить эту функцию добавлена в Jade
https://github.com/visionmedia/jade/issues/936
не было времени, чтобы реализовать его, хотя, больше +1s может помочь !
Это лучшее, что я могу придумать
-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>.
Как полагает Даниил Baulig, используемые ниже при динамических параметров
| <a href=!{aData.link}>link</a>
оказывается, есть (по крайней мере сейчас) совершенно простой вариант
p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.
самая простая вещь когда-либо ;) но я сам боролся с этим в течение нескольких секунд. В любом случае, вам нужно использовать HTML-объект для знака"@" ->
@Если вы хотите включить ссылку, скажем, ваш / какой-то адрес электронной почты использует это:p a(href="mailto:[email protected]" target="_top") me@myemail.com
Comments