Джейд: ссылки внутри абзаца



Я пытаюсь создать несколько абзацев с Джейд, но найти его трудно, когда есть связи внутри абзаца.



лучшее, что я могу придумать, и мне интересно, есть ли способ сделать это с меньшей разметкой:



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

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.
p
    | At Times Like These We Suggest Just Going:
    a(ui-sref="app") HOME
    | &nbsp;

самая простая вещь когда-либо ;) но я сам боролся с этим в течение нескольких секунд. В любом случае, вам нужно использовать HTML-объект для знака"@" ->&#64; Если вы хотите включить ссылку, скажем, ваш / какой-то адрес электронной почты использует это:

p
    a(href="mailto:[email protected]" target="_top") me&#64;myemail.com

Comments

    Ничего не найдено.