Нефрит: Посилання всередині абзацу


118

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

Найкраще, що я можу придумати, і мені цікаво, чи є спосіб зробити це з меншою розміткою:

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.

Відповіді:


116

Що стосується нефриту 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

Ви можете використовувати фільтр розмітки та використовувати позначку (та дозволений 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

Я сам цього не знав і просто перевірив це за допомогою інструменту командного рядка нефрит. Здається, це працює просто чудово.

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


1
Дякую. Маркдаун ідеально підходить для цього. Я виявив, що пакет знижок NPM не склався, і виникла проблема з відміткою NPM (чистий JS) з 0,5 (він використовує регулярні вирази як функції, видалені з Chrome). Для всіх, хто читає, рішення, мабуть, "npm встановити 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 вище, тому що це було найменш болісно.
Райан Естабрук

Піднесені лише смужки простягають пробіли, якщо ви цього сказали. У мене є, тому я використовую &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
Це найелегантніше рішення.
суперлюмінація

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



2

Редагувати: Ця функція була реалізована та проблема закрита, див. Відповідь вище.


Я опублікував проблему, щоб додати цю функцію в Jade

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

Не встигли реалізувати це, хоча більше +1 можуть допомогти!


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

Я не усвідомлював, що для нефриту потрібен рядок на тег. Я думав, що ми можемо заощадити місце. Набагато краще, якщо це можна зрозуміти ul> li> a [class = "emmet"] {text}


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>

0

Виявляється, існує (принаймні, зараз) абсолютно простий варіант

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

2
Різновид поразки з метою використання препроцесора, якщо вам доведеться зануритися назад у html при перших ознаках проблеми.
суперлюмінація

2
Погоджено, але використовуючи трубу та нову лінію щоразу, коли вам потрібно буде додавати вбудований тег, ми навряд чи ідеальні. У новій для нефриту, але це здається головним упущенням
Саймон Н

2
Я теж перейшов з haml, де тег встановлено з%. Нефрит набагато гарніший.
суперлюмінація


-1

Найпростіша річ;), але я сам боровся з цим кілька секунд. У будь-якому випадку, вам потрібно використовувати сутність HTML для знаку "@" -> &#64; Якщо ви хочете включити посилання, скажімо, ваша електронна адреса використовує це:

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.