本来按照计划是要完成FORMATTER 的讲解, 但有童鞋希望先讲一下模板的作用, 那就讲讲模板先。
1、新建一个模块cn.opencms.formatters, 选择创建templates目录,不清楚如何创建模块的同学,看看系列之二
2、进入/system/modules/cn.opencms.formatters/templates/ 创建一个文件default_template.jsp
我们现在就来看看模板代码
<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" %><%--
--%><%@ taglib prefix="cms" uri="http://www.opencms/taglib/cms" %><%--
--%><%@ taglib prefix="fmt" uri="http://java.sun/jsp/jstl/fmt" %><%--
--%><%@ taglib prefix="fn" uri="http://java.sun/jsp/jstl/functions" %><%--
--%><%@ taglib prefix="c" uri="http://java.sun/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.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.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.opencms.formatters/elements/footer.jsp:fe0cc382-e476-11e3-93c9-c3cab90d58ce)" />
</body>
</html>
好了一个模板建好了,有其他CMS经验的同学肯定会大或不解,这么怎么简单?
我喜欢用房子的概念来帮助理解OC,模板就是一个毛坯房的图纸。<cms:container />就是一个一个的房间。 <cms:include />就是毛坯房中给你预先配置好的门窗。 页面中的内容就是家具、电视。这个要到你装修设计的时候来做,而不是在设计毛坯房时候来做。那毛坯房是什么呢,就是我们后面会碰到的容器页。
好吧, 到现在为止,我们的模板就建好了。
请好好理解这段概念,毛坯房图纸===模板,毛坯房==容器页, 装修毛坯房==设计容器页。
更多推荐
OpenCms9系列之四 如何创建模板
发布评论