mkdocs open in new tab
mkdocs-open-in-new-tab 1.0.3
Este complemento agrega código JS para abrir enlaces salientes y PDF en una nueva pestaña.
La apertura automática de enlaces en una nueva pestaña es una característica común de los sitios web modernos. También es una buena práctica para la accesibilidad. Sin embargo, no es un comportamiento predeterminado de Markdown. Este complemento agrega un código JavaScript a su sitio web que abre enlaces externos y PDF en una nueva pestaña.
Mira la demostración.
Instale el complemento con PIP de PYPI:
pip install mkdocs-open-in-new-tab Agregue el complemento a su mkdocs.yml :
plugins :
- search
- open-in-new-tab El complemento admite la siguiente opción de configuración:
add_icon: (predeterminado: falso)Enlace a Google y Github. Ambos deben abrirse los enlaces en una nueva pestaña.
El enlace relativo al enlace relativo debe abrirse en la misma pestaña.
El enlace PDF de muestra a PDF debe abrirse en una nueva pestaña (PDF desde aquí).
El complemento agrega un código JavaScript a su sitio web que abre enlaces externos y PDF en una nueva pestaña. La inyección del código se realiza utilizando el gancho on_page_context . El código se inyecta en la sección <head> de la página como una dependencia <script> del archivo open_in_new_tab.js . El código se agrega automáticamente a todas las páginas de su sitio web.
La función external_new_window verifica si el enlace es externo usando la propiedad hostname del elemento a Si el enlace es externo, el atributo target se establece en _blank y el atributo rel se establece en noopener . El atributo noopener se utiliza para evitar que la nueva pestaña acceda a la window.opener Propiedad Opener y garantiza que la página original no pueda acceder a la nueva pestaña.
La misma manera se usa para abrir enlaces PDF en una nueva pestaña.
Mire esta fuente 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 (agregado cuando 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 ;
}Este proyecto tiene licencia bajo los términos de la licencia MIT.
