TRS WCM V6.0 模板制作

www.trs.com.cn

TRS WCM V6.0模板制作

北京拓尔思信息技术股份有限公司

www.trs.com.cn

内容提要

• 一、 TRSWCM 概述、模板的作用概述• 二、 TRSWCM 模板置标• 三、 WCM 内模板管理和模板编辑方法• 四、 Dreamweaver 模板编辑插件和模板

制作方法• 五、常见应用示例模板代码

www.trs.com.cn

第一章：概述 WCM 及模板

www.trs.com.cn

WCM 工作原理

R

网站管理、维护人员通过浏览器访问内容管理平台，进行系统和数据的管理

内容协作平台服务器(WCM)

数据库服务器，比如Oracle ， SQLServer等存储网站数据。

数据存储过程

数据发布过程

发布出静态网页

Web Server 网站的最终用户

www.trs.com.cn

网站建设流程

1 ，创建站点1 ，创建站点

33 ，创建模板，创建模板 (( 包括概览模包括概览模板、细览模板），并使用板、细览模板），并使用到频道上到频道上

33 ，创建模板，创建模板 (( 包括概览模包括概览模板、细览模板），并使用板、细览模板），并使用到频道上到频道上

创建频道2 ，创建频道（多层频道树）

4 ，网站数据采集、编审4 ，网站数据采集、编审

5 ，网站发布

站点结构规划

站点结构规划

内容；风格；栏目；页面；

Web Content Management ， WCM

www.trs.com.cn

模板

• 模板的作用– 负责页面的显示风格和显示内容

• 模板的组成– 模板由 HTML 置标和 TRS 置标组成。（含有 TRS 置

标的 HTML 文件）– HTML 决定页面风格； TRS 置标决定页面显示内容；

• 模板的类型– 概览模板：主页模板和各栏目的概览模板– 细览模板：各栏目的细览模板– 嵌套模板：可嵌套的通用模板

www.trs.com.cn

模板发布原理－数据＋模板

单篇发布

频道发布

www.trs.com.cn

模板和页面频道文档列表

www.trs.com.cn

频道数据、模板、页面的关系

频道

频道

频道

频道

频道

频道

频道

模板

访问用户

Html 页

发布

www.trs.com.cn

第二章： TRSWCM 模板置标

www.trs.com.cn

置标种类• TRS_DOCUMENTS: 文档列表• TRS_RELNEWS: 相关新闻列表• TRS_CHANNELS: 频道列表 • TRS_RECORD ：分组显示

TRS_DOCUMENT: 文档详细信息（标题、作者、正文、图片…） TRS_CHANNEL: 频道详细信息 TRS_APPENDIX: 文档附件 TRS_CURPAGE: 当前位置 TRS_REPLACE: 替换内容 TRS_DATETIME: 发布时间

TRS_TEMPLATE ：嵌套模板

概览置标

细览置标

www.trs.com.cn

• TRS_ROLLDOCUMENTS ：滚动新闻列表• TRS_NEWICON ：显示最新新闻标志• TRS_CONDDITION ：条件置标• TRS_ECHO ：在当前置标位置输出指定内容• TRS_VARIABLE ：变量声明• TRS_ENUM ：声明变量枚举值特殊应用置标

www.trs.com.cn

频道列表：

每个频道，都需配置概览和细览模板才允许被发布。

www.trs.com.cn

TRS 置标说明TRS 置标说明

置标的主要作用是控制数据在模板中的表现形式，将数据与表现分开。主要思路是 TRS 置标处理数据的内容，存放的位置以及如何存放等，数据的表现形式则由标准的 html 语言描述，例如： <FONT COLOR=RED> <TRS_DOCUMENT FIELD=”DOCTITLE”> 这里放置文档标题 </TRS_DOCUMENT> </FONT> 其中：红色是 TRS 置标，蓝色部分是标准的 HTML 置标。 TRS 置标表明要在该位置放置字段名为“标题”的字段内容。

www.trs.com.cn

第三章：模板管理和编辑

www.trs.com.cn

WCM 内模板管理

选站点或栏目

选模板分类

模板列表，可分类显示模板操作

配置模板。

需发布的站点、栏目必须配置模板和存放位置

www.trs.com.cn

新建模板输入名称，

选择类型（必须）

利用置标向导生成置标代码，粘帖到鼠标位置

www.trs.com.cn

导出、导入模板

导出成 ZIP文件。将模板 html 文件、图片、 js 等同步导出。

支持导入 html、 zip等格式。如模板中有图片需要导入，需将模板html 文件和图片 css 等文件夹一起打包成 zip 文件，然后导入。

www.trs.com.cn

模板校验语法错误（ 1 ）

模板保存时， WCM将自动校验置标书写语法，如有错误，将显示提示。

www.trs.com.cn

模板校验语法错误（ 2 ）

在模板列表界面，可批量校验选中的模板

www.trs.com.cn

同步模板附件

• 模板图片存放在 WCM 服务器目录 /wcmdata/template/里面。当站点或栏目预览或发布后，模板图片、 js 文件、 css 文件等将自动分发到 /wcmdata/preview 或 /wcmdata/pub/ 下面。

• 同步模板附件，由手工确保这种附件的分发。

www.trs.com.cn

模板配置到栏目• 选择栏目后，可以在栏目信息页面直接配置。

www.trs.com.cn

第四章： Dreamweaver 模板插件、模板制作

www.trs.com.cn

插件登录 WCM• 登录用户：同登录 WCM 的用户和密码• 服务器地址：

http://192.9.200.200:8080/wcm/services/trs:templateservicefacade

注意：需要将其中的 192.9.200.200:8080/wcm 替换成实际使用的WCM 访问地址

点此按钮，进行离线编辑

www.trs.com.cn

制作模板过程

1, 设置本地站点和 WCM 站点对应关系

2, 创建、编辑模板

3, 上传模板

www.trs.com.cn

第五章：常见应用示例模板

www.trs.com.cn

图片新闻 - 图片切换显示

<table>

<script language='JavaScript'> var imgUrl=new Array(); var imgLink=new Array(); var imgTz=new Array(); var adNum=0; var kk = 1;var filepath_liucp=""; <TRS_DOCUMENTS NUM="5" ID=" 图片 "> filepath_liucp='<TRS_recpath></trs_recpath>'; filepath_liucp = filepath_liucp.substring(0,filepath_liucp.lastIndexOf("/")+1); imgUrl[kk] =filepath_liucp + '<TRS_APPENDIX INDEX="0" MODE="PIC" FIELD="APPFILE"></TRS_APPENDIX>'; imgLink[kk] = '<trs_recpath></trs_recpath>';

imgTz[kk] = '<a href="<TRS_recpath></trs_recpath>" target="_blank"><font color=#CC0000><TRS_DOCUMENT AUTOLINK="false" FIELD="doctitle" NUM="42"></TRS_DOCUMENT></font></a>';

kk++; </TRS_DOCUMENTS> kk--; var imgPre=new Array(); var j=0; for (i=1;i<=5;i++) {

if( (imgUrl[i]!="") && (imgLink[i]!="") ) { j++; } else { break; }

}

function playTran(){ if (document.all) imgInit.filters.revealTrans.play(); }

• 替换其中置标的频道名称即可： <TRS_DOCUMENTS NUM="5" ID=" 图片 ">

www.trs.com.cn

var key=0; function nextAd(){ if(adNum<j)adNum++ ;

else adNum=1;

if( key==0 ){ key=1; } else if (document.all){

imgInit.filters.revealTrans.Transition=6;/*transition : 可选项。整数值 (Integer) 。设置或检索转换所使用的方式。

0 : 矩形收缩转换。 1 : 矩形扩张转换。 2 : 圆形收缩转换。 3 : 圆形扩张转换。 4 : 向上擦除。

5 : 向下擦除。 6 : 向右擦除。 7 : 向左擦除。

8 : 纵向百叶窗转换。 9 : 横向百叶窗转换。 10 : 国际象棋棋盘横向转换。

11 : 国际象棋棋盘纵向转换。 12 : 随机杂点干扰转换。 13 : 左右关门效果转换。 14 : 左右开门效果转换。 15 : 上下关门效果转换。 16 : 上下开门效果转换。 17 : 从右上角到左下角的锯齿边覆盖效果转换。 18 : 从右下角到左上角的锯齿边覆盖效果转换。 19 : 从左上角到右下角的锯齿边覆盖效果转换。 20 : 从左下角到右上角的锯齿边覆盖效果转换。 21 : 随机横线条转换。 22 : 随机竖线条转换。 23 : 随机使用上面可能的值转换。*/

imgInit.filters.revealTrans.apply();playTran();}

document.images.imgInit.src=imgUrl[adNum]; document.getElementById('tpxw').innerHTML='<a href="' + imgLink[adNum] + '" target="_blank">' + imgTz[adNum] + '</a>';

theTimer=setTimeout("nextAd()", 6000); // 转换间隔时间 }


www.trs.com.cn

function goUrl(){ jumpUrl=imgLink[adNum]; jumpTarget='_blank'; if (jumpUrl != ''){ if (jumpTarget != '')

window.open(jumpUrl,jumpTarget); else

location.href=jumpUrl; } }

</script><tr class="14txt22"> <td bgcolor="#F0F0E8"><a href="javascript:goUrl()"><img style='FILTER:

revealTrans(duration=2,transition=1)' src='javascript:nextAd()' border='0' width='243' height='168' class='img01' name='imgInit'></a></td>

</tr><tr><td class="14txt22"><center><font color="#CC0000"><span

id='tpxw'> 标题 </span></font></center></td></tr></table>


www.trs.com.cn

• 代码：

内容显示：<TRS_DOCUMENTS NUM="500" PAGESIZE="4" AUTOMORE="FALSE"> <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0"> <tr> <td>·<TRS_DOCUMENT FIELD="DOCTITLE" EXTRA="class='10ptb'" TARGET="_blank"> 标题放于此处

</TRS_DOCUMENT><font style='color:#ADADAD'>[<TRS_DOCUMENT FIELD="DOCRELTIME" EXTRA="class='10ptb' style='color:#ADADAD'" DATEFORMAT="yyyy/MM/dd"> 标题放于此处 </TRS_DOCUMENT>]</font></td>

</tr> </table>

</TRS_DOCUMENTS> 

分页脚本 script ：<SCRIPT LANGUAGE="JavaScript">//createPageHTML(${PAGE_COUNT}, ${PAGE_INDEX}, "${PAGE_NAME}", "${PAGE_EXT}");var currentPage = ${PAGE_INDEX};// 所在页从0 开始//var headPage = "${PAGE_NAME}"+"."+"${PAGE_EXT}";//首页//var tailPage = "${PAGE_NAME}_" + (countPage-1) + ".${PAGE_EXT}"//尾页var prevPage = currentPage-1//上一页var nextPage = currentPage+1// 下一页var countPage = ${PAGE_COUNT}//共多少页

document.write(" 共 "+countPage+" 页 ");// 设置上一页代码if(countPage>1&&currentPage!=0&&currentPage!=1)

document.write("<a href=\"${PAGE_NAME}.${PAGE_EXT}\">首页 </a> <a href=\"${PAGE_NAME}"+"_" + prevPage + "."+"${PAGE_EXT}\">上一页 </a> ");

else if(countPage>1&&currentPage!=0&&currentPage==1)document.write("<a href=\"${PAGE_NAME}.${PAGE_EXT}\">首页 </a> <a href=\"${PAGE_NAME}.${PAGE_EXT}\">上一页 </a> ");

elsedocument.write("首页上一页 ");

概览分页

www.trs.com.cn

//循环var num = 5;for(var i=0+(currentPage-1-(currentPage-1)%num) ; i<=(num+(currentPage-1-(currentPage-1)%num))&&(i<countPage) ; i++)

{if(currentPage==i)

document.write((i+1)+" ");else if(i==0){

document.write("<a href=\"${PAGE_NAME}"+"."+"${PAGE_EXT}\">"+1+"</a> ");}else

document.write("<a href=\"${PAGE_NAME}"+"_" + i + "."+"${PAGE_EXT}\">"+(i+1)+"</a> ");

}

// 设置下一页代码 if(countPage>1&&currentPage!=(countPage-1))

document.write("<a href=\"${PAGE_NAME}"+"_" + nextPage + "."+"${PAGE_EXT}\"> 下一页 </a> <a href=\"${PAGE_NAME}_" + (countPage-1) + ".${PAGE_EXT}\">尾页 </a> ");

elsedocument.write(" 下一页尾页 ");

//跳转页面document.write("<font class='9ptb'> 转到第<input type='text' id='num' value="+(currentPage+1)+" style='width:30px'>

页 "+ " <input type='submit' value=' 提交 ' onClick=javacript:toPage()></font>");

function toPage(){var _num = document.getElementById("num").value;var str = "${PAGE_NAME}"+"_"+(_num-1)+"."+"${PAGE_EXT}";var url = location.href.substring(0,location.href.lastIndexOf("/")+1);if(_num<=1||_num==null)

location.href = url+"${PAGE_NAME}"+"."+"${PAGE_EXT}";else if(_num>countPage)

alert("本频道最多 "+countPage+" 页 ");else

location.href = url+str;}</SCRIPT>

概览分页

www.trs.com.cn

文章内容分页

• 文章内容分页需要两处设置：– 1 ，采编文章时，在需要分页处插入分页符– 2 ，细览模板中写入分页代码

www.trs.com.cn

文章内容分页

• 将以下代码拷贝到细览模板的需要放置分页页码处：<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

TRS WCM V6.0 模板制作

Documents