opencms9.5自建網(wǎng)站可視化拖拽環(huán)境搭建

1、1.1搭配自定義網(wǎng)站的可視化編輯環(huán)境在opencms官方網(wǎng)站中，很炫的展示了在示例站點(diǎn)上拖拉放組件，建立導(dǎo)航。但是按官方文檔中的建站指南進(jìn)行操作，無(wú)法達(dá)到其效果。經(jīng)過(guò)幾番探索，終于摸索到一條途 徑。Opencms示例站點(diǎn)，是基于bootsrap的。Bootstap重要的是柵格布局。典型特征是：看起來(lái)像表格，但是與表格有差別。主要是 一個(gè)柵格（像excel中單元格，或形象說(shuō)就是 格子方格）中可以再生成系列柵格（理論是無(wú)限制的，實(shí)際受設(shè)備的顯示屏約束）。這樣 在布局時(shí)，只要提供柵格布局，就不再提供什么頁(yè)頭，頁(yè)腳，左中右等等了。因?yàn)橐_(dá)到這種布局效果，只需拖三個(gè)柵格，分別表示頁(yè)頭、頁(yè)中、頁(yè)腳。頁(yè)中再

2、施三個(gè)柵格進(jìn)行左右右表示即可。如果還不能理解柵格，請(qǐng)移步到bootstap官方網(wǎng)站看柵格系統(tǒng)方面的教材。Opencm啲柵格布局，重點(diǎn)由行，列組成。所有的像label、text、list等這些組件 必 須存在柵格中，沒(méi)有柵格無(wú)法存在。Opencms在可視化拖放操作，分成了 template行列、 layout行列、拖放像 label、text等這類(lèi)組件三步操作。Template行列必須在con tai ner 容器中,layout行列必須存在template 行列中，而label、text必須存在layout 行列中。要搭建自定義網(wǎng)站的可視化編輯環(huán)境，需要借用opnecms的bootstap模板

3、，根蹤示例網(wǎng)站不難發(fā)現(xiàn)是：/system/modules/com.alkacon.bootstrap.formatters/templates/bootstrap-grid-page.jsp為了不影響官方的示例站點(diǎn)，請(qǐng)自建一個(gè)模塊，然后克隆這個(gè)文件。為了簡(jiǎn)化，請(qǐng)把 這個(gè)文件中的有關(guān)搜索的語(yǔ)句注釋掉：<cms:i ncludefile="%（li nk.weak:/system/modules/com.alkac on .bootstrap.formatters/search/co nfig.jsp:b4a9,: fc9-416c-11e3-81ba-000c297c001d）&

4、quot; />OPENCMS組件的數(shù)據(jù)是借助XMLt行存放的，該文件位于站點(diǎn)的.content下的相應(yīng)文件夾中。文件名 由該組件所在模塊的 module con figuration類(lèi)型且名為.config 的文件進(jìn)行指定。為了簡(jiǎn)化，強(qiáng)烈建議把示例站點(diǎn)中.content下的文件夾全部COP制自建 網(wǎng)站中來(lái)，并把這些文件夾清空（這是清除垃圾）綜上所述，要建立自定義網(wǎng)站的可視化編輯，總的工作是：建立自定義站點(diǎn)，建立自定 義模塊，復(fù)制并修改 bootstrap-grid-page.jsp 文件。建好后在自定義頁(yè)面 如何添加 templaout 行列，如何添加layout 行列，如何添加tex

5、t組件等。以下是較詳盡演練:1.1.1進(jìn)入opencms工作平臺(tái)安裝好并運(yùn)行opencms后。這里按默認(rèn)安裝示例。在瀏覽器中打開(kāi)網(wǎng)頁(yè)http:/localhost:8080/ope ncms/ope ncms/system/logi n輸入用戶密碼Admin admin.登陸。登陸后后臺(tái)，點(diǎn)擊 reopen window: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 O

6、pcnCmiS Workplace should have opened in a new windowIf this is not the cawr please ensure that you have no Poixip blocfker active Yo<j can re-try to open the Workplace window by cllckinQ on the Butt on bdIf the Workplace window has Ibeen successfully opened, yqui can dose this口H User name:(Admin)

7、Reop«ri win do啊1.1.2建立自定義模塊（1）進(jìn)入工作管理平臺(tái)中，site 指到/ ,view 切換到adminstrator，點(diǎn)名字中含mondule相關(guān)項(xiàng) 進(jìn)行 建立模塊。圖示如下：OpenCms Workplace of (Admin) Google ChromeB bca I host 8080/openc rn s/openc m s/system/wor kp lace/editors/ed itorjmain j sp¥ ViewProject OfflinePublish 過(guò) Qu&j電 | Site /Aciministraticm&

8、#165; Reload j Preferences QHelpAdministration ViewThis Is the m呂in administration view.r AdmiiiistratiooiProject ManagementPublish Queue$Module Management:AdminktrationSite ManagementDatabase ManagementCache Admin lratlwCon ten r TocfcAccountManagementSearch Mn cement令 Project Management j Publish

9、Queue孟 Aecwint Managemenit在彈出的窗口中，點(diǎn)new module然后 如下所示填入資料并確定。testmodulei-Module foldersAdministration Vie > Module Management >1 -New Module-Module informationPackage name:Module name:Module description: ?Module versionsModule group:Action class:Import script:Create Modulefolder:7*Create templa

10、tes subfolder: 7 xCreate elements subfolders 7 "Create formatters subfolder: J “Create resources subfolder: 7 vCreate schemas subfolder; ? :Create classes subfolder:?*1.1.3 復(fù)制并編輯 bootstap模板Opencms管理工作平臺(tái)中，site 指到/,view 切換到exploer狀態(tài)。左邊打開(kāi)/system/modules/com.alkacon.bootstrap.formatters/templates/.

11、按右鍵選 copy，出現(xiàn)窗口中復(fù)制到/system/modules/my.ope ncms.testmodule/templates/關(guān)鍵圖示為:opencms workplace or (Admmj - boogie Chromelocallhost：8080/Open( m$/of)encrTiV%yt*：irTVwork|.i|ti： tV<l£liturs/pditDr maiin-pprojeet OfflineT Publish Quew* site jBackWltw EKpiorerUplSa Search 汐 blew Level U*p | LxarioEm

12、QdulWs/cxHihaikaajfrbootstraPrfiannatters/tmplJtES/T Q Rdoad 國(guó) Prefer電ng Q Hdp' j shared j sites syttF 力Q30QCj旳曰Clcat«gorBes galleiie handler login lot-fgynd m ovulesn-O com .bootstrap-basks q com .alkaew .bootrap.fwm atters 也 Qfnerits formattershjinctions flSn pages resources search& t

13、emplates 匚口 m.alkacoo .boot strap.schemas corni,alkac：cmi !boo<5trap-5eard,i comlkacoo,opepcrns.dc>cu merit; my.opencms.man my.opencms.school ftly.Opercms.tEtmoduleOaIA:-.¥E.;E.;FUFOaecuclas&es elements formatter? resources schism asCopy resource: /system /tes/ bootstrs p- arid- Eaqei

14、spTirtle： Grid Bout肚陽(yáng)p PageState: unchsngsdPermalinks: 1:/" ：O/apEricm 5/opencm si'perm alin k/cSaQ'S 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選中復(fù)制后文件，重命名為 mai n.jsp.并打開(kāi)編輯。這兩者都是選中文件，按右鍵。編輯時(shí)注釋掉如下語(yǔ)句。<cms:i nc

15、ludefile="%(l in k.weak:/system/modules/com. fc9-416c-11e3-81ba-000c297c001d)" />關(guān)鍵操作示例圖如下:Nameitipencms/opencms/system/workpldce/editors/editor mainjspum Import Module xith h/Hpms/Qpencms/system/workplace/editors/editorrnain.jsp114建立自定義站點(diǎn)UpenCms Workplace of (Admin)> Publish y Queue

16、 Site /h * Ne;v C®1 Level Up Location /system/modules/myopencnnslestmoduIe/templates/bootstap-Qid-pgx jsp Grid Bootstrap Page con la i n e rpa ge_tem plat e直到出現(xiàn)有site、module等英文單詞的主界面。Author info * Resources , Dependencies , Resourcetypes Print tQ Delate(1)進(jìn)入工作管理平臺(tái)中，site指到/,view 切換到adminstrator，點(diǎn)

17、右邊的UPPublish Queue | Site 7Q Reload 國(guó) Preferelentap.basics-ap.farm atteR apchemas ap.search n$fdocurnent<Permissio nsChange navigation AdvancedHistory Properties選中他按右鍵會(huì)出現(xiàn)功 能菜單這是編輯這杲復(fù)制這是重命名與移動(dòng)Edit sourcecodeCopyRename./MoveDeleteRelationsOpenCms Workplace of (Admin) - Google ChromeExplorerAdminist

18、ration(2)進(jìn)入主界面點(diǎn) site mangagementAccountProject ManagementPublish QueueDatabaseKAManagementle 卜ImnagementSearch Management0Scheduled JobsSite Management Zache AdministrationContent ToolsOpEnCms Workplace of (Admin) - Google Chromeencms/system/workplace/editors/editor main.jspPublishQueue Site | /View

19、 Administration3 |0 Reload 回 Preferences QAdministration ViewAdministration(2) 在site mangement界面中，點(diǎn)new site 輸入如下資料。encms/system/workplace/editors/editoirmain.jspPublish X)Queue Site/ TViewAdministrationT代jfninhtf白tion wiav > Site Management > Site details: > 二Edit site進(jìn)入工作管理平臺(tái)中，site 指到/ ,vi

20、ew 切換到explore 。選中site/mysite, 點(diǎn)new，選folder。新建一個(gè)en的文件夾。選中folder時(shí)輸入文件名后，其他不要管 確定即可。j localhost:8080/opencms/opencms/system/workplace/editors/editor main.jspOfflineProjectExplorerSiteViewLevel UpExtended folderO FolderStructured contentsBootstrap TemplateOther optionsPlease select the new resource type

21、選中后，點(diǎn)riEWy Container page1 Element groupHTML Redirect:Inheritance group:Inheritance group configuration_j Text file匡1 JSP尅 External Linkv Upload new filecom ndlkacon. booUtrap±asks com ,alkacon. boot strap .farm atters com ndlkacon .bootstrapnsch emas com .alkacon rbootstrapn search com .alkaco

22、n .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 自務(wù) mvsite.心.templates ii-Q schoolQ system-i£j categoriesj<)gallerieshandlerh(2j loin 勺匸 lost-found Q modulesI io j申Q!旳|旳j J ©Q! 4i I心

23、 i I耳Qi I ! D templates Q org.opencmSKadexonfig org.opencms.adexontainerpagePublish jJ QueueLocation /sites； rnysite/NewB'1.1.5給站點(diǎn)文件夾指定template(1) 工作管理平臺(tái)中，site 指到/ ,view 切換到explore 。打開(kāi)site/mysite/ , 選en按右鍵，選屬性。Project> BackOfflineT Q Publish QueueSite' | | View 占型ILocation /sites/mysite/U

24、pload 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 a con .boot st rap.form alters | i-C_, com <alk aeon boot st rap.

25、sch em as | 占£ com.alkacon.bootstrap.search；i-Q com.alkacon,opencms,documents | 國(guó)q my.opencms.man r m v.DDen cm s.sch oolI NameAdv a nedcontentUnlockLocked resourcesPublish directlyEdit metadata匚opyRename/MoveDeleteRelationsPermissionsPropertiesTitleType content_fo folder(2) 在屬性窗口中，切換至U complet

26、e properties 下，點(diǎn) unused propertites. 在 template選項(xiàng)中輸入自已的bootstrap 模板。1.1.6復(fù)制組件所需要的文件夾到自已站點(diǎn)工作管理平臺(tái)中，site 指到 / ,view 切換到 explore 。把/sites/default/.content所有文件夾復(fù)制到/sites/mysite/.co nte nt/下面。具體方法是左邊選中/sites/default/.content，右邊選中所需要的文件夾按右鍵，選COPY 圖示略。H loc a I host: 8 OSO/open c ms/o pen 匚 ms/HyEtiem/靳 ork

27、plac 啟/Editors/editormEinAp5<te 址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-notificationexportexportnanneimage,sizeinternallocalelocale-ava

28、ilablelogin-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/tem plates/ mairijspt&mplate-elem 色 n 恰1.1.7新建一

29、個(gè)網(wǎng)頁(yè)工作管理平臺(tái)中，site 指到/ ,view 切換到explore 。打開(kāi)site/mysite/en，然后點(diǎn)上面的new。建一個(gè)類(lèi)型為 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 riLv«l upR Queue Site | /Location /sites/rn ysite/eh/ View

30、 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 .bootslra p.sdh em as com .a Ikacon .boot

31、stii a p.search：-O TOm,aLlkacQn,cpencm5r(foicwmentc i.Qi my.opencms.man my.opencms-sdhoai e-Q EY.opencm乳tfrstmockj俺 dasses elements formatters r«ourcj&5 sdi-ernas templates弓口 upNew囲 Container page莎 Extended folcter* Structured contents 掙 Eciottrap Template 掙 Other cution 5J匚rJlHcj!； tiemept

32、 croup 場(chǎng) 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 匚 ms/HyEtiem/靳 orkpla

33、c 啟/Editors/editormEinApH loc a I host: 8 OSO/open c ms/o pen 匚 ms/HyEtiem/靳 orkplac 啟/Editors/editormEinAp上圖點(diǎn)continue后如下操作jeueSite FJ | View ExplorerT Q Reload 旳 Preferences Help-JpLocation /sites/mysite/en/Create new container pageName index.htmldit properties of the file_ ppend ".htmr suffix

34、 to nameFinish1Cancel1.1.8在網(wǎng)頁(yè)可視化編輯中可視化操作1.181從工作臺(tái)進(jìn)入可視化編輯狀態(tài)(1)工作管理平臺(tái)中，site 指到測(cè)試站點(diǎn),view 切換到explore 。左邊打開(kāi)H loc a I host: 8 OSO/open c ms/o pen 匚 ms/HyEtiem/靳 orkplac 啟/Editors/editormEinApsites/mysite/e n點(diǎn)右邊的index.html。瀏覽器將開(kāi)index.html網(wǎng)頁(yè)。OpenCms Workplace of (AdBackUpload a Search 嚴(yán) NewLevel Up Location

35、 /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)在瀏覽器打開(kāi)的頁(yè)面，點(diǎn)右邊角的雞眼睛。該頁(yè)就處于可視化編輯狀態(tài)= ELD® * D3QE« 9 C localhost：8080/opencms/openc

36、ms/en/index.htmlEmpty Page ContainerPlease drop template rows in this container口點(diǎn)右邊的雞眼睛后將岀現(xiàn)左邊的T具條I®1.182 拖放 template 行列(1) 切換到template狀態(tài)，點(diǎn)添加內(nèi)容f fltlHWiur-i'LF 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'

37、 »= ' 貝殍 ri-i -ri a |a| . - .u-inji n". ：-.*. 比礪.m 耳 ujj li r *rwae*七具、 耳zsIocdlhost3080/opncms/apnicm/eri/i n dcx. html(2) 拖template 列.與上類(lèi)似，點(diǎn)添加圖標(biāo)，選中下面的template row，點(diǎn)result選中需要的列，拖入到背后的色塊中。KTAI HSJHTdHL_Fi . local hast 606 O/opencms/opencins/en/ind ex. htmlrTypesPcateffiries foWers Advanc«iRestrftsLIJ1Sccgle 亡|爾區(qū)百度口Template R©rripQtg row that builds the main template lyQut.Creates 拖 layout 行列與拖template行列類(lèi)似?？梢暬庉嬊袚Q到layout ，然后類(lèi)似操作即可。Ampty Container z：Propertieslate column, drop