AwesomeBB - Aggiungere link al menu di navigazione

Da **Niko** Gio 11 Feb 2021 - 11:22

AwesomeBB - Aggiungere link al menu di navigazione

Introduzione

Il tutorial permette di inserire link aggiuntivi al menu di navigazione.
 Per le altre versioni (phpBB2, phpBB3, Invision, PunBB, ModernBB) la funzione è integrata nei forum Forumattivo (Pannello di amministrazione ► Visualizzazione ► Header & Navigazione)

menu - AwesomeBB - Aggiungere link al menu di navigazione Immagi12

Il codice Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione sia attivata e creiamo un nuovo codice con queste impostazioni:

Titolo: a tua scelta
Dove: in tutte le pagine (o diversamente se volete che compaia solo in alcune pagine)
Codice:
Codice:
/*globals jQuery, _board*/ (function($) { 'use strict'; var itens = [ { url: 'Link 1', // URL text: 'Titolo 1', // Name icon: 'people_outline' // Icon (Material Design) }, { url: 'Link 2', text: 'titolo2', icon: 'people_outline' }, { url: '#', text: 'Item 3', icon: 'people_outline' } // l'ultimo senza virgola separatrice ]; $(function() { if (_board.tpl_version !== 'awesomebb') return; $('#main-menu').append($('<ul>', { 'class': 'newul' })); $.each(itens, function(index, item) { if(!item.url || !item.text || !item.icon) return; $('#main-menu').find('.newul').append([ '<li>', ' <a href="' + item.url + '"><i class="material-icons">' + item.icon + '</i>' + item.text + '</a>', '</li>' ].join('\n')); }); }); }(jQuery));

Personalizzazione

All'interno del codice Javascript possiamo modificare questa parte:

Codice:: var itens = [ { url: '#', // URL text: 'Item 1', // Name icon: 'people_outline' }, { url: '#', text: 'Item 2', icon: 'people_outline' }, { url: '#', text: 'Item 3', icon: 'people_outline' } // the last has no comma ];

url : indica il link a cui venire reindirizzati al click
text : indica il titolo testuale visualizzato
icon : indica l'icona da visualizzare a lato

Una lista con tutte le icone (Material Design Icons) è disponibile a questo link: Material.Io - Lista completa icone - vi basterà copiare l'ID delle icone, per esempio 3D_rotation

menu - AwesomeBB - Aggiungere link al menu di navigazione Immagi11

Modificare i permessi

Sarà necessario duplicare il codice precedente nel caso ci siano permessi differenti, ad esempio se volete aggiungere un link visibile solo agli amministratori e uno solo ai moderatori.

Per fare questo, cerchiamo:

Codice:: if (_board.tpl_version !== 'awesomebb') return;

e subito prima aggiungiamo questa nuova riga, a seconda del permesso desiderato:

Per gli ospiti
Codice:
if (_userdata.session_logged_in) return;
Per i membri
Codice:
if (!_userdata.session_logged_in) return;
Per amministratori e moderatori
Codice:
if (_userdata.user_level !== 1 && _userdata.user_level !== 2) return;
Per i moderatori
Codice:
if (_userdata.user_level !== 2) return;
Per gli amministratori
Codice:
if (_userdata.user_level !== 1) return;