Jade: links dentro de um parágrafo

Estou tentando escrever alguns parágrafos com Jade, mas acho difícil quando há links dentro de um parágrafo.

O melhor que posso propor, e estou me perguntando se há uma maneira de fazer isso com menos marcação:

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.

No jade 1.0 existe uma maneira mais fácil de lidar com isso, infelizmente não consigo encontrá-la em nenhum lugar da documentação oficial.

Você pode adicionar elementos embutidos com a seguinte sintaxe:

#[a.someClass A Link!]

Portanto, um exemplo sem entrar em várias linhas no ap, seria algo como:

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]

Você também pode fazer elementos embutidos aninhados:

p: This is a #[a(href="#") link with a nested #[span element]]

Você pode usar um filtro de redução e usar a redução (e HTML permitido) para escrever seu parágrafo.

:markdown
  this is the start of the para.
  [a link](http://example.com)
  and this is the rest of the paragraph.

Como alternativa, parece que você pode simplesmente produzir HTML sem problemas:

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

Eu não estava ciente disso e apenas testei usando a ferramenta de linha de comando jade. Parece funcionar muito bem.

EDITAR: Parece que realmente pode ser feito inteiramente em Jade da seguinte maneira:

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

Não se esqueça um espaço extra no final do Pará (embora você não pode vê-lo. E entre | and. Caso contrário, ele será parecido com este para.a linkandnãopara a link and

Outra maneira de fazer isso:

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

Outra abordagem completamente diferente seria criar um filtro, que primeiro tenta substituir os links e, em seguida, renderiza com jade segundo

h1 happy days
:inline
  p this can have [a link](http://going-nowhere.com/) in it

Renderiza:

<h1>happy days</h1><p>this can have <a href='http://going-nowhere.com/'>a link</a> in it</p>

Exemplo completo de trabalho: index.js (executado com 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());

Uma solução mais geral seria renderizar mini sub-blocos de jade em um único bloco (talvez identificado por algo como ${jade goes here}), então ...

p some paragraph text where ${a(href="wherever.htm") the link} is embedded

Isso poderia ser implementado exatamente da mesma maneira que acima.

Exemplo de trabalho de solução geral:

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

Se seus links vierem de uma fonte de dados, você pode usar:

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

Veja interpolação

Editar: este recurso foi implementado e o problema encerrado, consulte a resposta acima.

Eu postei um problema para adicionar esse recurso ao Jade

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

Ainda não tive tempo para implementá-lo, mais + 1s podem ajudar!

Este é o melhor que posso inventar

-var a = function(href,text){ return "<a href='"+href+"'>"+text+"</a>" }

p this is an !{a("http://example.com/","embedded link")} in the paragraph

Renderiza ...

<p>this is an <a href='http://example.com/'>embedded link</a> in the paragraph</p>

Funciona bem, mas parece um hack - deveria haver uma sintaxe para isso!

Não sabia que o jade requer uma linha por etiqueta. Achei que podemos economizar espaço. Muito melhor se isso puder ser entendido ul> li> a [class = "emmet"] {text}

Tive que adicionar um ponto final diretamente atrás de um link, assim:

This is your test [link].

Eu resolvi assim:

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

Como sugerido por Daniel Baulig, usado abaixo com parâmetros dinâmicos

| <a href=!{aData.link}>link</a>

Acontece que existe (pelo menos agora) uma opção perfeitamente simples

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
    |  

A coisa mais simples de todas;) mas eu estava lutando contra isso por alguns segundos. De qualquer forma, você precisa usar uma entidade HTML para o sinal "@" -> @ Se quiser incluir um link, digamos que seu / algum endereço de e-mail use isto:

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