Navigazione nel sito

La gerarchia di un sito è memorizzata nel file structure.json associata al sito. La gerarchia viene caricata in memoria e resa disponibile nel contesto della pagina sotto forma di oggetto SCS.structureMap.

SiteBuilder legge il file structure.json per tracciare la struttura del sito nel proprio ambito. Il file structure.json conterrà il codice per le pagine del sito. Ad esempio:

"pages": [  {        
     "id": 100,      
     "name": "Home",                                    
     "parentId": null,             
     "pageUrl": "index.html",      
     "hideInNavigation": false,    
     "linkUrl": "",                
     "linkTarget": "",             
     "children": [ 200,            
                   300,            
                   400,            
                   500 ],          
     "overrideUrl":false           
     } 
   
     {
     "id":200,
     "name":"Products"
     "parentId":100,                
     "hideInNavigation":false,      
     "LinkUrl":"",                  
                 "linkTarget":"",               
                 "children":[ 204, 205],        
                 "overrideUrl":false            
     }                              

     {
     "id":204,
     "name":"Hiking Boots",
     "parentId":200,
                 "pageUrl":"products/hiking_boots.html",
                 "hideInNavigation":false,
                 "linkUrl":"",
     "linkTarger":"",
     "children":[],
     "overrideUrl":false
     }

Il codice JavaScript di navigazione è necessario nelle pagine del sito anche per leggere tale struttura e tracciare i collegamenti di navigazione per il sito. I modelli forniti con Oracle Content Management includono file JavaScript di navigazione di esempio che illustrano questo funzionamento.

Il file topnav.js, utilizzato in alcuni dei temi forniti con Oracle Content Management, illustra un esempio di utilizzo dell'oggetto SCS.structureMap insieme alle chiamate dell'interfaccia API di rendering, quale SCSRenderAPI.getPageLinkData, per attraversare la struttura del sito ed evidenziare il markup HTML necessario per la visualizzazione dei menu di navigazione nella pagina. Il file topnav.js di esempio contiene il codice riportato di seguito.

function renderNode(id, navBar)
{
        if (id >= 0)
        {
                var navNode = SCS.structureMap[id];
                if( navNode &&
                        (
                                ( typeof navNode.hideInNavigation != "boolean" ) ||
                                ( navNode.hideInNavigation === false )
                        ) )
                {
                        var navItem = document.createElement("li");
                        var navLink = document.createElement("a");
                        var navText = document.createTextNode(navNode.name);
                        
                        var linkData = SCSRenderAPI.getPageLinkData(navNode.id) || {};
                        if( linkData.href ) {
                                navLink.href = linkData.href;
                        }
                        if( linkData.target ) {
                                navLink.target = linkData.target;
                        }

                        navLink.appendChild(navText);
                        navItem.appendChild(navLink);

                        if (navNode.children.length > 0)
                        {
                                var navSub = document.createElement("ul");
                                
                                for (var c = 0; c < navNode.children.length; c++)
                                {
                                        renderNode(navNode.children[c], navSub);
                                }
                                
                                navItem.appendChild(navSub);
                        }
                        navBar.appendChild(navItem);
                }
        }
}

function renderNav()
{
        var topnav = document.getElementById("topnav");         // expected to be an empty <div>

        if (topnav)
        {
                var navBar = document.createElement("ul");

                renderNode(SCS.navigationRoot, navBar);

                topnav.appendChild(navBar);
        }
}

// Must wait for all our script to be ready...
if (document.addEventListener)
{
        document.addEventListener('scsrenderstart', renderNav, false); 
}
else if (document.attachEvent)
{
        document.documentElement.scsrenderstart = 0;
        document.documentElement.attachEvent("onpropertychange",
                function(event)
                {
                        if (event && (event.propertyName == "scsrenderstart"))
                        {
                                renderNav();
                        }
                }
        );
}

Le chiamate dell'interfaccia API di rendering consentono di generare i collegamenti di navigazione che funzioneranno nelle modalità Modifica e Anteprima del sito e in un sito pubblicato in linea. Vedere Informazioni di riferimento per l'interfaccia API di rendering.

Come procedura ottimale si suggerisce di inserire le informazioni di navigazione in un unico file JavaScript, ad esempio topnav.js. In genere il file JavaScript viene memorizzato nella cartella /assets/js/ del tema, come dimostrano i temi di esempio forniti con Oracle Content Management.