opencms 页面编辑模式研究

2024-12-05 技术教程

引入：

opencms中引入了直接编辑页面的能力，因为我本身对页面编辑特性不是很感兴趣，所以这里就从技术角度分享一些常见的分析opencms中页面的方法。

实践：找到指定文件的对应代码

比如，我们要分析在VFS中的"Offline"模式下的/site/default/demo/text-block 模块下的index.html.

首先，我们在workplace中选中此文件，然后右键选择Properties, 然后切换到第二个tab,可以查看它用的模板的路径：

此路径为：/system/modules/com.alkacon.bootstrap.formatters/templates/bootstrap-page.jsp

我们发起数据库查询，根据此路径查询CMS_OFFLINE_STRUCTURE表，获取该页面对应的RESOURCE_ID. SQL语句为：

select*fromcms_offline_structurewhereresource_path='/system/modules/com.alkacon.bootstrap.formatters/templates/bootstrap-page.jsp';

我们在根据RESOURCE_ID查找CMS_OFFLINE_RESOURCES表，获取真实的页面代码. SQL语句是：

select*fromcms_offline_contentswhereresource_id='be01129d-1a1a-11e3-9358-000c29f9a2ec';

这时就可以打开这个BLOB文件查看其内容了：

<%@pagebuffer="none"session="false"trimDirectiveWhitespaces="true"%><%----%><%@taglibprefix="cms"uri="http://www.opencms.org/taglib/cms"%><%----%><%@taglibprefix="fmt"uri="http://java.sun.com/jsp/jstl/fmt"%><%----%><%@taglibprefix="fn"uri="http://java.sun.com/jsp/jstl/functions"%><%----%><%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%><%----%><fmt:setLocalevalue="${cms.locale}"/><!DOCTYPEhtml><htmllang="en"><head><title>OpenCms|${cms.title}</title><metacharset="${cms.requestContext.encoding}"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="description"content="<cms:propertyname="Description"file="search"default=""/>"><metaname="keywords"content="<cms:propertyname="Keywords"file="search"default=""/>"><metaname="robots"content="index,follow"><metaname="revisit-after"content="7days"><linkrel="apple-touch-icon"sizes="120x120"href="<cms:link>/system/modules/com.alkacon.bootstrap.formatters/resources/img/favicon_120.png</cms:link>"/><linkrel="shortcuticon"href="<cms:link>/system/modules/com.alkacon.bootstrap.formatters/resources/img/favicon_16.png</cms:link>"type="p_w_picpath/png"/><cms:enable-ade/><c:iftest="${notcms.isOnlineProject}"><cms:headincludestype="css"closetags="false"defaults="%(link.weak:/system/modules/com.alkacon.bootstrap.basics/resources/bootstrap/css/bootstrap.css:a37af2b8-8833-11e3-8675-3b52e9337fb8)"/></c:if><c:iftest="${cms.isOnlineProject}"><cms:headincludestype="css"closetags="false"defaults="%(link.weak:/system/modules/com.alkacon.bootstrap.basics/resources/bootstrap/css/bootstrap.min.css:a383301a-8833-11e3-8675-3b52e9337fb8)"/></c:if><cms:headincludestype="css"closetags="false"defaults="%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/css/style.css:0f8fcb02-3a3b-11e3-a584-000c2943a707)|%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/css/responsive.css:0f8c217f-3a3b-11e3-a584-000c2943a707)|%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/plugins/bxslider/jquery.bxslider.css:1264956e-3a3b-11e3-a584-000c2943a707)|%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/plugins/font-awesome/css/font-awesome.css:127bc6fe-3a3b-11e3-a584-000c2943a707)|%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/css/headers/header1.css:0f415ca7-3a3b-11e3-a584-000c2943a707)|%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/css/search.css:2e634695-0cb8-11e2-b19e-2b1b08a6835d)"/><c:setvar="colortheme"><cms:propertyname="bs.page.color"file="search"default="red"/></c:set><c:setvar="pagelayout"><cms:propertyname="bs.page.layout"file="search"default="9"/></c:set><linkrel="stylesheet"href="<cms:link>/system/modules/com.alkacon.bootstrap.formatters/resources/css/themes/${colortheme}.css</cms:link>"><linkrel="stylesheet"href="<cms:link>/system/modules/com.alkacon.bootstrap.formatters/resources/css/themes/headers/header1-${colortheme}.css</cms:link>"><linkrel="stylesheet"href="<cms:link>%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/css/page.css:52f716c6-20f8-11e3-b4d8-000c297c001d)</cms:link>"><c:iftest="${notcms.isOnlineProject}"><cms:headincludestype="javascript"defaults="%(link.weak:/system/modules/com.alkacon.bootstrap.basics/resources/jquery/jquery-1.10.2.js:127808be-8834-11e3-8675-3b52e9337fb8)|%(link.weak:/system/modules/com.alkacon.bootstrap.basics/resources/jquery/jquery-migrate-1.2.1.min.js:4986e200-8834-11e3-8675-3b52e9337fb8)|%(link.weak:/system/modules/com.alkacon.bootstrap.basics/resources/bootstrap/js/bootstrap.min.js:a35b35b0-8833-11e3-8675-3b52e9337fb8)"/></c:if><c:iftest="${cms.isOnlineProject}"><cms:headincludestype="javascript"defaults="%(link.weak:/system/modules/com.alkacon.bootstrap.basics/resources/jquery/jquery-1.10.2.min.js:0d41801c-8834-11e3-8675-3b52e9337fb8)|%(link.weak:/system/modules/com.alkacon.bootstrap.basics/resources/jquery/jquery-migrate-1.2.1.min.js:4986e200-8834-11e3-8675-3b52e9337fb8)|%(link.weak:/system/modules/com.alkacon.bootstrap.basics/resources/bootstrap/js/bootstrap.min.js:a35b35b0-8833-11e3-8675-3b52e9337fb8)"/></c:if><cms:headincludestype="javascript"defaults="%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/plugins/hover-dropdown.min.js:1903fd25-3a3b-11e3-a584-000c2943a707)|%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/plugins/bxslider/jquery.bxslider.js:12686601-3a3b-11e3-a584-000c2943a707)|%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/plugins/back-to-top.js:1908df28-3a3b-11e3-a584-000c2943a707)|%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/js/app.js:11fe5a44-3a3b-11e3-a584-000c2943a707)"/><scripttype="text/javascript">jQuery(document).ready(function(){App.init();});</script><cms:includefile="%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/search/config.jsp:b4a9ffc9-416c-11e3-81ba-000c297c001d)"/></head><body><divclass="page-wrap"><c:iftest="${cms.isEditMode}"><div> </div></c:if><cms:containername="top-wide"type="content-wide"width="1200"maxElements="5"/><divclass="container"><cms:containername="top"type="content-full"width="1200"/><c:iftest="${pagelayout!='full'}"><c:choose><c:whentest="${pagelayout<6}"><c:setvar="leftDetail"value="false"/></c:when><c:otherwise><c:setvar="leftDetail"value="true"/></c:otherwise></c:choose><divclass="row"><divclass="col-md-${pagelayout}"><cms:containername="middle-left"type="content"width="${(pagelayout*100)}"detailview="${leftDetail}"/><cms:containername="middle-left-detail"type="content"detailonly="true"/></div><divclass="col-md-${12-pagelayout}"><cms:containername="middle-right-detail"type="content"detailonly="true"/><cms:containername="middle-right"type="content"width="${((12-pagelayout)*100)}"detailview="${notleftDetail}"/></div></div><cms:containername="bottom"type="content-full"width="1200"/></c:if></div><cms:containername="foot"type="content-wide"width="1200"maxElements="5"/></div></body></html>

从这里看，它是用的纯JSP加上CMS标签来组成的页面，而这里只是模板。

对于cms标记库，它的uri是 "http://www.opencms.org/taglib/cms" ，它对应的标记库定义是写在opencms.tld文件中。

细节自己调试下就很清楚，这里就不一一举例了。