opencms 頁面編輯模式研究
引入：
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 * from cms_offline_structure where resource_path='/system/modules/com.alkacon.bootstrap.formatters/templates/bootstrap-page.jsp';
我們在根據RESOURCE_ID查詢CMS_OFFLINE_RESOURCES表，獲取真實的頁面程式碼. SQL語句是：
select * from cms_offline_contents where resource_id ='be01129d-1a1a-11e3-9358-000c29f9a2ec';
這時就可以開啟這個BLOB檔案檢視其內容了：
<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" %><%----%><%@ taglib prefix="cms" uri="" %><%----%><%@ taglib prefix="fmt" uri="" %><%----%><%@ taglib prefix="fn" uri="" %><%----%><%@ taglib prefix="c" uri="" %><%----%><fmt:setLocale value="${cms.locale}" /><!DOCTYPE html><html lang="en"><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="7 days"> <link rel="apple-touch-icon" sizes="120x120" href="<cms:link>/system/modules/com.alkacon.bootstrap.formatters/resources/img/favicon_120.png</cms:link>"/> <link rel="shortcut icon" href="<cms:link>/system/modules/com.alkacon.bootstrap.formatters/resources/img/favicon_16.png</cms:link>" type="image/png"/> <cms:enable-ade/> <c:if test="${not cms.isOnlineProject}"> <cms:headincludes type="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:if test="${cms.isOnlineProject}"> <cms:headincludes type="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:headincludes type="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:set var="colortheme"><cms:property name="bs.page.color" file="search" default="red" /></c:set> <c:set var="pagelayout"><cms:property name="bs.page.layout" file="search" default="9" /></c:set> <link rel="stylesheet" href="<cms:link>/system/modules/com.alkacon.bootstrap.formatters/resources/css/themes/${colortheme}.css</cms:link>"> <link rel="stylesheet" href="<cms:link>/system/modules/com.alkacon.bootstrap.formatters/resources/css/themes/headers/header1-${colortheme}.css</cms:link>"> <link rel="stylesheet" href="<cms:link>%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/css/page.css:52f716c6-20f8-11e3-b4d8-000c297c001d)</cms:link>"> <c:if test="${not cms.isOnlineProject}"> <cms:headincludes type="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:if test="${cms.isOnlineProject}"> <cms:headincludes type="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:headincludes type="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)" /> <script type="text/javascript"> jQuery(document).ready(function() { App.init(); }); </script> <!--[if lt IE 9]> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="<cms:link>%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/resources/plugins/respond.js:192037c7-3a3b-11e3-a584-000c2943a707)</cms:link>"></script> <![endif]--> <cms:include file="%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/search/config.jsp:b4a9ffc9-416c-11e3-81ba-000c297c001d)" /></head><body><div class="page-wrap"><c:if test="${cms.isEditMode}"><!--=== Placeholder for OpenCms toolbar in edit mode ===--><div style="background: lightgray; height: 35px"> </div></c:if><cms:container name="top-wide" type="content-wide" width="1200" maxElements="5" /><!--=== Content Part ===--><div class="container"> <cms:container name="top" type="content-full" width="1200" /> <c:if test="${pagelayout != 'full'}"> <c:choose> <c:when test="${pagelayout < 6}"> <c:set var="leftDetail" value="false" /> </c:when> <c:otherwise> <c:set var="leftDetail" value="true" /> </c:otherwise> </c:choose> <div class="row"> <div class="col-md-${pagelayout}"> <cms:container name="middle-left" type="content" width="${(pagelayout * 100)}" detailview="${leftDetail}"/> <cms:container name="middle-left-detail" type="content" detailonly="true"/> </div> <div class="col-md-${12 - pagelayout}"> <cms:container name="middle-right-detail" type="content" detailonly="true"/> <cms:container name="middle-right" type="content" width="${((12 - pagelayout) * 100)}" detailview="${not leftDetail}"/> </div> </div><!--/row--> <cms:container name="bottom" type="content-full" width="1200" /> </c:if></div><!--/container--> <!--=== End Content Part ===--><!--=== Foot ===--><cms:container name="foot" type="content-wide" width="1200" maxElements="5" /><!--=== End Foot ===--></div><!--/page-wrap--></body></html>
從這裡看，它是用的純JSP加上CMS標籤來組成的頁面，而這裡只是模板。
對於cms標記庫，它的uri是 "" ， 它對應的標記庫定義是寫在opencms.tld檔案中。
細節自己除錯下就很清楚，這裡就不一一舉例了。
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/2035/viewspace-2815484/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- IDEA頁面不能編輯Idea
- FreeTextBox設定編輯頁面
- HTML 頁面使用 wangeditor 富文字編輯器HTML
- JSP頁面中嵌入UEditor編輯器方法JS
- Flutter終於有視覺化編輯頁面了（Hot UI）Flutter視覺化UI
- vim 列編輯模式模式
- 溯源黑帽利用 Web 編輯器漏洞非法植入 SEO 頁面事件Web事件
- pdf編輯器如何開啟PDF檔案拆分文件頁面
- 二摺頁宣傳冊設計模板平臺，如何編輯模板頁面內容
- main頁面做成frameset模式AI模式
- Whisk for Mac 網頁編輯器Mac網頁
- (五) 文章編輯頁開發
- 網頁編輯器 DIY (轉)網頁
- Jx.Cms開發筆記（五）-文章編輯頁面標籤設計筆記
- jquery 設定頁面元素不可點選、不可編輯、只讀（備忘）jQuery
- vi和vim的編輯模式模式
- Vim 編輯器的相容模式模式
- Smultron for Mac 網頁文字編輯工具Mac網頁
- Smultron for Mac(網頁文字編輯器)Mac網頁
- SwnoRabbit全家桶-前端頁面模式投票前端模式
- 常用編輯器列模式快捷鍵模式
- 有贊上那個微頁面編輯完後，訪問的時候呈現編輯的內容，咋實現的呢？
- 搭建微博編輯頁面的表情鍵盤
- 各網頁編輯器對照 (轉)網頁
- 用HTML編寫迪士尼樂園頁面HTML
- 剛才把kindeditor線上編輯器做成視覺化UBB編輯模式了視覺化模式
- SSH整合之四(頁面邏輯的實現)
- wordpress 設定編輯器預設模式模式
- 微信公眾號編輯模式應用模式
- 這款國外開源框架, 讓你輕鬆構建自己的頁面編輯器框架
- 學習ASP.NET MVC(六)——我的第一個ASP.NET MVC 編輯頁面ASP.NETMVC
- Mac上實用網頁文字編輯工具Mac網頁
- Smultron for Mac(網頁文字編輯工具)12.5.2Mac網頁
- 6個HTML5 網頁編輯器HTML網頁
- css中四種頁面編寫樣式CSS
- 編寫靜態頁面經驗總結
- 模式視窗頁面不更新的問題模式
- linux下用vi,vim編輯時退出編輯模式（wq）無法儲存退出Linux模式