透過WCM配置實現資訊、內容展現，一共需要經過7個步驟。WCM的配置過程較為複雜，而且極易出錯，必須每一步都嚴格按照以下內容操作。

第4步：建立選單元件

選單元件是顯示的核心，用於顯示Portlet欄目裡的新聞條目列表或滾動新聞，點選條目時彈出新聞的明細頁面。

建立選單元件及授權的過程如下。

名稱： menu_yantai_companyNews ——公司新聞元件，如圖 1- 11所示。

圖 1- 11 建立名稱為“ menu_yantai_companyNews ”的選單元件

指定選單的各項屬性，指向到需要展示的站點區域下，如圖1-12所示。

圖 1-1 2 指定選單設計屬性

編寫 “每個選單搜尋結果的設計”程式碼，參考程式碼如圖 1-13 所示。

圖 1- 13 編寫“每個選單搜尋結果的設計”程式碼

針對參與者，單擊後面的“授予參與者訪問權”連結，授予選單的訪問許可權，如圖1-14所示。

圖 1- 14 授予選單的訪問許可權

選單就是欄目裡資訊條目的展現方式，可以靈活設計，下面介紹幾種選單型別供參考。

選單型別 1 ：普通文字新聞（公司新聞）的選單元件

普通文字新聞的選單元件指的是每個欄目顯示該站點區域下的前 8 條資訊，點選資訊條目時彈出資訊明細頁面，當該站點區域下有超過 8 條的資訊時，顯示“更多”按鈕，單擊“更多”按鈕，則彈出帶分頁功能的全部資訊條目頁面。選單由 3 個元素組成：頁首、每個選單結果、頁尾。

頁首程式碼如下：

function _company_NewsMove(obj){

var companyNewsContainerWidth = document.getElementById("companyNews"). style.width;

var companyNewsWidth = companyNewsContainerWidth.substring(0,companyNews - ContainerWidth.length-2);

obj.className = "companyLiMover";

obj.style.width = (companyNewsWidth - 18) +"px";

}

function _company_NewsOut(obj){

obj.className = "";

}

</script>

<span>

var.getElementById("wanhuaLanguageName").value;

if(lang == "zh"){

document.write(" 公司新聞 ");

}else if(lang == "hu"){

document.write("Cégcsoport Hírek");

}else{

document.write("Company news");

}

</script>

</a>

</span>

[Component id="2e974037-49f3-4aa0-9ab1-a7cc0e87205c:NC93YW5odWEvd2FuaHVh - X2xpbmtfYmVpamluZ2tlanVfY29tcGFueW5ld3M=" name="wanhua/wanhua_link_beijingkeju_ companynews"]

[Component id="460f9529-8994-4983-9441-ca79a4edf065:NC93YW5odWEvd2FuaHVh - X 2xpbmtfY2hlbmdiYW9zaGFuZ19jb21wYW55bmV3cw==" name="wanhua/wanhua_link_chengbaoshang_ companynews"]

[Component id="ea560d65-651c-44ee-8373-ab5ef9fb3e71:NC93YW5odWEvd2FuaHVh - X2xpbmtfamlhbmxpX2NvbXBhbnluZXdz" name="wanhua/wanhua_link_jianli_companynews"]

[Component id="34d4d805-ab28-4916-af67-d0ea13bc6d4e:NC93YW5odWEvd2FuaHVh - X2xpbmtfeWFudGFpZ29uZ3lleXVhbl9jb21wYW55bmV3cw==" name="wanhua/wanhua_link_yantaigongyeyuan_companynews"]

[Component id="31da860f-2f02-49d7-b477-bde849515aa0:NC93YW5odWEvd2FuaHVh - X2xpbmtfZ3Vhbmdkb25ncm9uZ3dlaV9jb21wYW55bmV3cw==" name="wanhua/wanhua_link_guangdongrongwei_companynews"]

[Component id="3b2520f8-4e3a-4392-951c-141f2e740ae4:NC93YW5odWEvd2FuaHVh - X2xpbmtfd2FuaHVhZ3VvamlfY29tcGFueW5ld3M=" name="wanhua/wanhua_link_wanhuaguoji_companynews"]

[Component id="b1502461-dd21-4c 1- ae70-de7c498ef764:NC93YW5odWEvd2FuaHVh - X2xpbmtfd2FuaHVhamllbmVuZ19jb21wYW55bmV3cw==" name="wanhua/wanhua_link_wanhuajieneng_companynews"]

[Component id="7ca359a5-1ca5-4968-99b2-c45e76281416:NC93YW5odWEvd2FuaHVh - X2xpbmtfbmluZ2Jvcm9uZ3dlaV9jb21wYW55bmV3cw==" name="wanhua/wanhua_link_ningborongwei_companynews"]

[Component id="1be07e75-252d-4986-a3d6-c767c593dda1:NC93YW5odWEvd2FuaHVh - X2xpbmtfbmluZ2Jvd2FuaHVhX2NvbXBhbnluZXdz" name="wanhua/wanhua_link_ningbowanhua_companynews"]

[Component id="ad779aa4-d529-41a6-add4-624a592b7228:NC93YW5odWEvd2FuaHVh - X2xpbmtfc2hhbnhpemhvbmdxaWFuZ19jb21wYW55bmV3cw==" name="wanhua/wanhua_link_shanxizhongqiang_companynews"]

[Component id="100ffaca-ac68-4613-9df8-ee8566c0e24b:NC93YW5odWEvd2FuaHVh - X2xpbmtfYmNfY29tcGFueW5ld3M=" name="wanhua/wanhua_link_bc_companynews"]

[Component id="4450f966-4cc7-4ad9-ab0f-e1e30dbb70fb:NC93YW5odWEvd2FuaHVh - X2xpbmtfd2FuaHVhYmFueWVfY29tcGFueW5ld3M=" name="wanhua/wanhua_link_wanhuabanye_companynews"]

[Component id="ef7df3a6-6ee5-4d28-81fe-4defcd44aee1:NC93YW5odWEvd2FuaHVh - X2xpbmtfd2FuaHVhbWF0b3VfY29tcGFueW5ld3M=" name="wanhua/wanhua_link_wanhuamatou_companynews"]

[Component id="f2080b98-8778-4d09-ab78-2688b66ab4ae:NC93YW5odWEvd2FuaHVh - X2xpbmtfd2FuaHVhcmVkaWFuX2NvbXBhbnluZXdz" name="wanhua/wanhua_link_wanhuaredian_companynews"]

[Component id="c937678b-d061-4100-bc97-f076693431fa:NC93YW5odWEvd2FuaHVh - X2xpbmtfd2FuaHVhc2hpeWVfY29tcGFueW5ld3M=" name="wanhua/wanhua_link_wanhuashiye_companynews"]

[Component id="d31d4028-a1ad-4a5a-bba2-ce01eb2f7488:NC93YW5odWEvd2FuaHVh - X2xpbmtfeWFudGFpX2NvbXBhbnluZXdz" name="wanhua/wanhua_link_yantai_companynews"]

</div>

</span>

var newLinkCssContent = document.getElementById("newLinkCss").innerHTML;

newLinkCssContent = newLinkCssContent.replace(/\s/g,"");

if(newLinkCssContent == ""){

document.getElementById("companyLink").style.display = "none";

}

</script>

</div>

< div style="margin:1px 0px;width:100%;"><hr/> </div>

<div>

<ul>

var comp_i = 0;

</script>

每個選單結果的程式碼如下：

if(comp_i == 0){

document.getElementById("comHref").href = '[Placeholder tag="href"]';

}

comp_i++;

</script>

<span>[[Property context="autofill" type= "content" format="yyyy-MM-dd" field="publishdate"]]</span>

<span>

d ocument.write(companyWidthCheck('[Element context="autofill"type=" content"key="news_title"]',45));

</script>

</span>

</a>

</li>

頁尾程式碼如下：

</ul>

</div>

選單型別 2 ：滾動圖片新聞的選單元件

滾動圖片新聞的選單元件指的是每個條目的新聞都有一個名為 “ TitleImage ”的圖片，所有條目的圖片滾動顯示，點選圖片時彈出新的頁面，用來顯示該條目對應的資訊詳細內容。

頁首程式碼如下：

function _company_NewsMove(obj){

var companyNewsContainerWidth = document.getElementById("companyNews"). style.width;

var companyNewsWidth = companyNewsContainerWidth.substring(0,company - NewsContainerWidth.length-2);