Navigation de site

La hiérarchie d'un site est stockée dans le fichier structure.json associé au site. Elle est chargée dans la mémoire et accessible dans le contexte de page en tant qu'objet SCS.structureMap.

Le générateur de site lit le fichier structure.json pour représenter l'arborescence de site dans le générateur de site. Le fichier structure.json contiendra le code des pages de site. Par exemple :

"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
     }

Le code JavaScript de navigation est nécessaire dans les pages de site pour permettre également de lire la structure et de représenter les liens de navigation du site. Les modèles fournis avec Oracle Content Management comprennent des exemples de fichier JavaScript de navigation qui en illustrent le fonctionnement.

Le fichier topnav.js utilisé dans certains thèmes fournis avec Oracle Content Management est un exemple d'utilisation de l'objet SCS.structureMap avec des appels d'API d'affichage tels que SCSRenderAPI.getPageLinkData pour parcourir la structure de site et représenter le balisage HTML nécessaire à l'affichage des menus de navigation sur la page. Voici le code du fichier d'exemple topnav.js :

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();
                        }
                }
        );
}

Vous pouvez utiliser les appels d'API d'affichage pour générer des liens de navigation qui fonctionneront sur votre site en mode de modification et en mode d'aperçu, ainsi que sur un site en ligne publié. Reportez-vous à Référence d'API d'affichage.

Il est recommandé de rassembler les informations de navigation dans un fichier JavaScript, tel que topnav.js. Le fichier JavaScript est généralement stocké dans le dossier /assets/js/ du thème, comme vous pouvez le constater dans les exemples de thème fournis avec Oracle Content Management.