通元内容管理gpowercms6.0模板制作指南.doc

1. Gpower CMS 模板制作指南 1.1.概述 网站的表现形式为多个 html 页面，包括栏目的页面、栏目下文章的页面这些页面的来源是 企业的介绍、新闻、活动、产品、宣传的资料等不同的信息，即内容如何将企业的内容转化为 丰富多彩的 html 页面，这就是由模板实现的 1.2.模板制作步骤 模板制作过程，是在企业网站的定位、内容确定之后，并已设计好栏目之后，开始进行模板 制作，其步骤为： 1、 网页设计人员，根据企业网站的定位、结构、公司的 CI 等，进行首页栏目、二级栏目的 页面设计，这只是网站搭建的第一步； 2、 页面设计完后，由企业对网页设计的效果、风格进行评估，提出修改意见； 3、 上述第 1、2步骤反复，最后确定下网页设计； 4、 确定好企业网页的风格和效果之后，由模板制作工程师，根据网页设计的 html 页面和网 站栏目，进行模板的制作； 5、 录入内容，发布生成 html 页面，并根据需要进行部分调整、完善 1.3.模板分类 模板一共分为三类： 1、索引模板索引模板即为每个栏目首页的模板，即点击哪一栏目，出现的那个页面每个栏目可以 根据不同需要创建不同的索引模板，但大多数栏目为了体现整体风格的统一，同级栏目基本 使用同一个索引模板。

特殊情况下可以独立创建索引模板 2、文章模板 文章模板即为栏目下文章的模板，又称为记录模板，即最后文章的显示页面 3、包含模板 包含模板为被索引、文章模板所引用的模板如网站的页面头、页面左边、页面下边等 通用的，每个栏目基本一样，就可拆分为包含模板，如下图所示通过包含模板，可最大利 用模板的可重用性，也使得网站改版非常方便 1.4.模板置标 在模板制作过程中，最重要是掌握模板的置标模板标记符的功能是否完善，是设计好模板的一个重要步骤，也决定了内容管理系统的功能Gpower CMS 模板置标的功能非常强大，可实现 任意风格的页面显示，是国内同类产品功能最先进，技术最领先的模板引擎 如下是一个简单的模板文件的例子：模板示例$curArticle.name (*当前文章的标题)$curArticle.content (*当前文章的内容)下面来详细介绍如何实现页面的各种表现形式： 1、栏目列表：用于各种模板，主要是针对企业内容列出栏目的名称是各个 html 页 面相互切换的主要桥梁，利用这个置标之后，用户可以根据企业的内容需要， 随时添加、更改和删除栏目； #foreach($channel in $cms.getChildren($curChannel.ID))$channel.title #end 标题 内容其中： $curChannel.ID 指当前栏目的地址 $channel.title 指栏目的名称 2、文章列表：主要用于索引模板，主要列出文章题目或相关信息。

点击其中一条，可 以直接进入相应的文章记录页面； #foreach($article in $cms.getContents($curChannel, 10)) $article.name ($cms.format($content.publishDate))#end 其中： $curChannel 代表当前栏目 10代表取当前栏目下的前 10条新闻 $article.name 指文章的标题 $cms.format($content.publishDate) 格式化显示日期  取指定栏目的文章列表： 例如列出公司新闻栏目下的十篇文章列表，可以这样表示： #foreach($article in $cms.getContents(“公司新闻”, 10))$article.name #end 取当前栏目下的头条新闻列表： 取当前栏目下头条新闻中的 10条头条新闻题目： #foreach($article in $cms.getContents($curChannel.name, “头条新闻”, 10))$article.name #end  取指定栏目下的头条新闻列表： 取首页中头条新闻中的 10条头条新闻题目： #foreach($article in $cms.getContents(“首页”, “头条新闻”, 10))$article.name #end  显示更多列表： 如图所示，公司新闻中包括四条新闻题目，点击更多，可以看其他新闻内容，那么“更 多”则由以下置标来完成：更多…*其中$curChannel 指当前的栏目名“更多…”可以替换成相应的图片，如上图的 3、栏目路径：用于各种模板，主要体现当前栏目的所在位置；#foreach($channel in $cms.getPathChannels($curChannel)) $channel.title #end 4、文章内容：主要用于记录模板，列出文章题目或内容等相关信息； $curArticle.name $curArticle.content *仅用于记录模板 5、相关新闻：用于记录模板，是与文章内容相关的文章列表；#foreach($article in $cms.getRelatesByKeyword($curArticle, 0, 5)) $content.name($cms.format($content.publishDate))#end 其中： 在录入关键词中，多个关键词按空格隔开 0－表示范围在本栏目 1－表示在整个站点 5－表示条数 6、相关附件：用于记录模板，是与文章内容相关的内容，以表格、图片等表现；#foreach($doc in $cms.getAttachments($curArticle))$doc.srcFile#end 7、包含静态模板：用于各种模板，指模板的内容中，没有 Gpower CMS 的置标符，仅为 html 代码。

如网站页面的底部：#include(“foot.vm”) 8、包含动态模板：用于各种模板，指模板的内容中，有 Gpower CMS 的置标符，仅为html 代码 如页面左边的子栏目列表，每个一级栏目下的子栏目列表都不相同 #parse(“foot.vm”) 内容实体说明： 名称 说明$article 新闻对象 $article.name 标题 $article.source 来源 $article.summary 摘要 $article.keyword 关键词 $artcile.grade 级别 $article.content 正文 1.5.模板制作实例 下面我们延庆水资源局网站为例，来共同了解一下网站的模板是如何生成的 1.5.1. 静态 html 首先已经存在美工设计好的 html 页面，我们如何把他们转化成模板呢？ 针对延庆水资源局页面，建立好栏目之后，我们需要建立三个模板，首页索引模板、二级栏 目（如新闻快讯、综合频道、热点话题和大话论坛）的栏目索引模板、文章模板首页页面） （二级页面）（三级页面） （文章页面） 在新建模板之前，我们必须把设计好的静态页面中包含的图片和样式表，放入我们站点设置 的，图片本地存放路径下面。

1.5.2. 索引模板制作过程 点击站点管理中的模板管理，进入模板管理界面我们按照事先建好的栏目进行相应的模板 制作（新建栏目请参考 5.1.1） 模板信息包含以下几项：  名称：首页，如果是二级栏目索引就在名称中填写“二级栏目索引” ，模板名称没有特定 的要求，只是为了方便用户在栏目管理中进行选择，最好用比较好区分的名称如：首 页模板的名称为首页；  文件名：文件名为 home.vm，其中 home 是用户个人设定的，可以是任意的英文字符，不 能是其他的非法字符，但系统规定，在任意的英文字符后必须加.vm 后缀；  类型：又三种选择类型，索引、文章和记录，在新建的首页模板里，在名称中添加模板 名称首页，因为是首页模板，它属于索引模板，因此我们在类型中选择索引  模板头：把已有的静态的 html 页面用 UltraEdit、记事本等（其他可以显示静态 html 的源 代码的编辑器）打开，会出现我们我们之前看到页面的源代码，如下图：或者 把 index.html 文件用 UltraEdit 打开，或在 IE 中打开此静态的页面，选择右键查看源文 件，会得到 sample.html 的源代码。

如图所示：我们把从开始到第一个上面的这一段代码全部放到模板头里面，其中要注 意在模板头里面要改成，即把原来的相对路径改成绝对路径这样模板 头新建完成为了防止数据丢失，可以先点击一下确定在进行模板的内容添加 内容：如上图，为首页的 html 代码，我们已经说过，第一个上的代码为模板头，那么 它下面的代码为模板的内容，把从第一个（不包括）到结束，为模板的内容，把它 拷贝到模板的内容里其中，在内容中也是与模板头一样，把所有图片的相对路径也改成绝对路 径改成，因为页面中图片的地址都是相对路径，用户可以进行批量替换，替换完 毕后，点击确定 这样一个首页模板的框架基本完成，但是模板的功能还没有实现，这样我们可以通过高 级编辑器来完成，系统提供模板所见即所得的编辑功能，使用户能实现所见即所得效果 1.5.2.1. 可视化的编辑环境 打开首页模板，点击选用高级编辑器，进入高级编辑器的界面： 第一个上的代 码为模板头强大的高级编辑器，提供给用户一个可视化的模板编辑环境，不懂 html 的人也可以自己 独立完成模板的制作，模板基于浏览器的所见即所得的编辑方式，用户可以在模板编辑中完成 选用高级编辑器简单以表格的形式介绍一下每个工具的用途： 模板置标 全选 剪切 复制 粘贴 删除选择 清除样式 重做 撤销 清楚 word 标记 删除线 下标 上标 左对齐 居中对齐 右对齐 项目列表 数目列表 文本缩进 文本左缩进 文本颜色 背景颜色 水平条 超连接 上传图片 插入 flash Html 代码 插入表格 显示 0边框 插入行(上) 插入行(下) 删除行 拆分为两行 插入列(左) 插入列(右) 删除列 前插单元格 后插单元格 删除单元格 拆分为两列 合并单元格 查找替换 1.5.2.2. 方便快捷的模板置标向导 我们已经新建了首页模板，并且基本的框架已经搭建起来了，下面我们就充分利用高级编辑 器，将系统的功能完善起来。

我们自上而下，分别来完成模板置标： 首先页头的一部分，即如下图，这里需要分析一下，我们所要建的三个模板的页头是一样的， 我们利用这一特点，可以将页头作成一个包含模板，包含到几个模板之中，如下图，为页头的静 态html页面： 选择模板置标向导图标 ，即进行模板置标的选择，分析一下整个页头，我们选择模板置标 中的“子频道列表” ，因为页头上是网站首页的子频道列表就可以把相应的置标符加到频道列表 的相应位置，操作过程如下图：。