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

118

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

Ответы:

116

Начиная с jade 1.0 есть более простой способ справиться с этим, к сожалению, я не могу найти его в официальной документации.

Вы можете добавлять встроенные элементы со следующим синтаксисом:

#[a.someClass A Link!]

Итак, пример без использования нескольких строк в ap будет примерно таким:

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]]
Клейтон Гулик
источник
6
Это описано здесь: jade-lang.com/reference/interpolation в разделе «Интерполяция тегов».
Олан
94

Вы можете использовать фильтр markdown и использовать markdown (и разрешенный 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. Кажется, все работает нормально.

РЕДАКТИРОВАТЬ: Кажется, на самом деле это можно сделать полностью в 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

Даниэль Баулиг
источник
1
Спасибо. Markdown идеально подходит для этого. Я обнаружил, что пакет скидок NPM не компилировался, и есть проблема с пакетом NPM markdown (чистый JS) с 0,5 (он использует регулярные выражения в качестве функций, удаленных из Chrome). Для всех, кто читает, очевидно, решение - «npm install markdown-js», а затем переименовать его в «markdown». (Как я обнаружил, Джейд не смотрит на "markdown-js".) У меня работало.
mahemoff
9
Похоже, что в ближайшем будущем эту проблему можно решить с помощью интерполяции, чтобы вы могли это сделать p This is a paragraph #[a(href="#") with a link] in it. См. Github.com/visionmedia/jade/issues/936
Будет
3
Если вы используете третий вариант, будьте осторожны с тем, какой редактор вы используете, я использую Sublime, и по умолчанию он удалит пробел в конце абзаца. В конечном итоге я выбрал вариант 2 выше, потому что он был наименее болезненным.
Райан Истабрук 02
Sublime удаляет конечные пробелы только в том случае, если вы это сказали. У меня есть, поэтому я использую &nbsp;в конце первой строки, но я обсуждаю свои подходы в будущем.
Дэйв Ньютон
1
Это было решено в Jade 1.0, см. Stackoverflow.com/questions/6989653#answer-23923895
Emilien
45

Другой способ сделать это:

p
  | this is the start of the para
  a(href="http://example.com") a link
  | this is he rest of the paragraph.
Пера
источник
4
Это самое элегантное решение.
superluminary
3

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

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());
Билли Мун
источник
1
Это слишком сложное решение. Теперь есть более простые способы.
JGallardo
@BillyMoon stackoverflow.com/questions/6989653/…
Эмильен
3

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

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

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

P.Brian.Mackey
источник
2

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


Я опубликовал проблему, чтобы добавить эту функцию в Jade

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

У меня не было времени реализовать это, может помочь больше +1!

jpillora
источник
2
Большое спасибо @jpillora за создание этой проблемы, которая закончилась реализацией этой функции встраивания.
Эмильен
1

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

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

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

Билли Мун
источник
0

Я не понимал, что для jade требуется строка для каждого тега. Я думал, мы можем сэкономить место. Намного лучше, если это будет понятно ul> li> a [class = "emmet"] {text}

paoloumali
источник
0

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

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>.
Рик Пастур
источник
0

Как предложил Даниэль Баулиг, используется ниже с динамическими параметрами

| <a href=!{aData.link}>link</a>
Shams
источник
0

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

p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.
Саймон Х
источник
2
Вид поражения цели использования препроцессора, если вам нужно снова окунуться в html при первых признаках проблемы.
superluminary
2
Согласен, но использование конвейера и новой строки каждый раз, когда вам нужно добавить встроенный тег, вряд ли идеально. В новинку для jade, но это кажется серьезным упущением
Саймон Х
2
Я тоже, я пришел из haml, где тег начинается с%. Но Джейд намного красивее.
superluminary
0
p
    | At Times Like These We Suggest Just Going:
    a(ui-sref="app") HOME
    | &nbsp;
Доктор Манхэттен
источник
-1

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

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
Яма Таненбаум
источник