TemplateTwo 建站实例.docx

TemplateTwo 建站实例.docx

《TemplateTwo 建站实例.docx》由会员分享，可在线阅读，更多相关《TemplateTwo 建站实例.docx（29页珍藏版）》请在冰豆网上搜索。

TemplateTwo建站实例

TemplateTwo建站实例之一：

创建网站文件夹结构

作者【袁海明】时间【2009-12-13】浏览【3,332】

本文主要讲述使用TemplateTwo建站实例的第一步：

创建网站文件夹结构。

1、创建站点，确定网站根目录：

关于站点的创建可以参看如何在OpenCms中创建站点一文，如果不创建站点，也可以采用子目录的形式，如系统提供的TemplateTwoDemo：

demo_en和demo_de，都是子目录形式，本专题教程采用是的站点的形式，站点路径是：

/sites/sitea/，站点名称（Title属性）为：

TemplateTwo实例站点。

2、设置网站语言为中文：

OpenCms是一个多语言、多站点的CMS，以新闻类型资源为例，一篇新闻可以存储多个语言版本的内容，默认安装下，OpenCms配置了英语和德语两种语言，我们要添加对中文的支持，请参看文章OpenCms安装后应该做什么，添加中文语言后，设置网站的语言为中文：

设置网站根目录（/sites/sitea/）locale属性为zh。

 3、创建网站文件夹结构：

在站点根目录下创建如下文件夹：

_config_：

用于保存网站配置文件，如布局、页眉/页脚等；

_info_：

用于保存网站区块配置信息，如ttlistbox列表类型文件等；

images：

类型为图片库（图片库类型创建：

New—>Extendedfolder—>Imagegallery），用于保存网站中用到的图片资源；

另外，如果网站用到了js或附加的css，同样可以创建相关的文件夹来保存。

现在网站的文件夹结构如下图：

这样，网站的文件夹结构就创建完成了，接下来的文章讲述如何为网站创建配置文件。

TemplateTwo建站实例之二：

创建网站配置文件

作者【袁海明】时间【2009-12-14】浏览【2,817】

网站文件夹结构创建之后，接下来就要为网站创建配置文件，这些配置文件决定了网站的布局、样式和页眉/页脚等。

分别在_config_目录下创建如下文件（文件内容暂不用修改）：

∙style：

ttstyle类型（TemplateTwoStyle），用于配置网站的页面宽度、导航样式、字体、颜色等，详细配置说明可查看TemplateTwoStyle类型详解；

∙config：

ttconfig类型（TemplateTwoConfiguration）：

用于设置页面的布局和区块信息，详细配置说明可查看TemplateTwoConfiguration类型详解；

∙options：

ttoptions类型（TemplateTwoOptions）：

用于设置页眉、页脚和顶部导航信息，详细配置说明可查看TemplateTwoOptions类型详解；

∙2preset：

ttpreset类型（TemplateTwoPreset）：

用于创建网站的两列布局，包括左侧导航；

∙3preset：

ttpreset类型（TemplateTwoPreset）：

用于创建网站的三列布局，不包括左侧导航，详细配置说明可查看TemplateTwoPreset类型详解；

如下图：

配置文件创建完成后，还需通过属性配置才能与网站相关联，分别设置网站根目录文件夹“/sites/sitea/”各属性如下：

∙template：

/system/modules/org.opencms.frontend.templatetwo/templates/main.jsp　设置网站模板；

∙template-elements：

/system/modules/org.opencms.frontend.templatetwo/pages/default.jsp　设置网站默认内容页模板；

∙style.config：

/_config_/config　指定网站默认页面配置文件；

∙style.layout：

/_config_/style　指定网站样式配置文件；

∙style.options：

/_config_/options　指定设置网站页眉/页脚和顶部导航配置文件；

如果网站需要用到了自定义样式的CSS，直接在网站中创建CSS文件，并设置stylesheet属性为CSS文件路径即可。

网站结构和配置文件创建完成后，之后的文章将会讲解创建网站的首页和栏目，包括导航的创建。

TemplateTwo建站实例之三：

创建网站首页

作者【袁海明】时间【2009-12-15】浏览【3,224】

本文主要讲述了首页文件的创建和内容编辑，同时为网站添加页眉/页脚和导航信息。

1、创建首页文件：

确定当前目录是网站根目录，新建首页文件index.html，类型为ttarticle（TemplateTwoArticle），Title属性为“TemplateTwo测试站点”，如下图：

图1（创建首页文件）

在工作区单点击首页文件名”index.html“，浏览首页效果如下图：

图2（浏览没有任何内容的首页）

此时首页没有任何内容，也没有页眉、页脚的信息。

2、添加页眉/页脚信息：

在之前的文章中，我们已经创建了页眉/页脚配置文件”options“，但还没有设置任何内容，到这一步，我们要为页眉/页脚文件添加内容，进入到_config_目录下，在”options“文件名上点击右键或是单击文件名前面的小图标，打开弹出菜单，选择”Edit“，打开编辑窗口，编辑内容如下图：

图3（编辑页眉/页脚和顶部导航信息）

3、为首页添加内容：

编辑index.html，为首页添加内容，如下图：

图4（编辑首页内容）

浏览首页，效果如下图：

图5（浏览首页文件，包含页眉/页脚、顶部导航，且首页本身也添加了内容）

此时的首页已经有了内容，并且也看到了刚刚编辑的页眉/页脚和顶部导航信息，下一篇文章中，我们要进一步的完善首页内容。

TemplateTwo建站实例之四：

网站首页完善

作者【袁海明】时间【2009-12-16】浏览【2,259】

本文主要讲述首页内容的完善：

设置首页为三列布局，并为左右两列分别添加文本区块信息，具体步骤如下：

1、创建文本区块文件：

进入_info_目录，新建文件text_locale，类型为tttextbox（TemplateTwoTextbox），内容暂时不用编辑，如下图：

图1（新建text_locale文件）

2、设置首页为三列布局：

首先要配置三列布局文件，编辑_config_目录下的3preset文件，编辑后的内容如下图所示：

图2（创建三列布局，左右列宽度分别为200px）

三列布局创建之后，接下来就要设置首页文件采用此布局，编辑首页文件index.html，切换到”Configuragion“标签页面，编辑后效果如下图：

图3（设置首页为三列布局）

Preset：

设置首页为三列布局，选择”三列布局“，就是我们之前刚刚编辑的3preset文件；

Element—>Box：

设置区块显示的文件，点击右侧的文件夹图标，选择第一步创建的text_locale文件；

Element—>Orientation：

设置区块显示的位置，选择”Left“；

Element—>ColorSchema：

设置区块显示的样式，此处选择”BoxSchema1“。

编辑完成后，此时首页的浏览效果如下图：

图4（三列布局首页浏览）

3、为首页左侧列text_locale区块添加内容：

在图4的状态下，点击左侧列text_locale区块的编辑图标（类似眼睛的圆圈图标），此操作与直接在工作区编辑text_locale文件一样，编辑后内容如下：

图5（编辑text_locale文件内容）

编辑后首页浏览效果如下图：

图6（添加左侧列区块信息后的首页浏览）

此时的首页左列已经添加了一个关于TemplateTwo汉化模块发布的区块信息，用同样的方法，在右侧列增加一个关于TemplateTwo介绍的区块信息tt_introduce，步骤与上述相同，不再详述，首页编辑、浏览效果分别如图7、图8所示

图7（为首页添加右侧列区块信息，位置为右侧，样式为BoxSchema2）

图8（首页浏览：

三列布局，左右列各一个文本区块信息）

现在的首页已经是一个标准的三列布局页面，使用如上的方法，左、中、右三列可以添加多个区块信息，在后的文章中还会不断对首页内容进行添加，下一篇文章主要讲述为站点创建栏目、设置导航信息等。

TemplateTwo建站实例之五：

为网站添加栏目和导航

作者【袁海明】时间【2009-12-17】浏览【2,246】

在之前的文章中，我们已经创建了首页，设置首页为三列布局，并为左右列添加了文本区块信息，中间列为首页文件信息，本文开始为网站添加栏目和导航信息，进一步完善网站内容。

添加栏目、导航：

OpenCms中没有栏目的概念，我们可以把一个文件夹（包含文件夹下内容，文件夹下可再添加子栏目，也就是子文件夹）或是一个文件当做一个栏目。

接下来我们为网站创建两个栏目：

“新闻公告”和“联系我们”，分别是文件夹类型和文件类型的栏目。

∙“新闻公告”栏目创建、添加到导航：

在网站根目录下创建文件夹”news“，设置Title属性为”新闻公告“，并添加到导航，导航文字为”新闻公告“，查看导航创建方法；

∙“联系我们”栏目创建、添加到导航：

在网站根目录下创建文件contactus.html，类型为Pagewithfreetext，选择模板（Template）OpenCmsTemplateTwo，设置Title属性为”联系我们“，并添加到导航，导航文字为”联系我们“。

结果如下图：

图1（创建栏目后站点文件夹结构）

此时首页浏览效果如下图：

图2（添加栏目后首页浏览）

我们没有写一行代码就已经实现了动态导航的功能，是的，TemplateTwo已经包含了导航的实现，并且提供了4种样式，我们在以后的文章中会对导航的程序实现再做说明。

添加首页到导航：

我们在之前已经创建了首页文件index.html，现在我们为index.html设置导航信息，导航文字为“首页”，并设置导航位置为首位，注意导航部分的变化，浏览如下图：

图3（添加“首页”导航的效果）

修改导航样式：

编辑页面样式配置文件_config_/style，修改MainMenu为Dolphin，浏览效果如下图，可以看到导航样式的变化，TemplateTwo提供了四种样式的主导航，其它的样式大家可以测试一下效果：

图4（修改导航样式后的主页浏览）

接下来的文章我们将会为栏目添加内容，进一步填充网站的内容。

TemplateTwo建站实例之六：

新闻类型栏目创建

作者【袁海明】时间【2009-12-18】浏览【2,368】

在上一篇文章中，我们已经为网站创建了两个栏目：

新闻公告和联系我们，但还没有添加任何内容，本文主要讲述为“新闻公告”栏目的完善过程。

1、创建栏目首页：

在/news/目录下创建文件index.html，文件类型为ttarticle（TemplateTwoArticle），并为ContentParagraph—>Text节点添加内容，浏览结果如下：

图1（新闻公告栏目首页浏览）

2、设置栏目首页为两列布局：

首先要编辑我们之前创建的两列布局文件/_config_/2preset，设置结果如下图：

图2（两列布局设置）

 接下来再编辑/news/index.html文件，设置布局和区块信息，如下图：

图3（为/news/index.html设置布局和区块信息）

浏览效果如下图：

图4（设置两列布局的栏目首页浏览）

3、为“新闻公告”栏目创建新闻列表：

首先在_info_目录下创建文件list_news，类型为ttlistbox（TemplateTwoListbox），查看ttlistbox类型配置详解，编辑内容如下图：

图5（编辑新闻列表配置文件/_info_/list_news）

 为栏目首页文件添加list_news区块，编辑/news/index.html，如下图：

图6（为栏目首页/news/index.html添加新闻列表区块）

4、为“新闻公告”栏目添加新闻：

在news目录下创建几条新闻，类型为ttnews（TemplateTwoNews），此时再浏览栏目首页，效果如下图：

图7（添加新闻列表后的栏目首页）

5、为“新闻公告”栏目创建子栏目：

“新闻公告”是一个以新闻列表为呈现形式的栏目，现在的内容已经比较完善了，如果“新闻公告”栏目下有子栏目的话，直接在/news/目录下以“新闻公告”栏目的创建方式再创建子栏目即可，子栏目创建后，左侧的子栏目导航就显示出来了，具体的操作大家实践一下，最后的效果如下图：

图8（添加子栏目后的栏目首页浏览）

TemplateTwo建站实例之七：

单页类型栏目创建和网站默认布局设置

作者【袁海明】时间【2009-12-19】浏览【1,778】

在之前的文章中，我们已经为网站创建“联系我们”栏目，此栏目是一个单页文件，类型为Pagewithfreetext，本文我们将会完善此栏目的内容，并为网站的设置默认布局。

1、为“联系我们”栏目添加内容：

编辑contactus.html，添加内容，编辑页面如下图：

图1（”联系我们“所见即所得页面编辑）

通过图1我们看到，编辑contactus.html所调用的编辑器与之前的ttarticle等类型不同，是的，contactus.html文件类型是Pagewithfreetext，它属于非结构化类型内容，调用的是系统集成的所见即所得编辑器FCKEditor，可以像编辑Word文件一样编辑网页，除了常用的字体、段落等设置，还可以添加图片、下载文件、表格等。

页面浏览结果如下图：

图2（”联系我们“栏目浏览）

2、为”联系我们“栏目设置布局：

通过图1编辑页面看到，我们不能像对ttarticle类型编辑时那样为它设置布局信息，那么如何把它设置为两列或三列布局那？

方法很简单，在之前的文章中，我们设置过网站根目录的style.config属性为/_config_/config，通过它就可以设置网站下页面的默认布局。

编辑默认布局配置文件/_config_/config，设置内容如下图所示：

图3（设置网站默认布局）

我们设置布局为两列，在左侧显示/_info_text_introduce区块，区块样式为3，此时再浏览contact.html效果如下图：

图4（设置布局后的页面浏览）

设置网站的默认布局后，当前网站下所有没有设置布局信息的页面，如新闻类型（ttnews），都会采用此布局，以”新闻公告“栏目/news/下新闻news_0001.html为例，浏览结果如下图：

图5（新闻内容页浏览）

TemplateTwo扩展之一：

页面样式（TemplateTwoStyle）扩展

作者【袁海明】时间【2009-12-20】浏览【1,424】

在之前的文章中我们介绍过网站页面样式（TemplateTwoStyle）配置文件，通过它我们可以很方便的设置网站的大部分样式，包括主导航风格/样式、子导航样式、页面尺寸、页面字体大小、各部分背景颜色/图片、链接/悬停字体颜色、区块样式等，设置它的最终结果其实就是修改了style.css文件的内容。

style.css文件存储路径是/system/modules/org.opencms.frontend.templatetwo/resources/css/style.css，它有一个显著的特点，那就是它在OpenCms系统中的类型是JSP，也就是说它最终输出到页面的CSS样式是JSP执行后的结果，通过这一点我们在CSS文件中可以动态的设置样式，也就是TemplateTwoStyle配置文件实现的方式。

以区块样式我为例，我们看一下如何扩展TemplateTwoStyle配置文件。

打开_config_/sytle文件，找到BoxStyle1部分，它设置的是区块1样式，可以设置区块1的背景颜色、标题背景颜色和标题文字颜色，如下图：

图1（区块样式1配置）

它对应的style.css文件中的286至288行和298至301行，如下图所示：

图2（区块样式1CSS设置）

通过如上的对应关系，我们可以很方便的对TemplateTwoStyle配置文件进行扩展，比如再为区块样式1增加链接文字颜色配置，首先修改TemplateTwoStyle类型文件的定义文件/system/modules/org.opencms.frontend.templatetwo/schemas/style.xsd，添加相应的节点，再在style.css中增加相应的CSS部分即可，大家可以尝试动手试一下，在此不再详述。

TemplateTwo扩展之二：

为新闻列表（listbox.jsp）增加分页功能

作者【袁海明】时间【2009-12-21】浏览【2,466】

在创建“新闻公告”栏目时，我们已经实现了新闻列表的功能，但TemplateTwo本身并没有为列表提供分页功能，本文主要讲述如何为新闻列表增加分页功能。

1、找到新闻列表文件：

/system/modules/org.opencms.frontend.templatetwo/elements/boxes/listbox.jsp；

2、编辑listbox.jsp，从原文件55行开始修改后内容如下，55行之上的内容不变，加粗部分是修改和添加的内容：

  <%--Entriesofthelistbox--%>

contentloadcollector="${listbox.value['Collector']}"param="${cms.parameter}"preload="true">

contentinfovar="info"/>   

iftest="${info.resultSize>0}">

    <%--以下61至62行为替换后内容，原内容为：

contentloadeditable="true">--%>

contentloadpageSize="1"pageIndex="%（param.pageIndex）"pageNavLength="10"editable="true">

contentinfovar="contentInfo"/>

contentaccessvar="resource"/>

setvar="entry"value="${cms.mappedEntry[resource.rawContent]}"/>

if>

      <%--Thetextoftheentry--%>

iftest="${!

emptyentry.text}">

if>

      <%--Imageatbottomposition--%>

iftest="${!

emptyentry.image&&listbox.value['PositionImage']=='Bottom'}">

imgsrc="${entry.image}"alt="${entry.title}"scaleType="1"width="100"scaleQ