opencms 9.5 自建网站可视化拖拽环境搭建.docVIP

搭配自定义网站的可视化编辑环境 在opencms官方网站中，很炫的展示了在示例站点上 拖拉放组件，建立导航。 但是按官方文档中的建站指南进行操作，无法达到其效果。经过几番探索，终于摸索到一条途径。 Opencms 示例站点，是基于bootsrap的。Bootstap重要的是栅格布局。典型特征是：看起来像表格，但是与表格有差别。主要是 一个栅格（像excel中单元格，或形象说就是格子方格） 中可以再生成系列栅格 (理论是无限制的，实际受设备的显示屏约束)。这样在布局时，只要提供栅格布局，就不再提供什么 页头，页脚，左中右等等了。因为要达到这种布局效果，只需拖三个栅格，分别表示页头、页中、页脚。页中再施三个栅格 进行左右右表示即可。如果还不能理解栅格，请移步到bootstap官方网站 看栅格系统方面的教材。 Opencms的栅格布局，重点由行，列组成。所有的像label、text、list等这些组件 必须存在栅格中，没有栅格无法存在。Opencms在可视化拖放操作，分成了template 行列 、layout 行列、拖放像label、text等这类组件三步操作。 Template 行列 必须 在container容器中，layout行列必须存在template行列中，而label、text必须存在layout行列中。 要搭建自定义网站的可视化编辑环境，需要借用opnecms的bootstap 模板，根踪示例网站不难发现是 ： /system/modules/com.alkacon.bootstrap.formatters/templates/bootstrap-grid.jsp 为了不影响官方的示例站点，请自建一个模块，然后克隆这个文件。为了简化，请把这个文件中的有关搜索的语句注释掉： cms:include file=%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/search/config.jsp:b4a9ffc9-416c-11e3-81ba-000c297c001d) / OPENCMS的组件 的数据是借助XML进行存放的，该文件位于站点的.content下的相应文件夹中。文件名 由 该组件所在模块的 module configuration 类型且名为.config的文件进行指定。 为了简化，强烈建议把示例站点中.content下的文件夹全部COPY到自建网站中来，并把这些文件夹清空(这是清除垃圾)。 综上所述，要建立自定义网站的可视化编辑，总的工作是：建立自定义站点，建立自定义模块，复制并修改bootstrap-grid.jsp文件。建好后在自定义页面 如何添加templaout 行列，如何添加layout 行列，如何添加text组件等。 以下是较详尽演练： 进入opencms 工作平台 安装好并运行opencms后。这里按默认安装示例。 在浏览器中打开网页 http://localhost:8080/opencms/opencms/system/login 输入用户密码 Admin admin. 登陆。登陆后后台，点击reopen window 建立自定义模块 （1）进入工作管理平台中，site 指到/ ,view切换到adminstrator ，点名字中含 mondule相关项 进行 建立模块。图示如下： （2）在弹出的窗口中，点new module 然后 如下所示填入资料并确定。 复制并编辑bootstap 模板 Opencms管理工作平台中，site 指到/,view切换到exploer状态。 左边打开/system/modules/com.alkacon.bootstrap.formatters/templates/.按右键选copy，出现窗口中复制到 ： /system/modules/my.opencms.testmodule/templates/ 关键图示为： 选中复制后文件，重命名为main.jsp. 并打开编辑。 这两者都是选中文件，按右键。 编辑时注释掉如下语句。 cms:include file=%(link.weak:/system/modules/com.alkacon.bootstrap.formatters/search/config.jsp:b4a9ffc9-416c-11e3-81ba-000c297c001d) / 关键操作示例图如下： 建立自定义站点 （1）进入工作管理平台中，site 指到/ ,view切换到adminstrator ， 点右边的UP，直到出现有site、module等英文单词的主界面。 （2）进入主界面点site mangageme