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

Question

Я пытаюсь написать несколько абзацев с помощью 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.

Answer 1

Начиная с 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]]

Answer 2

Вы можете использовать фильтр уценки и использовать уценку (и разрешенный 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: Кажется, что на самом деле это можно сделать в Jade следующим образом:

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

Answer 3

Еще один способ сделать это:

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

Answer 4

Если ваши ссылки поступают из источника данных, вы можете использовать:

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

См. интерполяция

Answer 5

Другим совершенно другим подходом будет создание фильтра, который сначала наносит удар при замене ссылок, а затем рендерит с нефритовой секундой

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

Answer 6

Редактировать: эта функция была реализована и проблема закрыта, см. Ответ выше.

---

Я опубликовал вопрос о добавлении этой функции в Jade

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

Хотя у него не было времени на его реализацию, может помочь еще + 1!

Answer 7

Это лучшее, что я могу придумать

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

Работает нормально, но похоже на хак - там действительно должно бытьсинтаксис для этого!

Answer 8

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

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

Answer 9

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

Answer 10

Оказывается, есть (теперь, по крайней мере) совершенно простой вариант

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