OpenCMS 7.0 模板

最新推荐文章于 2017-06-17 13:56:00 发布

fogdrop

最新推荐文章于 2017-06-17 13:56:00 发布

阅读量3k

点赞数

文章标签： cms jsp html stylesheet templates include

本文链接：https://blog.youkuaiyun.com/fogdrop/article/details/1742845

版权

OpenCMS 7.0 模板

1. 简介

当前端客户访问一个由OpenCMS发布的页面， OpenCMS将获取该页取得内容。这里的内容是通过工作台创建的文件的基本内容。在这里，他没有任何排版和导航。但是，它包含下面的信息：导航应该什么格式，使用哪个模板等。OpenCMS使用这些信息去获取正确的模板并把内容发到模板上。模板提供页面结构样式，导航，和文档格式。一旦内容被模板格式化完成，完成后的页面就会展示给前端客户。

OpenCMS在安装时就带有自身的模板。这些模板叫做TemplateOne。这些模板已事先定义好。你可以在创建新的页面时使用它们。象常规的模板一样，TemplateOne是有jsp和html写成的，当它使用了一些java代码。

模板有两种类型的元素组成。一是基本html，html部分会不经任何修改而展现给最终用户。二是jsp代码，用来展现动态的内容。Jsp内容有两种格式：tags和scriptlets

JSP Tags：这即是传统jsp中的tag

Scriptlets：这个即是有<% %>围起来的java代码。很多OpenCMS的API就可以在这里掉用。

2. 模板模块

模块是OpenCMs用来扩展的机制。

在我们创建模板时，我们要找一个地方存储模板，我们不希望把模板和站点内容放在一起。而内容的编辑也不需要看到模板。我们也不希望功能组件定义和内容管理混在一起。还要考虑模板导出等问题，所以我们建立一个模块来存储模板。

这里我们使用之前定义的模块 /system/modules/com.playground.moudles.templates/

切换视图到资源管理，切换站点到/, 切换项目到 offline，这时在/system/modules/ 下就会看到这个模块，看上去也是个文件夹。

在这个文件夹下面有几个子目录，他们保存各自类别的数据：

Templates：这里保存jsp模板

Elements：这里保存jsp文件或者text文件，他们被模板所使用的

Resources：这里保存stylesheets,images,和其他前端使用的文件

如果这些目录不在，你可以直接创建他们。这里还可能包含其他目录，如classes和libs。用来保存编译好的java classes。

3. 建立模板

在左侧文件夹树上点击 /system/modules/com.playground.moudles.templates/ 下面的templates，然后点击新建，选择jsp文件。

填入模板名称，点击继续

Title 将出现在添加新页面时，模板选择的下拉列表中

Cache 这里用来说明cache的属性，用来决定模板被OpenCMS的柔性缓存如何存储。通常保持为空。

Content-encondeing 用来说明内容的编码（ (ISO-8859 or UTF-8) ，只有在该模板的编码和缺省的编码不相同时才有必要设置此项。

Export 这个值决定模板是否被导出在第一次被访问时，缺省是否，如果这个值设为 true ，那么模板只被执行一次，生成的结过 html 文件将被存储到磁盘上。下次被访问时，将使用静态的 html 文件，而模板 jsp 文件将不再执行。

这个功能用于高负载，并且模板内容不是很实时的情况。

点击完成

编辑该模板的源代码，填入

<%@ page session="false" %>

<%@ taglib prefix="cms"

uri="http://www.opencms.org/taglib/cms" %>

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<cms:include element="text1"/>

</body>

</html>

保存并退出

<cms:property name="Title" escapeHtml="true"/> 用来显示该页面属性中的 title 属性

即这个页面中的 Title 。在页面显示时会显示这个 Title 值在页面上

<cms:include element="text1"/>

这个 tag 是用来获取访问页面的内容并把他们放到模板中显示给前端。在 VFS 中每一个页面都存储为一个特别的 xml 文件，这个 xml 文件可能包括不同语言的内容，也可能包括几个不同的子部分。例如，一些页面可能有几个内部“子文档”，这些子文档叫做 element ，缺省情况，这些 element 按照基本顺序命名，第一个是 text1 ，下面的是 text2 ， text3 等。

缺省情况下，我们创建一个新的文档，我们只建立一个 element text1 。

4. 测试该模板

切换站点到演练站点，项目到演练站点项目

点击新建，选择无格式文本页面

填入文件名，选择演练站点简单 jsp 模板 A ，继续，填入 title 等后完成

编辑页面

保存退出，然后点击文件名，预览页面

5. 在模板中使用资源

之前我们在模块文件夹下建立了 resources 目录。这里用来存储 css ， js 和 images 。现在创建一个 css 文件。

站点切换到 / 项目切换到 offline ，当前文件夹切换到 /system/modules/com.playground.moudles.templates/ 下的 resources ，然后点击新建，选择文本文件，点击继续

填入文件名 main.css, 点击继续后完成

编辑 main.css

* Cascading Style Sheet for Example OpenCms Templates

h1 {

color: navy;

}

body {

"FONT-SIZE: 9pt;">宋体 ;

color: red;

}

保存退出。

然后修改模板文件，改为

<%@ page session="false" %>

<%@ taglib prefix="cms"

uri="http://www.opencms.org/taglib/cms" %>

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<link type="text/css" rel="stylesheet" href="<cms:link> /system/modules/com.playground.moudles.templates /resources/main.css</cms:link>"/>

</head>

<body>

<cms:include element="text1"/>

</body>

</html>

切换站点到演练站点，然后点击 page1.html

可以看到 css 已经起作用

6. 定义可编辑页面的模板

你可以配置模板，以允许登录和授权用户可以编辑页面上某点。这里叫“直接编辑“。当内容编辑登录后查看这个由这个模板生成的页面，就可以看到一个按钮，点击按钮，就可以直接编辑该区域。

这个功能要在模板中定义，在模板中加入一行，修改一行：

<%@ page session="false" %>

<%@ taglib prefix="cms"

uri="http://www.opencms.org/taglib/cms" %>

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<cms:editable/>

</head>

<body>

<cms:include element="text1" editable="true"/>

</body>

</html>

保存后退出

查看效果，切换站点到演练站点，项目切换到演练站点项目，点击 page1.html

页面右侧的按钮，点击可以直接编辑

点击后，显示编辑页面

保存后

7. 扩展元素

很多时候存储模板的各部分到多个文件。这样可以减少模板混乱或者特定模板代码可以被多个模板重用。

生成导航的代码是经常被使用。遗憾的是，没有 jsp tag 来做这个。所以只能凭借 jsp 的 scriptlet 。把 scriptlet 放到一个单独的文件，这样其他模板就可以重用它。

存储这些文件最好的位置就是 element 目录。我们创建一个 jsp 文件在这个目录。命名为 navigation.jsp 。

在 /system/modules/com.playground.moudles.templates/elements 下建立 navigation.jsp

编辑该文件，填入

<%@ page session="false"

import="java.util.Iterator,

java.util.List,

org.opencms.jsp.CmsJspNavBuilder,

org.opencms.jsp.CmsJspNavElement,

org.opencms.jsp.CmsJspActionElement"

* Provides basic site navigation.

// Create the class from which we will get navigation.

CmsJspActionElement cms =

new CmsJspActionElement( pageContext, request, response );

// Get navigation info

CmsJspNavBuilder navigation = cms.getNavigation();

List navItems = navigation.getNavigationForFolder();

Iterator i = navItems.iterator();

// Loop through all of the items in the ArrayList and print the

// menu.

while( i.hasNext() ) {

CmsJspNavElement navElement = ( CmsJspNavElement )i.next();

String link = cms.link( navElement.getResourceName() );

String title = navElement.getTitle();

out.println("»<a href=/"" + link + "/">" + title + "</a><br/>");

}

保存后退出

在模板中使用 navigation.jsp

编辑模板，加入粗体部分

<%@ page session="false" %>

<%@ taglib prefix="cms"

uri="http://www.opencms.org/taglib/cms" %>

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<cms:editable/>

</head>

<body>

<div name="menu" style="float:left;border:1px solid gray;padding: 3px;">

<b> 菜单 </b><br />

<cms:include file="../elements/navigation.jsp"/>

</div>

<cms:include element="text1" editable="true"/>

</body>

</html>

查看菜单效果

切换站点到演练站点，切换项目到演练站点项目

设置 index.html 和 page1.html 的属性

选中添加到导航后确定。

点击 page1.html 进行预览

点击首页链接，就会打开首页页面