การนาวิเกตไซต์

ลำดับชั้นของไซต์จะเก็บอยู่ในไฟล์ structure.json ที่เชื่อมโยงกับไซต์นี้ ระบบจะโหลดลำดับชั้นเข้าสู่หน่วยความจำ และกำหนดให้ใช้งานได้ในคอนเท็กซ์ของเพจเป็นออบเจกต์ SCS.structureMap

ตัวสร้างไซต์จะอ่านไฟล์ structure.json เพื่อแสดงโครงสร้างไซต์ในตัวสร้างไซต์ ไฟล์ structure.json จะมีรหัสสำหรับเพจของไซต์ ตัวอย่างเช่น:

"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 ของการนาวิเกตภายในเพจของไซต์ เพื่อให้สามารถอ่านโครงสร้างดังกล่าวและแสดงลิงค์การนาวิเกตสำหรับไซต์นั้น เทมเพลทที่มาพร้อมกับ Oracle Content Management จะมีตัวอย่างไฟล์ JavaScript ของการนาวิเกต ซึ่งแสดงวิธีการทำงานนี้

ไฟล์ topnav.js ที่ใช้ในธีมบางส่วนซึ่งมาพร้อมกับ Oracle Content Management เป็นตัวอย่างของการใช้ออบเจกต์ SCS.structureMap พร้อมกับการเรียก "API การแสดงผล" เช่น SCSRenderAPI.getPageLinkData เพื่อผ่านเข้าสู่โครงสร้างของไซต์ และแสดงมาร์คอัป HTML ที่ต้องใช้ในการแสดงผลเมนูการนาวิเกตในเพจ ต่อไปนี้เป็นรหัสจากตัวอย่างไฟล์ 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();
                        }
                }
        );
}

คุณสามารถใช้การเรียก "API การแสดงผล" เพื่อสร้างลิงค์การนาวิเกต ซึ่งจะทำงานในโหมดแก้ไขและโหมดแสดงตัวอย่างของไซต์ และในไซต์ออนไลน์ที่เผยแพร่ โปรดดู ข้อมูลอ้างอิง API การแสดงผล

ขอแนะนำให้ใส่ข้อมูลการนาวิเกตในไฟล์ JavaScript เดียว เช่น topnav.js ไฟล์ JavaScript มักจะเก็บอยู่ในโฟลเดอร์ /assets/js/ ของธีม ดังที่คุณจะเห็นในธีมตัวอย่างที่มาพร้อมกับ Oracle Content Management