mkdocs open in new tab ดาวน์โหลด - mkdocs open in new tab ดาวน์โหลด

mkdocs open in new tab

โค้ดแหล่งที่มา AI

mkdocs-open-in-new-tab 1.0.3

ดาวน์โหลด

mkdocs - เปิดในปลั๊กอินแท็บใหม่

ปลั๊กอินนี้เพิ่มรหัส JS เพื่อเปิดลิงก์ขาออกและ PDFs ในแท็บใหม่

การเปิดลิงก์อัตโนมัติในแท็บใหม่เป็นคุณสมบัติทั่วไปของเว็บไซต์สมัยใหม่ นอกจากนี้ยังเป็นแนวปฏิบัติที่ดีสำหรับการเข้าถึง อย่างไรก็ตามมันไม่ใช่พฤติกรรมเริ่มต้นของ markdown ปลั๊กอินนี้เพิ่มรหัส JavaScript ไปยังเว็บไซต์ของคุณที่เปิดลิงก์ภายนอกและ PDFs ในแท็บใหม่

ดูการสาธิต

การติดตั้ง

ติดตั้งปลั๊กอินโดยใช้ PIP จาก PYPI:

pip install mkdocs-open-in-new-tab

การใช้งาน

เพิ่มปลั๊กอินลงใน mkdocs.yml ของคุณ:

 plugins :
  - search
  - open-in-new-tab

การกำหนดค่า

ปลั๊กอินรองรับตัวเลือกการกำหนดค่าต่อไปนี้:

add_icon: (ค่าเริ่มต้น: false)
- หากตั้งค่าเป็นจริงปลั๊กอินจะเพิ่มไอคอนถัดจากลิงค์ภายนอก

การทดสอบ

ลิงก์ไปยัง Google และ GitHub ทั้งสองควรลิงก์ควรเปิดในแท็บใหม่

ลิงค์สัมพัทธ์ไปยังลิงค์สัมพัทธ์ควรเปิดในแท็บเดียวกัน

ตัวอย่างลิงก์ PDF ไปยัง PDF ควรเปิดในแท็บใหม่ (PDF จากที่นี่)

มันทำงานอย่างไร?

ปลั๊กอินเพิ่มรหัส JavaScript ไปยังเว็บไซต์ของคุณที่เปิดลิงก์ภายนอกและ PDFs ในแท็บใหม่ การฉีดรหัสทำได้โดยใช้ hook on_page_context รหัสถูกฉีดเข้าไปในส่วน <head> ของหน้าเป็น <script> การพึ่งพาของไฟล์ open_in_new_tab.js รหัสจะถูกเพิ่มโดยอัตโนมัติในทุกหน้าของเว็บไซต์ของคุณ

ฟังก์ชั่น external_new_window ตรวจสอบว่าลิงก์ภายนอกโดยใช้คุณสมบัติ hostname ขององค์ประกอบ a หรือไม่ หากลิงค์อยู่ภายนอก target เป้าหมายจะถูกตั้งค่าเป็น _blank และแอตทริบิวต์ rel ถูกตั้งค่าเป็น noopener แอตทริบิวต์ noopener ใช้เพื่อป้องกันไม่ให้แท็บใหม่เข้าถึง window.opener Property และทำให้มั่นใจได้ว่าหน้าดั้งเดิมจะไม่สามารถเข้าถึงแท็บใหม่ได้

วิธีเดียวกันใช้ในการเปิดลิงก์ PDF ในแท็บใหม่

แสดงซอร์สโค้ด

ดูแหล่งที่มานี้ open_in_new_tab.js:

 // Description: Open external links in a new tab and PDF links in a new tab
// Based on: https://jekyllcodex.org/without-plugin/new-window-fix/

// Open external links in a new window
function external_new_window ( ) {
    for ( let c = document . getElementsByTagName ( "a" ) , a = 0 ; a < c . length ; a ++ ) {
        let b = c [ a ] ;
        if ( b . getAttribute ( "href" ) && b . host !== location . host ) {
            b . target = "_blank" ;
            b . rel = "noopener" ;
        }
    }
}

// Open PDF links in a new window
function pdf_new_window ( ) {
    if ( ! document . getElementsByTagName ) {
        return false ;
    }

    const extensions = [ '.pdf' , '.doc' , '.docx' , '.json' , '.xls' , '.xlsx' , '.ppt' , '.pptx' , '.zip' , '.rar' , '.tar' , '.gz' , '.7z' , '.bz2' , '.xz' , '.tgz' , '.tar.gz' ] ;
    let links = document . getElementsByTagName ( "a" ) ;

    for ( let eleLink = 0 ; eleLink < links . length ; eleLink ++ ) {
        let href = links [ eleLink ] . href . toLowerCase ( ) ; // Convert href to lowercase for case-insensitive matching

        if ( extensions . some ( ext => href . endsWith ( ext ) ) ) {
            links [ eleLink ] . onclick = function ( ) {
                window . open ( this . href ) ;
                return false ;
            }
        }
    }
}

function apply_rules ( ) {
    external_new_window ( ) ;
    pdf_new_window ( ) ;
}

if ( typeof document$ !== "undefined" ) {
    // Compatibility with mkdocs-material's instant loading feature
    document$ . subscribe ( function ( ) {
        apply_rules ( ) ;
    } ) ;
} else {
    // For browsers without mkdocs-material's instant loading feature
    document . addEventListener ( "DOMContentLoaded" , function ( ) {
        apply_rules ( ) ;
    } ) ;
}

open_in_new_tab.css (เพิ่มเมื่อ add_icon: true)

 /*
 * Materialize links that open in a new window with a right-up arrow icon
 * Author: @ebouchut (https://github.com/ebouchut)
 * https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/issues/4
 */
 a [ target = "_blank" ]:: after {
    content : "↗" ;
    display : inline-block;
    margin-left : 0.2 em ;
    width : 1 em ;
    height : 1 em ;
}