opencms9.5自建网站可视化拖拽环境搭建

《opencms9.5自建网站可视化拖拽环境搭建》由会员分享，可在线阅读，更多相关《opencms9.5自建网站可视化拖拽环境搭建（20页珍藏版）》请在装配图网上搜索。

1、1.1搭配自定义网站的可视化编辑环境在opencms官方网站中，很炫的展示了在示例站点上拖拉放组件，建立导航。但是按官方文档中的建站指南进行操作，无法达到其效果。经过几番探索，终于摸索到一条途 径。Opencms示例站点，是基于bootsrap的。Bootstap重要的是栅格布局。典型特征是：看起来像表格，但是与表格有差别。主要是 一个栅格（像excel中单元格，或形象说就是 格子方格）中可以再生成系列栅格（理论是无限制的，实际受设备的显示屏约束）。这样 在布局时，只要提供栅格布局，就不再提供什么页头，页脚，左中右等等了。因为要达到这种布局效果，只需拖三个栅格，分别表示页头、页中、页脚。页中再

2、施三个栅格进行左右右表示即可。如果还不能理解栅格，请移步到bootstap官方网站看栅格系统方面的教材。Opencm啲栅格布局，重点由行，列组成。所有的像label、text、list等这些组件 必 须存在栅格中，没有栅格无法存在。Opencms在可视化拖放操作，分成了 template行列、 layout行列、拖放像 label、text等这类组件三步操作。Template行列必须在con tai ner 容器中,layout行列必须存在template 行列中，而label、text必须存在layout 行列中。要搭建自定义网站的可视化编辑环境，需要借用opnecms的bootstap模板

3、，根踪示例网站不难发现是：/system/modules/com.alkacon.bootstrap.formatters/templates/bootstrap-grid-page.jsp为了不影响官方的示例站点，请自建一个模块，然后克隆这个文件。为了简化，请把 这个文件中的有关搜索的语句注释掉：OPENCMS组件的数据是借助XMLt行存放的，该文件位于站点的.content下的相应文件夹中。文件名 由该组件所在模块的 module con figuration类型且名为.config 的文件进行指定。为了简化，强烈建议把示例站点中.content下的文件夹全部COP制自建 网站中来，并把这

4、些文件夹清空（这是清除垃圾）综上所述，要建立自定义网站的可视化编辑，总的工作是：建立自定义站点，建立自定 义模块，复制并修改 bootstrap-grid-page.jsp 文件。建好后在自定义页面 如何添加 templaout 行列，如何添加layout 行列，如何添加text组件等。以下是较详尽演练:1.1.1进入opencms工作平台安装好并运行opencms后。这里按默认安装示例。在浏览器中打开网页http:/localhost:8080/ope ncms/ope ncms/system/logi n输入用户密码Admin admin.登陆。登陆后后台，点击 reopen window

5、:80S0/open c m s/ope nc m s/ system/lo gi n盟圄百埋(ppen 匚 msYour kkgin was successfulYou have sucessfully logged into the OpenCms WorkplaThe OpcnCmiS Workplace should have opened in a new windowIf this is not the cawr please ensure that you have no Poixip blocfker active Yo Module Management 1 -New Mod

6、ule-Module informationPackage name:Module name:Module description: ?Module versionsModule group:Action class:Import script:Create Modulefolder:7*Create templates subfolder: 7 xCreate elements subfolders 7 Create formatters subfolder: J “Create resources subfolder: 7 vCreate schemas subfolder; ? :Cre

7、ate classes subfolder:?*1.1.3 复制并编辑 bootstap模板Opencms管理工作平台中，site 指到/,view 切换到exploer状态。左边打开/system/modules/com.alkacon.bootstrap.formatters/templates/.按右键选 copy，出现窗口中复制到/system/modules/my.ope ncms.testmodule/templates/关键图示为:opencms workplace or (Admmj - boogie Chromelocallhost：8080/Open( m$/of)encr

8、TiV%yt*：irTVwork|.i|ti： tVlliturs/pditDr maiin-pprojeet OfflineT Publish Quew* site jBackWltw EKpiorerUplSa Search 汐 blew Level U*p | LxarioEmQdulWs/cxHihaikaajfrbootstraPrfiannatters/tmplJtES/T Q Rdoad 国 Prefer电ng Q Hdp j shared j sites syttF 力Q30QCj旳曰ClcatgorBes galleiie handler login lot-fgynd m

9、ovulesn-O com .bootstrap-basks q com .alkaew .bootrap.fwm atters 也 Qfnerits formattershjinctions flSn pages resources search& templates 匚口 m.alkacoo .boot strap.schemas corni,alkac：cmi !boocu merit; my.opencms.man my.opencms.school ftly.Opercms.tEtmoduleOaIA:-.E.;E.;FUFOaecuclas&es elements formatte

10、r? resources schism asCopy resource: /system /tes/ bootstrs p- arid- EaqeispTirtle： Grid Bout肚阳p PageState: unchsngsdPermalinks: 1:/ ：O/apEricm 5/opencm siperm alin k/cSaQS lfS-3989 11 e4 -a5 60-0 05t)i56b61161 JspCreate a sibling of the resource Copy th e fil e as new rE&ourceOk |Cancel选中复制后文件，重命名为

11、 mai n.jsp.并打开编辑。这两者都是选中文件，按右键。编辑时注释掉如下语句。关键操作示例图如下:Nameitipencms/opencms/system/workpldce/editors/editor mainjspum Import Module xith h/Hpms/Qpencms/system/workplace/editors/editorrnain.jsp114建立自定义站点UpenCms Workplace of (Admin) Publish y Queue Site /h * Ne;v C1 Level Up Location /system/modules/myo

12、pencnnslestmoduIe/templates/bootstap-Qid-pgx jsp Grid Bootstrap Page con la i n e rpa ge_tem plat e直到出现有site、module等英文单词的主界面。Author info * Resources , Dependencies , Resourcetypes Print tQ Delate(1)进入工作管理平台中，site指到/,view 切换到adminstrator，点右边的UPPublish Queue | Site 7Q Reload 国 Preferelentap.basics-ap.

13、farm atteR apchemas ap.search n$fdocurnent Site Management Site details: 二Edit site进入工作管理平台中，site 指到/ ,view 切换到explore 。选中site/mysite, 点new，选folder。新建一个en的文件夹。选中folder时输入文件名后，其他不要管 确定即可。j localhost:8080/opencms/opencms/system/workplace/editors/editor main.jspOfflineProjectExplorerSiteViewLevel UpExt

14、ended folderO FolderStructured contentsBootstrap TemplateOther optionsPlease select the new resource type选中后，点riEWy Container page1 Element groupHTML Redirect:Inheritance group:Inheritance group configuration_j Text file匡1 JSP尅 External Linkv Upload new filecom ndlkacon. booUtrapasks com ,alkacon. b

15、oot strap .farm atters com ndlkacon .bootstrapnsch emas com .alkacon rbootstrapn search com .alkacon .open cms.document; my.open cms.man my.open cms.school my.opencms 上电戏 modulE daises dements formatters resources schemasi.亡i shared iq sites“自Q default 自务 mvsite.心.templates ii-Q schoolQ system-ij ca

16、tegoriesj BackOfflineT Q Publish QueueSite | | View 占型ILocation /sites/mysite/Upload Search New Level Upera sharedq sitesSO default 百年 mvsitelii-Cj .tempJatess-Cj en 自 口 sch oolCj system 也口 categories Ci galleries Hi handler 童 login ft-Q lost-found 目口 modules com.alkacon.bootstrap.basics-_ com. al k

17、 a con .boot st rap.form alters | i-C_, com alk aeon boot st rap. sch em as | 占 com.alkacon.bootstrap.search；i-Q com.alkacon,opencms,documents | 国q my.opencms.man r m v.DDen cm s.sch oolI NameAdv a nedcontentUnlockLocked resourcesPublish directlyEdit metadata匚opyRename/MoveDeleteRelationsPermissions

18、PropertiesTitleType content_fo folder(2) 在属性窗口中，切换至U complete properties 下，点 unused propertites. 在 template选项中输入自已的bootstrap 模板。1.1.6复制组件所需要的文件夹到自已站点工作管理平台中，site 指到 / ,view 切换到 explore 。把/sites/default/.content所有文件夹复制到/sites/mysite/.co nte nt/下面。具体方法是左边选中/sites/default/.content，右边选中所需要的文件夹按右键，选COPY

19、图示略。H loc a I host: 8 OSO/open c ms/o pen 匚 ms/HyEtiem/靳 orkplac 启/Editors/editormEinAp5te 址TView EscplgrerReload ?) Preferences Help-ocation /slt&s/miyslte/R幻亏k: Pro|w*rlie C-tMiiiplele Propertiescategoryconflgtsmapcon t a in er .infocon tent-ccinveraoricon tent-encodingdfaulblileenabie-notificatio

20、nexportexportnanneimage,sizeinternallocalelocale-availablelogin-formnotificatiori-intervalGpencm s .dacuni ent aljpn .editorsearch .excludesearch.indexH loc a I host: 8 OSO/open c ms/o pen 匚 ms/HyEtiem/靳 orkplac 启/Editors/editormEinApsearch.subslte stream/system/rmodules/ my .opencm 5,te5trriodku le

21、/tem plates/ mairijspt&mplate-elem 色 n 恰1.1.7新建一个网页工作管理平台中，site 指到/ ,view 切换到explore 。打开site/mysite/en，然后点上面的new。建一个类型为 container page 文件，文件名为index.htmlH loc a I host: 8 OSO/open c ms/o pen 匚 ms/HyEtiem/靳 orkplac 启/Editors/editormEinApProject Offline0 Baek 少 Upload 电 search1 New riLvl upR Queue Site

22、 | /Location /sites/rn ysite/eh/ View Explar-er0i Reload 匡| Preferences Q Help百匸shared 右 q sitesf-o default 白口 nriysitE g-Cj roontent :占口丄m Up囱匚I SOI DOI systemr -Q曲诫阿龄60galleries handler login lost-found moduilecom .aLlkacon.bootslra p.basics com .alkacari .bDOtstira p.form alien comi .ailkaMH .boo

23、tslra p.sdh em as com .a Ikacon .bootstii a p.search：-O TOm,aLlkacQn,cpencm5r(foicwmentc i.Qi my.opencms.man my.opencms-sdhoai e-Q EY.opencm乳tfrstmockj俺 dasses elements formatters rourcj&5 sdi-ernas templates弓口 upNew囲 Container page莎 Extended folcter* Structured contents 挣 Eciottrap Template 挣 Other

24、 cution 5J匚rJlHcj!； tiemept croup 场 HTML Redirect-Inheritance: Inheritance group confiauXicri Text file n jsp M Esctenial Link片 Unload new HI色Nameargi.openiCrS-ade.configi-Cj ora.Qpencmsade.contain erpageContinue CanedupenLms woricpia匚亡 of Admin) - boogie ChromeH loc a I host: 8 OSO/open c ms/o pen

25、匚 ms/HyEtiem/靳 orkplac 启/Editors/editormEinApH loc a I host: 8 OSO/open c ms/o pen 匚 ms/HyEtiem/靳 orkplac 启/Editors/editormEinAp上图点continue后如下操作jeueSite FJ | View ExplorerT Q Reload 旳 Preferences Help-JpLocation /sites/mysite/en/Create new container pageName index.htmldit properties of the file_ ppe

26、nd .htmr suffix to nameFinish1Cancel1.1.8在网页可视化编辑中可视化操作1.181从工作台进入可视化编辑状态(1)工作管理平台中，site 指到测试站点,view 切换到explore 。左边打开H loc a I host: 8 OSO/open c ms/o pen 匚 ms/HyEtiem/靳 orkplac 启/Editors/editormEinApsites/mysite/e n点右边的index.html。浏览器将开index.html网页。OpenCms Workplace of (AdBackUpload a Search 严 NewLe

27、vel Up Location /en./E /sites/mysite/ |1|刖傅0TitkT使Size1EiCi .content y en | F一 -E8 占 I index.htmlcontainerpage 297Project OfflineExplorer*Publish QueueIL Iocalhost：8080/opencms/opencm5/system/workplace/editors/editor mainjsp(2)在浏览器打开的页面，点右边角的鸡眼睛。该页就处于可视化编辑状态= ELD * D3QE 9 C localhost：8080/opencms/op

28、encms/en/index.htmlEmpty Page ContainerPlease drop template rows in this container口点右边的鸡眼睛后将岀现左边的T具条I1.182 拖放 template 行列(1) 切换到template状态，点添加内容f fltlHWiur-iLF X 圍痒血1毎中弃曲荽 X gjX 萌 L M試航】X 匚湘需XM1H2F X | 天建些巾】厂 沈Upcnms | xopenc ms/e n/i n d ex., htm l(2)拖 template 行列 HU X0 r i = 貝殍 ri-i -ri a |a| . -

29、.u-inji n. ：-.*. 比礪.m 耳 ujj li r *rwae*七具、 耳zsIocdlhost3080/opncms/apnicm/eri/i n dcx. html(2) 拖template 列.与上类似，点添加图标，选中下面的template row，点result选中需要的列，拖入到背后的色块中。KTAI HSJHTdHL_Fi . local hast 606 O/opencms/opencins/en/ind ex. htmlrTypesPcateffiries foWers AdvanciRestrftsLIJ1Sccgle 亡|爾區百度口Template Rrri

30、pQtg row that builds the main template lyQut.Creates1.1.8.3 拖 layout 行列与拖template行列类似。可视化编辑切换到layout ，然后类似操作即可。Ampty Container z：Propertieslate column, drop layout rows inPage info t| | Element viewLiDefaultUndo changesAdvancedPr_fprpnrA;Template刚 Edit small elements拖好后的界面类似如下:localhostSMO/opencms/o

31、pencms/en/index-html秋錚閃（S百度口担叩0 / B B Empty ContainerRestrictedFull column - please drop content 別泗gnt$ hereEmpty Container |Full column please drop client eleirienU hg用.1.184拖text之类的组件与拖Iayout行列类似。可视化编辑切换到default，然后按增加图标，选中需要拖放的组件即可。駅 W曰匿 |_|ull colltypes Categorie Folders AdvancedKe suitsTextal li

32、nk.A simple text with an optiImageAn innate shows a box with mn im 白 gE and a des 匚iptio n wit JIcon BoxShows a colored box with icon that can link to more inform拖放后好，如果立即录入数据，将出现保存错误。请到opencms管理平台中 打开自已的站点，在.content下找到该组件对应的XML文件，按属性，填上标题与描棕。关键图示:OpenCms Workplace ot (Admin) Google Chrome:alhost:80

33、80/opencms/ope ncms/system/workplace/editors/editorjnain.jspctOfflinePublish Queue | Site 测试站点 | | View Explorerck $ Upload Search : New 生 Level Up | Location /.content/texts/0s/mysite/ :ontentI elertentgroups I flex ontentstriesI blalleyshowsI imaI imaI inhei|tance.groI layI listsI navig*ion$,sliI tabsl tem k textsInrowsBask: Piperties Individual Properties Shared Pro：7 t_OOOO2?5bl|fi /sites/mysite/.contehlj(|ts/t_00002.xmlTitleDescriptionNavigation TextTemplate LayoutTemplate ColorKeywords0