mkdocs open in new tab - mkdocs open in new tab

mkdocs open in new tab

Código-Fonte de IA

mkdocs-open-in-new-tab 1.0.3

Baixar

Mkdocs - Abrir em um novo plugin de guia

Este plug -in adiciona código JS para abrir links e PDFs em uma nova guia.

A abertura automática de links em uma nova guia é um recurso comum dos sites modernos. Também é uma boa prática para a acessibilidade. No entanto, não é um comportamento padrão do Markdown. Este plug -in adiciona um código JavaScript ao seu site que abre links externos e PDFs em uma nova guia.

Olhe para a demonstração.

Instalação

Instale o plug -in usando o PIP da Pypi:

pip install mkdocs-open-in-new-tab

Uso

Adicione o plug -in ao seu mkdocs.yml :

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

Configuração

O plug -in suporta a seguinte opção de configuração:

add_icon: (padrão: false)
- Se definido como true, o plug -in adicionará um ícone ao lado de links externos.

Teste

Link para Google e Github. Ambos os links devem abrir em uma nova guia.

O link relativo para o link relativo deve abrir na mesma guia.

O link PDF de amostra para PDF deve abrir em uma nova guia (PDF daqui).

Como funciona?

O plug -in adiciona um código JavaScript ao seu site que abre links externos e PDFs em uma nova guia. A injeção do código é feita usando o gancho on_page_context . O código é injetado na seção <head> da página como uma dependência <script> do arquivo open_in_new_tab.js . O código é adicionado automaticamente a todas as páginas do seu site.

A função external_new_window verifica se o link é externo usando a propriedade hostname do elemento a Se o link for externo, o atributo target será definido como _blank e o atributo rel será definido como noopener . O atributo noopener é usado para impedir que a nova guia acesse a propriedade window.opener e garante que a página original não possa acessar a nova guia.

A mesma maneira é usada para abrir links em PDF em uma nova guia.

Mostre código fonte

Veja esta fonte 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 (adicionado quando 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 ;
}