mkdocs open in new tab скачать - mkdocs open in new tab . Скачать исходный код

mkdocs open in new tab

AI Исходный код

mkdocs-open-in-new-tab 1.0.3

Скачать

MKDOCS - Открыть в новом плагине вкладок

Этот плагин добавляет код JS для открытия исходящих ссылок и PDF -файлов на новой вкладке.

Автоматическое открытие ссылок на новой вкладке является общей функцией современных сайтов. Это также хорошая практика для доступности. Тем не менее, это не поведение по умолчанию. Этот плагин добавляет код JavaScript на ваш сайт, который открывает внешние ссылки и PDF -файлы на новой вкладке.

Посмотрите на демонстрацию.

Установка

Установите плагин, используя PIP от PYPI:

pip install mkdocs-open-in-new-tab

Использование

Добавьте плагин в свой mkdocs.yml :

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

Конфигурация

Плагин поддерживает следующую опцию конфигурации:

add_icon: (по умолчанию: false)
- Если установить в True, плагин добавит значок рядом с внешними ссылками.

Тестирование

Ссылка на Google и GitHub. Обе ссылки должны открываться на новой вкладке.

Относительная ссылка на относительную ссылку должна открываться на той же вкладке.

Пример ссылки PDF на PDF должен открыть на новой вкладке (PDF отсюда).

Как это работает?

Плагин добавляет код JavaScript на ваш сайт, который открывает внешние ссылки и PDF -файлы на новой вкладке. Инъекция кода выполняется с использованием крюка on_page_context . Код вводится в раздел <head> страницы как зависимость <script> файла open_in_new_tab.js . Код автоматически добавляется на все страницы вашего сайта.

Функция external_new_window проверяет, является ли внешняя ссылка, используя свойство hostname элемента a Если ссылка является внешней, target атрибут установлен в _blank , а атрибут rel установлен в noopener . Атрибут noopener используется для предотвращения доступа к новой вкладке в window.opener свойство.

Точно так же используется для открытия ссылок PDF на новой вкладке.

Показать исходный код

Посмотрите на этот источник 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 (добавлено, когда 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 ;
}