ฉันสามารถสร้างลิงค์ด้วย 'target =“ _ blank”' ใน Markdown ได้หรือไม่


460

มีวิธีในการสร้างลิงค์ใน Markdown ที่เปิดในหน้าต่างใหม่หรือไม่? ถ้าไม่คุณแนะนำให้ใช้ไวยากรณ์อะไร ฉันจะเพิ่มลงในคอมไพเลอร์ markdown ที่ฉันใช้ ฉันคิดว่ามันควรจะเป็นตัวเลือก


ดังนั้นตามที่ระบุไว้ในคำตอบมันไม่ได้เป็นคุณสมบัติในการทำเครื่องหมาย หากคุณต้องการที่จะทำให้ทั่วทั้งไซต์นี้เริ่มต้นที่จะเชื่อมโยงจากเดวิดมอร์โรว์มีคำตอบ หรือถ้าคุณต้องการที่จะทำในตัวอย่างเดียวคำตอบของ Matchu บอกว่าคุณต้องเขียนมันเป็น HTML
JGallardo

การทำสำเนาที่เป็นไปได้ของMarkdown เปิดลิงก์หน้าต่างใหม่
Serge Stroobandt

คำถามของคุณไม่เฉพาะเจาะจงเกี่ยวกับสิ่งที่คุณกำลังทำ แต่เอ็นจิ้น markdown หรือเบราว์เซอร์บางตัว (ไม่แน่ใจว่า) รับรู้เมื่อลิงก์ที่คุณกำลังสร้างชี้ไปที่โดเมนอื่นและจะเปิดในแท็บใหม่ สำหรับฉันมีบางครั้งที่การลบออกsจากhttps:คือเพียงพอที่จะได้รับฟังก์ชั่นที่ฉันต้องการ
Josh Gust

คำตอบ:


377

ถ้าคุณต้องการทราบรายละเอียดนั้นคุณจะต้องใช้ HTML

<a href="http://example.com/" target="_blank">Hello, world!</a>

เอ็นจิ้นมาร์กดาวน์ส่วนใหญ่ที่ฉันเคยเห็นอนุญาตให้ใช้ HTML แบบเก่าธรรมดาสำหรับสถานการณ์เช่นนี้เท่านั้นที่ระบบมาร์คอัปข้อความทั่วไปจะไม่ตัดมัน (ตัวอย่างเช่นเครื่องมือ StackOverflow) จากนั้นพวกเขาจะรันเอาต์พุตทั้งหมดผ่านตัวกรองรายการที่อนุญาต HTML โดยไม่คำนึงถึงเนื่องจากแม้แต่เอกสารที่มี Markdown เท่านั้นก็สามารถมีการโจมตี XSS ได้อย่างง่ายดาย ดังนั้นหากคุณหรือผู้ใช้ของคุณต้องการสร้าง_blankลิงก์ก็อาจทำได้

ถ้านั่นเป็นคุณสมบัติที่คุณจะใช้บ่อยมันอาจสมเหตุสมผลในการสร้างไวยากรณ์ของคุณเอง แต่โดยทั่วไปไม่ใช่คุณสมบัติที่สำคัญ หากฉันต้องการเปิดลิงค์นั้นในหน้าต่างใหม่ฉันจะคลิกเองเองขอบคุณ


19
คุณรู้อะไรไหม ผมเห็นด้วยกับคุณและอเล็กซ์ ฉันตัดสินใจที่จะไม่ใช้_blankเลย มันเป็นประสบการณ์ที่ดีกว่าสำหรับผู้ใช้ในการเก็บสิ่งต่าง ๆ ไว้ในเบราว์เซอร์เดียว พวกเขาสามารถกดกลับหรือคลิกคำสั่ง (ผู้ใช้ Mac ที่นี่ :)) เช่นที่คุณพูด
ma11hew28

1
ฉันใช้งานจาวาสคริปต์ในหน้าเว็บที่เพิ่ม _blank ไปยังลิงก์ทั้งหมดนอกโดเมนของฉัน เช่น @alex มีคำตอบถัดไป
David Silva Smith

3
ผมจะแนะนำ (ในความปรารถนาของการเป็นที่ชัดเจนและอ่านได้แบบอินไลน์) ไวยากรณ์ต่อไปนี้[Visit this page](http::/link.com(จะได้รับความคิดของการเปิด
Augustin Riedinger

4
เป้าหมายอย่างง่าย = "_ blank" อาจอันตราย! เพิ่ม rel = "noopener" ลงในแท็กด้วย! ( sites.google.com/site/bughunteruniversity/nonvuln/ … )
Max Vyaznikov

1
@MaxVyaznikov ที่น่าสนใจ คุณคิดว่าจะปลอดภัยกว่าหรือไม่หากเบราว์เซอร์ที่มีหน้าต่างป๊อปอัปขอบด้านบนสำหรับลงชื่อเข้าใช้ แยก UI การเข้าสู่ระบบสำหรับเว็บไซต์ออกจาก UI การปลอมแปลงและการเข้าสู่ระบบปลอมที่สร้างโดยหน้าเว็บ "lookalike" มันอาจเป็นไปได้มากขึ้นตอนนี้ที่มันยากขึ้นในอดีต
1.21 gigawatts

350

Kramdownรองรับ มันเข้ากันได้กับไวยากรณ์ Markdown มาตรฐาน แต่ก็มีส่วนขยายจำนวนมากเช่นกัน คุณจะใช้มันแบบนี้:

[link](url){:target="_blank"}

7
ดูเหมือนว่าจะไม่ทำงานโดยใช้เครื่องมือ Markdown บน Mac :-(
Netsi1964

48
ใช้งานได้ดีกับ jekyll!
bholagabbar

1
kramdownไวยากรณ์: [ชื่อ link] (URL_LINK) {: target = "_ blank"} สามารถแยกวิเคราะห์เป็น HTML ใช้ kramdown บรรณาธิการออนไลน์: http://trykramdown.herokuapp.com/ ฉันใช้มันเพราะผมแล้วมีค่อนข้างน้อย kramdown อ้างอิงและต้องการหลีกเลี่ยงการพิมพ์ซ้ำอีกครั้ง
algoquant

4
มีวิธีในการ jekyll เพื่อตั้งค่านี้เป็นค่าเริ่มต้นหรือไม่? ฉันต้องการให้ลิงก์ทั้งหมดในโพสต์บล็อกของฉันเปิดด้วยtarget="_blank"
ahirschberg

10
มันไม่ทำงาน มันเป็นเพียงการแสดงผลข้อความ {: target = "_ blank"} เป็นข้อความ
Benny

113

ฉันไม่คิดว่าจะมีคุณสมบัติการมาร์คดาวน์

แม้ว่าอาจมีตัวเลือกอื่น ๆ หากคุณต้องการเปิดลิงก์ที่ชี้นอกไซต์ของคุณโดยอัตโนมัติด้วย JavaScript

var links = document.links;

for (var i = 0, linksLength = links.length; i < linksLength; i++) {
   if (links[i].hostname != window.location.hostname) {
       links[i].target = '_blank';
   } 
}

jsFiddlejsFiddle

หากคุณใช้ jQuery มันง่ายกว่านิดหน่อย ...

$(document.links).filter(function() {
    return this.hostname != window.location.hostname;
}).attr('target', '_blank');

jsFiddle


1
ฉันเห็นด้วยกับคุณ แต่ในโอกาสที่คุณอยู่ใน iframe คุณต้องระเบิดออกจากเฟรมด้วยลิงค์
David Morrow

2
ฉันพบว่ามีเพียงครั้งเดียวที่ฉันบังคับให้ผู้คนเข้ามาในหน้าต่างใหม่คือเมื่อฉันผ่านไปครึ่งประโยคผ่านการเชื่อมโยงที่อื่นภายนอกและฉันต้องการให้แหล่งข้อมูลสำหรับความคิดเห็นของฉันโดยไม่ขัดจังหวะการไหล ข้อมูลโค้ด js นี้เหมาะสำหรับวัตถุประสงค์ - ขอบคุณ upvoted :)
tehwalrus

14
ฉันคิดว่าข้อความจากจาคอบนีลสันไม่ได้ใช้ที่นี่อีกแล้ว เขาบ่นเกี่ยวกับการเปิดหน้าต่างใหม่ แต่ในปัจจุบัน target = "_ blank" จะเปิดขึ้นในแท็บใหม่แทน ฉันเองไม่ชอบเมื่อลิงก์ไปยังโดเมนอื่นไม่เปิดในแท็บใหม่
Alexander Rechsteiner

3
อีกอย่าง: เพราะการพูดJakob Nielsen says you shouldn't do thatเป็นเรื่องที่แย่มาก
Ola Tuvesson

2
ฉันจะเพิ่มที่นี่ว่านี่เป็นที่นิยมในฐานะโซลูชั่นระดับโลก มันช่วยให้ Markdown ของคุณสะอาดซึ่งเป็นจุดของ Markdown
Adam Michael Wood

47

ด้วย Markdown-2.5.2 คุณสามารถใช้สิ่งนี้:

[link](url){:target="_blank"}

2
ฉันลองสิ่งนี้และมันก็ไม่ได้ผลสำหรับฉัน ใช้กับ django 1.6
joel goldstick

5
ทำงานร่วมกับ Jekyll v2.4.0 (การทำงานอาจจะมีรุ่นก่อนหน้านี้เช่นกัน)
nicksuch

5
นี่คือ kramdown (และเนื่องจาก Jekyll ใช้ kramdown มันทำงานได้กับ Jekyll)
z3ntu

1
ดูเหมือนจะไม่ได้รับไวยากรณ์นี้เพื่อทำงานใน GitLab ฉันไม่แน่ใจว่า Markdown รุ่นใดที่ใช้อยู่ในปัจจุบัน
Rockin4Life33

มีวิธีทำให้ค่าเริ่มต้นนี้ดังนั้นฉันไม่ต้องระบุสำหรับทุกลิงก์หรือไม่
Connel

8

โซลูชันระดับโลกวิธีหนึ่งคือการใส่องค์ประกอบ<base target="_blank"> ของหน้าเว็บของ<head>คุณ ที่เพิ่มเป้าหมายเริ่มต้นอย่างมีประสิทธิภาพให้กับทุกองค์ประกอบสมอ ฉันใช้ markdown เพื่อสร้างเนื้อหาบนเว็บไซต์ที่ใช้ Wordpress ของฉันและเครื่องมือปรับแต่งธีมของฉันจะให้ฉันแทรกโค้ดนั้นลงในส่วนบนสุดของทุกหน้า หากธีมของคุณไม่ทำเช่นนั้นแสดงว่ามีปลั๊กอิน


8

ฉันใช้ Grav CMS และทำงานได้อย่างสมบูรณ์:

ตัวถังรถ / เนื้อหา:
Some text[1]

ตัวถังรถ / อ้างอิง:
[1]: http://somelink.com/?target=_blank

ตรวจสอบให้แน่ใจว่าแอตทริบิวต์เป้าหมายนั้นผ่านไปก่อนหากมีแอตทริบิวต์เพิ่มเติมในลิงก์ให้คัดลอก / วางไปยังจุดสิ้นสุดของ URL อ้างอิง

ทำงานเป็นลิงก์โดยตรง:
[Go to this page](http://somelink.com/?target=_blank)


สำหรับการอ้างอิงและนี่คือบทที่เอกสารที่เกี่ยวข้อง
domsson

7

สำหรับ markdown ghost ให้ใช้:

[Google](https://google.com" target="_blank)

พบได้ที่นี่: https://cmatskas.com/open-external-links-in-a-new-window-ghost/


1
ฉันชอบทางออกของคุณ ที่ฉันได้พยายามกับการกำหนดค่าที่แตกต่างกันดูเหมือนว่ามันจะทำงานเฉพาะในการเชื่อมโยงแบบอินไลน์ อาจจะมีวิธีสำหรับการเชื่อมโยงกับการเชื่อมโยงการอ้างอิง [open new window][1] \n [1]: (https://abc.xyz" target="_blank)สิ่งที่ชอบ: บางทีฉันอาจจะเข้าใจผิดบางอย่าง
MrIsaacs

7

ดังนั้นจึงไม่เป็นความจริงเลยที่คุณจะไม่สามารถเพิ่มแอททริบิวต์ลิงค์ลงใน URL มาร์คดาวน์ได้ หากต้องการเพิ่มแอททริบิวให้ตรวจสอบกับตัวแยกวิเคราะห์มาร์คดาวน์พื้นฐานที่ใช้และส่วนขยายใดบ้าง

โดยเฉพาะอย่างยิ่งpandocมีส่วนขยายที่เปิดใช้link_attributesงานซึ่งอนุญาตให้มาร์กอัปในลิงก์ เช่น

[Hello, world!](http://example.com/){target="_blank"}
  • สำหรับผู้ที่มาจากR (เช่นใช้rmarkdown, bookdown, blogdownและอื่น ๆ ) นี้เป็นไวยากรณ์ที่คุณต้องการ
  • สำหรับผู้ที่ไม่ได้ใช้Rคุณอาจต้องเปิดใช้งานส่วนขยายในการโทรpandocด้วย+link_attributes

หมายเหตุ:นี่แตกต่างจากการkramdownสนับสนุนของ parser ซึ่งเป็นคำตอบที่ได้รับการยอมรับข้างต้น โดยเฉพาะอย่างยิ่งโปรดทราบว่า kramdown แตกต่างจากแพนโดเนื่องจากต้องใช้เครื่องหมายจุดคู่ - :- ที่จุดเริ่มต้นของวงเล็บปีกกา - {}เช่น

[link](http://example.com){:hreflang="de"}

โดยเฉพาะอย่างยิ่ง:

# Pandoc
{ attribute1="value1" attribute2="value2"}

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon

สิ่งนี้ใช้ได้กับฉันในสภาพแวดล้อมที่กำหนดเอง ขอบคุณ!
klewis


6

ในโครงการของฉันฉันทำสิ่งนี้และใช้งานได้ดี:

[Link](https://example.org/ "title" target="_blank")

ลิงค์

แต่ไม่ใช่ parsers ทั้งหมดที่อนุญาตให้คุณทำเช่นนั้น


เกือบจะได้ผล แต่ตัวอย่างของคุณแสดงด้วย url ที่เข้ารหัสในชื่อ attr แทนที่จะเป็น attrs ใหม่ (ดูแหล่งที่มาหรือแก้ไขโหนดเป็น html): <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
Graham P Heath

6

ไม่มีวิธีง่ายๆในการทำเช่นนั้นและเช่นเดียวกับ @alex ได้ระบุว่าคุณจะต้องใช้ JavaScript คำตอบของเขาคือทางออกที่ดีที่สุด แต่เพื่อเพิ่มประสิทธิภาพคุณอาจต้องการกรองเฉพาะลิงก์การโพสต์เนื้อหาเท่านั้น

<script>
    var links = document.querySelectorAll( '.post-content a' );  
    for (var i = 0, length = links.length; i < length; i++) {  
        if (links[i].hostname != window.location.hostname) {
            links[i].target = '_blank';
        }
    }
</script>

รหัสเข้ากันได้กับ IE8 + และคุณสามารถเพิ่มไว้ที่ด้านล่างของหน้า โปรดทราบว่าคุณจะต้องเปลี่ยน ".post-content a" เป็นคลาสที่คุณใช้สำหรับโพสต์ของคุณ

เท่าที่เห็นที่นี่: http://blog.hubii.com/target-_blank-for-links-on-ghost/


0

ฉันพบปัญหานี้เมื่อพยายามใช้ markdown โดยใช้ PHP

เนื่องจากผู้ใช้สร้างลิงค์ที่สร้างด้วยมาร์กอัปจำเป็นต้องเปิดในแท็บใหม่ แต่ลิงก์ของไซต์ต้องอยู่ในแท็บฉันเปลี่ยนมาร์กอัปเพื่อสร้างลิงก์ที่เปิดในแท็บใหม่เท่านั้น ดังนั้นไม่ใช่ลิงก์ทั้งหมดที่เชื่อมโยงกับหน้าเว็บ แต่เป็นลิงก์ที่ใช้มาร์กอัป

ใน markdown ฉันเปลี่ยนเอาต์พุตลิงก์ทั้งหมดให้<a target='_blank' href="...">เป็นเรื่องง่ายพอโดยใช้ find / replace


0

ฉันไม่เห็นด้วยที่จะให้ประสบการณ์ผู้ใช้ที่ดีกว่าในการอยู่ในแท็บเบราว์เซอร์เดียว หากคุณต้องการให้ผู้คนอยู่ในไซต์ของคุณหรือกลับมาอ่านบทความนั้นให้จบให้ส่งออกในแท็บใหม่

สร้างคำตอบของ @davidmorrow โยนจาวาสคริปต์นี้ลงในเว็บไซต์ของคุณและเปลี่ยนลิงค์ภายนอกเป็นลิงก์ที่มี target = _blank:

    <script type="text/javascript" charset="utf-8">
      // Creating custom :external selector
      $.expr[':'].external = function(obj){
          return !obj.href.match(/^mailto\:/)
                  && (obj.hostname != location.hostname);
      };

      $(function(){
        // Add 'external' CSS class to all external links
        $('a:external').addClass('external');

        // turn target into target=_blank for elements w external class
        $(".external").attr('target','_blank');

      })

    </script>


0

สำหรับคำตอบ alex ที่สมบูรณ์ (13 ธันวาคม '10)

เป้าหมายการฉีดที่ชาญฉลาดมากขึ้นสามารถทำได้ด้วยรหัสนี้:

/*
 * For all links in the current page...
 */
$(document.links).filter(function() {
    /*
     * ...keep them without `target` already setted...
     */
    return !this.target;
}).filter(function() {
    /*
     * ...and keep them are not on current domain...
     */
    return this.hostname !== window.location.hostname ||
        /*
         * ...or are not a web file (.pdf, .jpg, .png, .js, .mp4, etc.).
         */
        /\.(?!html?|php3?|aspx?)([a-z]{0,3}|[a-zt]{0,4})$/.test(this.pathname);
/*
 * For all link kept, add the `target="_blank"` attribute. 
 */
}).attr('target', '_blank');

คุณสามารถเปลี่ยนข้อยกเว้น regexp ด้วยการเพิ่มส่วนขยายเพิ่มเติมในการ(?!html?|php3?|aspx?)สร้างกลุ่ม (เข้าใจ regexp นี้ที่นี่: https://regex101.com/r/sE6gT9/3 )

และสำหรับรุ่นที่ไม่มี jQuery ให้ตรวจสอบรหัสด้านล่าง:

var links = document.links;
for (var i = 0; i < links.length; i++) {
    if (!links[i].target) {
        if (
            links[i].hostname !== window.location.hostname || 
            /\.(?!html?)([a-z]{0,3}|[a-zt]{0,4})$/.test(links[i].pathname)
        ) {
            links[i].target = '_blank';
        } 
    }
}

0

อัตโนมัติสำหรับลิงก์ภายนอกเท่านั้นโดยใช้ GNU sed & make

หากใครต้องการที่จะทำระบบนี้สำหรับการเชื่อมโยงภายนอกทั้งหมดCSS เป็นไม่มีทางเลือกอื่น อย่างไรก็ตามสามารถเรียกใช้sedคำสั่งต่อไปนี้เมื่อสร้าง (X) HTML จาก Markdown:

sed -i 's|href="http|target="_blank" href="http|g' index.html

นี้ได้โดยอัตโนมัติต่อไปโดยการเพิ่มดังกล่าวข้างต้นคำสั่งไปยังsed makefileดูรายละเอียดของกนูmakeหรือดูว่าฉันได้กระทำที่เกี่ยวกับเว็บไซต์ของฉัน


-3

สิ่งนี้ใช้ได้กับฉัน: [ลิงค์ของหน้า] (URL ของคุณที่นี่ "(เป้าหมาย | _blank)")

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.