mkdocs open in new tab Unduh - mkdocs open in new tab

mkdocs open in new tab

Kode Sumber AI

mkdocs-open-in-new-tab 1.0.3

Unduh

MKDOCS - Buka di plugin tab baru

Plugin ini menambahkan kode JS untuk membuka tautan keluar dan PDF di tab baru.

Pembukaan tautan otomatis di tab baru adalah fitur umum dari situs web modern. Ini juga merupakan praktik yang baik untuk aksesibilitas. Namun, ini bukan perilaku default dari penurunan harga. Plugin ini menambahkan kode JavaScript ke situs web Anda yang membuka tautan eksternal dan PDF di tab baru.

Lihatlah demo.

Instalasi

Pasang plugin menggunakan PIP dari PYPI:

pip install mkdocs-open-in-new-tab

Penggunaan

Tambahkan plugin ke mkdocs.yml Anda:

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

Konfigurasi

Plugin mendukung opsi konfigurasi berikut:

add_icon: (default: false)
- Jika diatur ke True, plugin akan menambahkan ikon di sebelah tautan eksternal.

Pengujian

Tautan ke Google dan GitHub. Keduanya harus tautan harus dibuka di tab baru.

Tautan relatif ke tautan relatif harus dibuka di tab yang sama.

Contoh tautan PDF ke PDF harus dibuka di tab baru (pdf dari sini).

Bagaimana cara kerjanya?

Plugin menambahkan kode JavaScript ke situs web Anda yang membuka tautan eksternal dan PDF di tab baru. Injeksi kode dilakukan dengan menggunakan kait on_page_context . Kode disuntikkan ke bagian <head> halaman sebagai dependensi <script> dari file open_in_new_tab.js . Kode secara otomatis ditambahkan ke semua halaman situs web Anda.

Fungsi external_new_window memeriksa apakah tautannya eksternal menggunakan properti hostname dari elemen a Jika tautannya eksternal, atribut target diatur ke _blank dan atribut rel diatur ke noopener . Atribut noopener digunakan untuk mencegah tab baru mengakses window.opener Properti Openener dan memastikan bahwa halaman asli tidak akan dapat mengakses tab baru.

Cara yang sama digunakan untuk membuka tautan PDF di tab baru.

Tampilkan kode sumber

Lihatlah sumber ini 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 (ditambahkan saat 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 ;
}