Navegación del sitio

La jerarquía de un sitio se almacena en el archivo structure.json asociado al sitio. La jerarquía se guarda en la memoria y está disponible en el contexto de la página como el objeto SCS.structureMap.

El creador de sitios lee el archivo structure.json para dibujar el árbol del sitio en el creador de sitios. El archivo structure.json contendrá el código de las páginas del sitio. Por ejemplo:

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

El código JavaScript de navegación también es necesario en las páginas del sitio para leer esa estructura y definir los enlaces de navegación para el sitio. Las plantillas que se proporcionan con Oracle Content Management incluyen archivos JavaScript de navegación de ejemplo que ilustran cómo funciona.

El archivo topnav.js que se utiliza en algunos de los temas que se proporcionan con Oracle Content Management es un ejemplo de cómo se puede utilizar el objeto SCS.structureMap junto con las llamadas a la API de representación, como SCSRenderAPI.getPageLinkData, para recorrer la estructura del sitio y definir el marcador HTML necesario para representar los menús de navegación en la página. A continuación se muestra código del archivo de ejemplo 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();
                        }
                }
        );
}

Puede utilizar las llamadas a la API de representación para generar enlaces de navegación que funcionarán en los modos de edición y vista previa de su sitio y en un sitio en línea publicado. Consulte Referencia de API de representación.

Se recomienda colocar la información de navegación en un archivo JavaScript, como topnav.js. El archivo JavaScript se almacena normalmente en la carpeta /assets/js/ del tema, como puede ver en los temas de ejemplo que se proporcionan con Oracle Content Management.