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를 열어줍니다.

새 탭에서 링크를 자동으로 오픈하는 것은 현대 웹 사이트의 일반적인 기능입니다. 또한 접근성을위한 좋은 관행입니다. 그러나 마크 다운의 기본 동작은 아닙니다. 이 플러그인은 새 탭에서 외부 링크와 PDF를 열어주는 웹 사이트에 JavaScript 코드를 추가합니다.

데모를보십시오.

설치

PYPI에서 PIP를 사용하여 플러그인을 설치하십시오.

pip install mkdocs-open-in-new-tab

용법

mkdocs.yml 에 플러그인을 추가하십시오 :

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

구성

플러그인은 다음 구성 옵션을 지원합니다.

add_icon: (기본값 : false)
- true로 설정되면 플러그인은 외부 링크 옆에 아이콘을 추가합니다.

테스트

Google 및 Github에 링크. 둘 다 링크가 새 탭에서 열려야합니다.

상대 링크에 대한 상대 링크는 동일한 탭에서 열려야합니다.

PDF에 대한 샘플 PDF 링크는 새 탭에서 열려야합니다 (여기에서 PDF).

어떻게 작동합니까?

플러그인은 새 탭에서 외부 링크와 PDF를 여는 웹 사이트에 JavaScript 코드를 추가합니다. 코드 주입은 on_page_context 후크를 사용하여 수행됩니다. 코드는 페이지의 <head> 섹션에 open_in_new_tab.js 파일의 <script> 종속성으로 주입됩니다. 코드는 웹 사이트의 모든 페이지에 자동으로 추가됩니다.

function external_new_window 함수는 a 요소의 hostname 속성을 사용하여 링크가 외부인지 확인합니다. 링크가 외부 인 경우 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 ;
}