Jade: ลิงก์ภายในย่อหน้า

ฉันกำลังพยายามเขียนบางย่อหน้าด้วย 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.

เนื่องจาก 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]]

คุณสามารถใช้ตัวกรอง 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

อีกวิธีในการทำ:

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>

ตัวอย่างการทำงานแบบเต็ม: 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());

หากลิงก์ของคุณมาจากแหล่งข้อมูลคุณสามารถใช้:

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

ดูการแก้ไข

แก้ไข: คุณลักษณะนี้ได้รับการติดตั้งและปิดปัญหาแล้วโปรดดูคำตอบด้านบน

ฉันได้โพสต์ปัญหาเพื่อเพิ่มฟีเจอร์นี้ใน Jade

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

ยังไม่มีเวลาใช้งาน แต่ +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>

ใช้งานได้ดี แต่รู้สึกเหมือนเป็นการแฮ็กเล็กน้อย - ควรมีไวยากรณ์สำหรับสิ่งนี้จริงๆ!

ฉันไม่รู้ว่าหยกต้องใช้บรรทัดต่อแท็ก ฉันคิดว่าเราสามารถประหยัดพื้นที่ได้ จะดีกว่านี้มากถ้าเข้าใจ 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>.

ตามคำแนะนำของ Daniel 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
    |  

สิ่งที่ง่ายที่สุดเท่าที่เคยมีมา;) แต่ฉันกำลังดิ้นรนกับตัวเองอยู่สองสามวินาที อย่างไรก็ตามคุณต้องใช้เอนทิตี HTML สำหรับเครื่องหมาย "@" -> @ หากคุณต้องการรวมลิงก์สมมติว่าที่อยู่อีเมลของคุณ / บางส่วนใช้สิ่งนี้:

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