OpenCms9系列之四如何创建模板

最新推荐文章于 2018-01-22 13:54:26 发布

qiujoe

最新推荐文章于 2018-01-22 13:54:26 发布

阅读量3.9k

点赞数

分类专栏： OpenCMS 文章标签： cms opencms9 java

本文链接：https://blog.csdn.net/qiujoe/article/details/28598929

版权

OpenCMS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本来按照计划是要完成FORMATTER 的讲解，但有童鞋希望先讲一下模板的作用，那就讲讲模板先。

1、新建一个模块cn.org.opencms.formatters，选择创建templates目录，不清楚如何创建模块的同学，看看系列之二

2、进入/system/modules/cn.org.opencms.formatters/templates/ 创建一个文件default_template.jsp

我们现在就来看看模板代码

<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" %><%--
--%><%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %><%--
--%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><%--
--%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><%--
--%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%--
--%><fmt:setLocale value="${cms.locale}" /><!DOCTYPE html>
<html lang="zh_CN">
<head>
	<title>OpenCms中文网 | ${cms.title}</title>
	
	<meta charset="${cms.requestContext.encoding}">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<meta name="description" content="<cms:property name="Description" file="search" default="" />">
	<meta name="keywords" content="<cms:property name="Keywords" file="search" default="" />">
	<meta name="robots" content="index, follow">
	<meta name="revisit-after" content="1 days">
	<meta name="Copyright" Content="本页版权归OpenCms中文网所有。All Rights Reserved">
	<meta http-equiv="Expires" Content="3600">
	
	<!-- 重要，决定你可以通过UI（ADE）实现所见所得的编辑，而不需要进入后台管理 -->
	<cms:enable-ade/>
	
	<!-- 引入默认的CSS -->
	<cms:headincludes type="css" closetags="false" defaults="%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/css/base.css:72fe07bb-d7e5-11e3-b893-137a8a97926c)
		|%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/bxslider/jquery.bxslider.css:b7e719c7-d7e7-11e3-b893-137a8a97926c)
		|%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/js/app.js:e0d43af6-d8fc-11e3-a736-137a8a97926c)
		|%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/font-awesome/css/font-awesome.css:b870e36d-d7e7-11e3-b893-137a8a97926c)" />
		
	<!-- 扩展了布局，样式的灵活性,非必须 -->
	<c:set var="theme"><cms:property name="jsoss.theme" file="search" default="default" /></c:set>
	<c:set var="pagelayout"><cms:property name="jsoss.layout" file="search" default="9" /></c:set>
	<link rel="stylesheet" href="<cms:link>/system/modules/cn.org.opencms.formatters/resources/css/themes/${theme}.css</cms:link>">

	<!-- 不是online状态时，引入JS未压缩包，便于调试 -->
	<c:if test="${not cms.isOnlineProject}">
		<cms:headincludes type="javascript" defaults="
			%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/jquery/jquery-1.10.2.js:4e676430-d7e8-11e3-b893-137a8a97926c)|
		    %(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/jquery/jquery-migrate-1.2.1.js:4e8d14a4-d7e8-11e3-b893-137a8a97926c)|
		    %(link.weak:/system/modules/org.jsoss.v9.formatters/resources/js/app.js:e0d43af6-d8fc-11e3-a736-137a8a97926c)|
			%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/bootstrap/js/bootstrap.js:598b909a-d7e8-11e3-b893-137a8a97926c)" />
	</c:if>
	<!-- online状态时，引入JS压缩包，减小体积 -->
	<c:if test="${cms.isOnlineProject}">
		<cms:headincludes type="javascript" defaults="
			%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/jquery/jquery-1.10.2.min.js:4e7260b2-d7e8-11e3-b893-137a8a97926c)|
		    %(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/jquery/jquery-migrate-1.2.1.min.js:4e974dd6-d7e8-11e3-b893-137a8a97926c)|
		    %(link.weak:/system/modules/org.jsoss.v9.formatters/resources/js/app.js:e0d43af6-d8fc-11e3-a736-137a8a97926c)|
			%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/bootstrap/js/bootstrap.min.js:599099ac-d7e8-11e3-b893-137a8a97926c)" />
	</c:if>
	<cms:headincludes type="javascript" defaults="%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/plugins/back-to-top.js:1908df28-3a3b-11e3-a584-000c2943a707)" />
	
	<script type="text/javascript">
		jQuery(document).ready(function() {
			App.init();
		});
	</script>
	<!--[if lt IE 9]>
    	<script src="<cms:link>%(link.weak:/system/modules/org.jsoss.v9.formatters/resources/plugins/respond.js:c039618c-d7e7-11e3-b893-137a8a97926c)</cms:link>"></script>
	<![endif]-->
</head><body>
<div class="page-wrap">
<c:if test="${cms.isEditMode}">
<!--=== 辅助功能： 在编辑模式的时候，页面上方会多一个灰色条，用过OC8的朋友肯定知道他巨大的作用，不知道也没关系，不是重点。 ===-->
<div style="background: lightgray; height: 35px"> </div>
</c:if>
	<!-- 类似jsp:include, 导入一个头部文件， %(link.weak)的用法以后在讲， UUID（86c8c52f-db83-11e3-bce8-137a8a97926c）是系统自动生成 -->
	<cms:include file="%(link.weak:/system/modules/cn.org.opencms.formatters/elements/header.jsp:86c8c52f-db83-11e3-bce8-137a8a97926c)" />

<!--=== 内容区 ===-->
<div class="container">
	<cms:container name="content" type="content-full" detailview="true"/>
</div>

</div><!--/page-wrap-->
	<!-- 类似jsp:include, 导入一个页尾文件 -->
	<cms:include file="%(link.weak:/system/modules/cn.org.opencms.formatters/elements/footer.jsp:fe0cc382-e476-11e3-93c9-c3cab90d58ce)" />
</body>
</html>

好了一个模板建好了，有其他CMS经验的同学肯定会大或不解，这么怎么简单？

我喜欢用房子的概念来帮助理解OC，模板就是一个毛坯房的图纸。<cms:container />就是一个一个的房间。 <cms:include />就是毛坯房中给你预先配置好的门窗。页面中的内容就是家具、电视。这个要到你装修设计的时候来做，而不是在设计毛坯房时候来做。那毛坯房是什么呢，就是我们后面会碰到的容器页。

好吧，到现在为止，我们的模板就建好了。

请好好理解这段概念，毛坯房图纸===模板，毛坯房==容器页，装修毛坯房==设计容器页。