mkdocs open in new tab - mkdocs open in new tab

mkdocs open in new tab

كود الذكاء الاصطناعي

mkdocs-open-in-new-tab 1.0.3

تنزيل

MKDOCS - افتح في مكون إضافي لتبويب جديد

يضيف هذا البرنامج المساعد رمز JS لفتح الروابط الصادرة و PDFs في علامة تبويب جديدة.

يعد الانفتاح التلقائي للروابط في علامة تبويب جديدة ميزة شائعة لمواقع الويب الحديثة. إنها أيضًا ممارسة جيدة لإمكانية الوصول. ومع ذلك ، فإنه ليس سلوكًا افتراضيًا للتخفيض. يضيف هذا البرنامج المساعد رمز JavaScript إلى موقع الويب الخاص بك يفتح الروابط الخارجية و PDFs في علامة تبويب جديدة.

انظر إلى العرض التوضيحي.

تثبيت

قم بتثبيت البرنامج المساعد باستخدام PIP من PYPI:

pip install mkdocs-open-in-new-tab

الاستخدام

أضف البرنامج المساعد إلى mkdocs.yml :

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

إعدادات

يدعم البرنامج المساعد خيار التكوين التالي:

add_icon: (افتراضي: خطأ)
- إذا تم ضبطه على TRUE ، فسيقوم المكون الإضافي بإضافة رمز بجوار الروابط الخارجية.

الاختبار

رابط إلى Google و Github. يجب أن تفتح كلا الروابط في علامة تبويب جديدة.

يجب فتح الرابط النسبي للرابط النسبي في نفس علامة التبويب.

يجب فتح عينة رابط PDF إلى PDF في علامة تبويب جديدة (PDF من هنا).

كيف تعمل؟

يضيف المكون الإضافي رمز JavaScript إلى موقع الويب الخاص بك يفتح الروابط الخارجية و PDFs في علامة تبويب جديدة. يتم حقن الرمز باستخدام خطاف on_page_context . يتم حقن الكود في قسم <head> من الصفحة كـ <script> اعتماد ملف open_in_new_tab.js . تتم إضافة الرمز تلقائيًا إلى جميع صفحات موقع الويب الخاص بك.

تتحقق الدالة external_new_window إذا كان الرابط خارجيًا باستخدام خاصية hostname للعنصر a إذا كان الرابط خارجيًا ، فسيتم تعيين السمة target على _blank ويتم تعيين سمة rel على noopener . يتم استخدام سمة noopener لمنع علامة التبويب الجديدة من الوصول إلى window.opener Property وتضمن ألا تتمكن الصفحة الأصلية من الوصول إلى علامة التبويب الجديدة.

يتم استخدام نفس الطريقة لفتح روابط 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: صحيح)

 /*
 * 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 ;
}