サイト・ナビゲーション

サイトの階層は、サイトに関連付けられている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ファイルが含まれています。

Oracle Content Managementで提供されるテーマの一部で使用されるtopnav.jsファイルは、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リファレンスを参照してください。

ナビゲーション情報をtopnav.jsなどの1つのJavaScriptファイルに配置することをお勧めします。 JavaScriptファイルは、通常、テーマの/assets/js/フォルダに格納されます。Oracle Content Managementで提供されるサンプル・テーマを参照してください。