mkdocs open in new tab
mkdocs-open-in-new-tab 1.0.3
Ce plugin ajoute du code JS pour ouvrir des liens sortants et des PDF dans un nouvel onglet.
L'ouverture automatique des liens dans un nouvel onglet est une caractéristique commune des sites Web modernes. C'est aussi une bonne pratique pour l'accessibilité. Cependant, ce n'est pas un comportement par défaut de Markdown. Ce plugin ajoute un code JavaScript à votre site Web qui ouvre des liens et des PDF externes dans un nouvel onglet.
Regardez la démo.
Installez le plugin à l'aide de PIP à partir de PYPI:
pip install mkdocs-open-in-new-tab Ajoutez le plugin à votre mkdocs.yml :
plugins :
- search
- open-in-new-tab Le plugin prend en charge l'option de configuration suivante:
add_icon: (par défaut: false)Lien vers Google et Github. Les deux devraient les liens doivent s'ouvrir dans un nouvel onglet.
Le lien relatif vers le lien relatif doit s'ouvrir dans le même onglet.
L'exemple de lien PDF vers PDF doit s'ouvrir dans un nouvel onglet (PDF à partir d'ici).
Le plugin ajoute un code JavaScript à votre site Web qui ouvre des liens et des PDF externes dans un nouvel onglet. L'injection du code est effectuée à l'aide du crochet on_page_context . Le code est injecté dans la section <head> de la page en tant que dépendance <script> du fichier open_in_new_tab.js . Le code est automatiquement ajouté à toutes les pages de votre site Web.
La fonction external_new_window vérifie si le lien est externe à l'aide de la propriété hostname de l'élément a Si le lien est externe, l'attribut target est défini sur _blank et l'attribut rel est défini sur noopener . L'attribut noopener est utilisé pour empêcher le nouvel onglet d'accéder à la propriété window.opener et garantit que la page d'origine ne pourra pas accéder à la nouvelle onglet.
La même manière est utilisée pour ouvrir des liens PDF dans un nouvel onglet.
Regardez cette source 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 (ajouté lorsque 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 ;
}Ce projet est concédé sous licence de la licence du MIT.
