mkdocs open in new tab

mkdocs open in new tab

AI-Quellcode

mkdocs-open-in-new-tab 1.0.3

Herunterladen

MKDOCs - Öffnen Sie in einem neuen Tab -Plugin

Dieses Plugin fügt JS -Code hinzu, um ausgehende Links und PDFs in einer neuen Registerkarte zu öffnen.

Die automatische Öffnung von Links in einer neuen Registerkarte ist ein gemeinsames Merkmal moderner Websites. Es ist auch eine gute Praxis für die Zugänglichkeit. Es handelt sich jedoch nicht um ein Standardverhalten von Markdown. Dieses Plugin fügt Ihrer Website einen JavaScript -Code hinzu, der externe Links und PDFs in einer neuen Registerkarte öffnet.

Schau dir die Demo an.

Installation

Installieren Sie das Plugin mit PIP von PYPI:

pip install mkdocs-open-in-new-tab

Verwendung

Fügen Sie das Plugin zu Ihrem mkdocs.yml hinzu:

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

Konfiguration

Das Plugin unterstützt die folgende Konfigurationsoption:

add_icon: (Standard: Falsch)
- Wenn das Plugin auf True gesetzt ist, fügt das Plugin ein Symbol neben externen Links hinzu.

Testen

Link zu Google und GitHub. Beide sollten Links in einer neuen Registerkarte geöffnet werden.

Die relative Verbindung zum relativen Link sollte auf derselben Registerkarte geöffnet werden.

Beispiel PDF -Link zu PDF sollte in einer neuen Registerkarte (PDF von hier) geöffnet werden.

Wie funktioniert es?

Das Plugin fügt Ihrer Website einen JavaScript -Code hinzu, der externe Links und PDFs in einer neuen Registerkarte öffnet. Die Injektion des Codes erfolgt mit dem on_page_context Hook. Der Code wird in den Abschnitt <head> der Seite als <script> Abhängigkeit der Datei open_in_new_tab.js injiziert. Der Code wird automatisch zu allen Seiten Ihrer Website hinzugefügt.

Die Funktion external_new_window überprüft, ob der Link unter Verwendung der hostname -Eigenschaft des a -Elements extern ist. Wenn der Link extern ist, wird das target auf _blank gesetzt und das rel -Attribut auf noopener gesetzt. Das noopener -Attribut wird verwendet, um zu verhindern, dass die neue Registerkarte auf das window.opener zugreift. Openerer -Eigenschaft, und stellt sicher, dass die Originalseite nicht in der Lage ist, auf die neue Registerkarte zuzugreifen.

Die gleichen Weise wird verwendet, um PDF -Links in einer neuen Registerkarte zu öffnen.

Quellcode anzeigen

Schauen Sie sich diese Quelle an 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 (hinzugefügt, wenn 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 ;
}