ลำดับชั้นของไซต์จะเก็บอยู่ในไฟล์ 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