給《Laravel 中文文件》新增一個語言選擇選單

截圖

安裝

安裝 Tampermonkey

新增指令碼程式碼到 Tampermonkey，如何新增在這個程式碼後面有截圖

// ==UserScript==
// @name         快速切換 Laravel 文件語言
// @namespace    https://github.com/ycs77
// @version      1.3
// @description  安裝此外掛後，Laravel 文件中將自動出現語言切換的按鈕，可以輕鬆切換英文和中文。
// @author       Lucas Yang
// @match        https://learnku.com/docs/laravel/*
// @match        https://laravel.tw/docs/*
// @match        https://learnku.com/*
// @require      https://unpkg.com/compare-versions@3.4.0/index.js
// @license      MIT
// ==/UserScript==

;(function () {
    'use strict';

    let d = document;

    function LaravelLang(lang) {
        this.url = window.location.href;
        this.master_version = '5.9';
        this.langs = {
            en: {
                title: 'English',
                prefix: 'https://learnku.com/docs/laravel/',
                master_version: 'master',
                min_version: '4.2'
            },
            zh_tw: {
                title: '繁體中文',
                prefix: 'https://laravel.tw/docs/',
                master_version: '5.3',
                min_version: '4.2'
            },
            zh_cn: {
                title: '簡體中文',
                prefix: 'https://learnku.com/docs/laravel/',
                master_version: '5.8',
                min_version: '5.1'
            }
        };

        this.lang = lang;
        this.title = this.langs[this.lang].title;
        this.prefix = this.langs[this.lang].prefix;

        // Version
        const version = this.url.match(/(master|\d+\.\d+)/);
        if (version) {
            this.version = version[0];
        }

        // Section
        const section = this.url.match(new RegExp('(?<=' + this.version + '\\\/)[A-Za-z-]+'));
        if (section) {
            this.section = section[0];
        }
    }

    LaravelLang.prototype.getLangs = function () {
        const self = this;
        let langs = [];
        for (const lang of Object.keys(this.langs)) {
            let lang_data = self.langs[lang];
            let self_lang_data = self.langs[self.lang];
            let self_version = self.version;
            let lang_version = lang_data.master_version;
            let min_version = lang_data.min_version;
            if (self_version === 'master') {
                self_version = self_lang_data.master_version;
                if (self_version === 'master') {
                    self_version = self.master_version;
                }
            }
            if (lang_version === 'master') {
                lang_version = self.master_version;
            }
            if (
                window.compareVersions(lang_version, self_version) >= 0 &&
                window.compareVersions(min_version, self_version) <= 0
            ) {
                langs.push(lang_data);
            }
        }
        return langs;
    }

    LaravelLang.prototype.parseUrl = function (lang) {
        let version = this.version;
        if (version === 'master') {
            version = lang.master_version;
        }
        return lang.prefix + version + (this.section ? '/' + this.section : '');
    }

    LaravelLang.prototype.createBs4Dropdown = function (selector) {
        const self = this;

        let switcher = d.querySelector(selector);

        let dropdown = d.createElement('div');
        dropdown.classList.add('dropdown', 'dropdown-lang');
        dropdown.style.marginLeft = '10px';
        switcher.appendChild(dropdown);

        let btn = d.createElement('button');
        let btn_caret = d.createElement('span');
        btn.id = 'dropdownMenuLang';
        btn.classList.add('btn', 'dropdown-toggle');
        btn.setAttribute('type', 'button');
        btn.dataset.toggle = 'dropdown';
        btn.setAttribute('aria-expanded', 'false');
        btn_caret.classList.add('caret');
        btn.appendChild(document.createTextNode(this.title));
        btn.appendChild(btn_caret);
        dropdown.appendChild(btn);

        let list = d.createElement('ul');
        list.classList.add('dropdown-menu');
        list.setAttribute('role', 'menu');
        list.setAttribute('aria-labelledby', 'dropdownMenuLang');
        this.getLangs().forEach(function (lang) {
            let li = d.createElement('li');
            let a = d.createElement('a');
            li.appendChild(a);
            li.setAttribute('role', 'presentation');
            a.href = self.parseUrl(lang);
            a.setAttribute('role', 'menuitem');
            a.setAttribute('tabindex', '-1');
            a.appendChild(d.createTextNode(lang.title));
            list.appendChild(li);
        });
        dropdown.appendChild(list);
    }

    LaravelLang.prototype.createLkDropdown = function (selector, isHome) {
        const self = this;

        let oldDropdown = d.querySelector(selector);
        if (!oldDropdown) return;

        let dropdown = d.createElement('div');
        if (isHome) {
            dropdown.classList.add('ui', 'dropdown', 'simple', 'green', 'basic', 'label');
        } else {
            dropdown.classList.add('ui', 'dropdown', 'simple', 'basic', 'label');
        }
        dropdown.style.marginLeft = '10px';
        oldDropdown.parentNode.appendChild(dropdown);

        let text = d.createElement('div');
        let icon = d.createElement('i');
        text.classList.add('text');
        text.appendChild(d.createTextNode(this.title));
        icon.classList.add('dropdown', 'icon');
        dropdown.appendChild(text);
        dropdown.appendChild(icon);

        let list = d.createElement('div');
        list.classList.add('menu');
        this.getLangs().forEach(function (lang) {
            let a = d.createElement('a');
            a.href = self.parseUrl(lang);
            a.classList.add('item');
            a.appendChild(d.createTextNode(lang.title));
            list.appendChild(a);
        });
        dropdown.appendChild(list);

        for (let menu of dropdown.parentNode.querySelectorAll('.menu')) {
            menu.setAttribute('style', 'width: auto !important; height: auto !important;');
        }
    }

    if (location.hostname === 'laravel.com') {
        /* English */
        const lr_en = new LaravelLang('en');
        lr_en.createBs4Dropdown('.docs nav.main .switcher');

    } else if (location.hostname === 'laravel.tw') {
        /* 繁體中文 */
        const lr_zh_tw = new LaravelLang('zh_tw');
        lr_zh_tw.createBs4Dropdown('.docs nav.main .switcher');

    } else if (location.hostname === 'learnku.com') {
        /* 簡體中文 */
        const run = function () {
            if (location.href.match('https://learnku.com/docs/laravel/')) {
                const lr_zh_cn = new LaravelLang('zh_cn');
                lr_zh_cn.createLkDropdown('.book .ui.dropdown', true);
                lr_zh_cn.createLkDropdown('.book-main-column .extra-padding > h1 .ui.dropdown', false);
            }
        };

        run();
        if ($) $(document).on('pjax:end', run);
    }

})();

點選剛才安裝好的 Tampermonkey，選擇管理皮膚

點選 + 後，把那個指令碼程式碼替換到編輯器裡，按 ⌘ + S 儲存，Windows 按 Ctrl + S 儲存。

最後，開啟 《Laravel 5.8 中文文件》 就可以看到效果。