Converti automaticamente i link con il loro titolo

Tutorial Converti automaticamente i link con il loro titolo

Messaggio Da Niko Dom 17 Gen 2021 - 16:47

Converti automaticamente i link con il loro titolo


Definizione

Con questo tutorial, otterremo che invece di mostrare il collegamento di un argomento quando è inserito, verrà visualizzato il suo titolo, migliorando la leggibilità ma mantenendo il link :bene:

Quando pubblichiamo un argomento che contiene collegamenti andremo a vedere questo:
Converti automaticamente i link con il loro titolo Ej110

Con questo tutorial invece arriveremo ad avere questo:
Converti automaticamente i link con il loro titolo Ej210

Installazione

Non dobbiamo fare altro che andare verso Pannello di amministrazione ► Modul ► HTML& & Javascript ► Gestione del codice javascript, assicurarci che la gestione del codice javascript sia attiva e crearne uno nuovo con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    // ZONA MODIFICABILE
    const VERSION = "phpBB3";
    const ENABLE_CACHE = true;
    const NO_PERMS_MSG = "Non hai i permessi per leggere questo argomento";
    // FIN ZONA EDITABLE

    const FORUM_URL = window.location.origin;
    const NO_PERMS_TITLE = "Informazioni";
    const regex = new RegExp(`<a href="(?:${FORUM_URL})?\/t[0-9]-*(?:.*?)">(?:${FORUM_URL})?\/t[0-9]-*(?:.*?)<\/a>`, 'g');
    const regexGroups = new RegExp(`<a href="((?:${FORUM_URL})?\/t[0-9]-*(?:.*?))">((?:${FORUM_URL})?\/t[0-9]-*(?:.*?))<\/a>`);
    const cache = new Map((ENABLE_CACHE && sessionStorage.posttitles) ? JSON.parse(sessionStorage.posttitles) : "");

    $.ajaxPrefilter((options, originalOptions, jqXHR) arrow {
        if (options.cache) {
            const success = originalOptions.success || $.noop,
                url = originalOptions.url;
            options.cache = false;
            options.beforeSend = () arrow {
                if (cache.has(url)) {
                    success(cache.get(url));
                    return false;
                }
                return true;
            };
            options.success = (data, textStatus) arrow {
                const title = /<title>(.*?)<\/title>/.exec(data)[1];
                cache.set(url, title);
                sessionStorage.posttitles = JSON.stringify([...cache]);
                success(title);
            };
        }
    });

    document.addEventListener("DOMContentLoaded", () arrow {
        const posts = document.querySelectorAll(selector(VERSION));
        for (const post of posts) {
            const matches = post.innerHTML.match(regex);
            if (matches === null) continue;
            for (const match of matches) {
                const parts = regexGroups.exec(match);
                const url = parts[1];
                $.ajax({
                    url: url,
                    async: true,
                    cache: ENABLE_CACHE,
                    success: (title) arrow {
                        if (title === _lang.Login || title === NO_PERMS_TITLE) {
                            title = NO_PERMS_MSG;
                        }
                        post.innerHTML = post.innerHTML.replace(parts[0], `<a href=${url}>${title}</a>`);
                    }
                });
            }
        }
    });

    function selector(version) {
        switch (version.toLowerCase()) {
            case "phpbb3":
            case "modernbb":
                return ".postbody > .content > div";
            case "phpbb2":
                return ".postbody > div";
            case "punbb":
                return ".entry-content > div > div";
            case "invision":
                return ".post-entry > div";
            case "awesomebb":
                return ".post-content";
            default:
                throw "REPLACE POST URLs: " + version + " non è una versione valida";
        }
    }



Personalizzazione

valori da personalizzare sono i seguenti:

  • VERSION: versione forum (il codice funziona per tutte le versioni: phpBB2, phpBB3, punBB, Invision, ModernBB e AwesomeBB).
  • ENABLE_CACHE : si consiglia di mantenere questo parametro su true per migliorare le prestazioni del codice.
  • NO_PERMS_MSG : titolo mostrato quando un utente / ospite non ha il permesso di accedere a un argomento.


Una volta installato il codice, possiamo andare su un argomento che contiene collegamenti ad altri argomenti e verificare che funzioni! :good:


Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 28
Messaggi : 9573
Località : Provincia di Varese

https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.