使用IBM WCM配置信息发布的操作步骤（下篇）-CSDN博客

通过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);