Sitenavigation

Die Hierarchie einer Site wird in der Datei structure.json für die Site gespeichert. Die Hierarchie wird als SCS.structureMap-Objekt in den Arbeitsspeicher geladen und im Seitenkontext verfügbar gemacht.

Sitebuilder liest die Datei structure.json, um den Sitebaum in Sitebuilder zu zeichnen. Die Datei structure.json enthält Code für die Siteseiten. Beispiel:

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

JavaScript-Navigationscode ist innerhalb der Siteseiten erforderlich, um auch diese Struktur zu lesen und die Navigationslinks für die Site zu erstellen. Zu den mit Oracle Content Management bereitgestellten Vorlagen gehören JavaScript-Beispieldateien für die Navigation, die dies veranschaulichen.

Die Datei topnav.js, die in einigen mit Oracle Content Management bereitgestellten Themes verwendet wird, dient als Beispiel dafür, wie Sie mit dem SCS.structureMap-Objekt und Render-API-Aufrufen wie SCSRenderAPI.getPageLinkData die Sitestruktur durchlaufen und das erforderliche HTML-Markup zum Rendern der Navigationsmenüs auf der Seite erstellen. Code aus der Beispieldatei 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();
                        }
                }
        );
}

Mit Aufrufen der Render-API können Sie Navigationslinks generieren, die im Bearbeitungs- und Vorschaumodus der Site sowie in einer veröffentlichten Onlinesite funktionieren. Siehe Render-API-Referenz.

Es bietet sich an, Navigationsinformationen in einer JavaScript-Datei (z.B. topnav.js) abzulegen. Die JavaScript-Datei wird normalerweise im Ordner /assets/js/ des Themes gespeichert, wie in den mit Oracle Content Management bereitgestellten Beispiel-Themes ersichtlich.