可視化頁面框架GrapesJS開發教程（三）- 與Drupal CMS整合
本文是介紹可視化頁面構建工具 GrapesJS開發教程系列篇之組件介紹ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，本系列主要是介紹GrapesJS開發以及與如何對接GrapesJS的可視化到其他系統⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，比如如何與CMS整合等相關內容⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。
我們之前介紹過幾篇關于GrapesJS的基礎開發ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，包括架構ⓚⓛⓜⓝⓞⓟⓠⓡⓢ、組件開發等⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，這篇主要介紹如何與Drupal進行整合⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，從而實現快速對Drupal的頁面⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾、LandingPage等進行編輯和制作⒜⒝⒞⒟⒠⒡⒢⒣⒤，通過GrapesJS和Drupal㈠㈡㈢㈣㈤㈥㈦，實現快速建站的目的ⓚⓛⓜⓝⓞⓟⓠⓡⓢ。
GrapesJS與Drupal的整合
上一篇我們講解GrapesJS組件里有兩個重要的元素 ：Component 和 Block❻❼❽❾❿⓫⓬⓭⓮⓯⓰。
Component 定義了一個組件的標簽是什么㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，有什么屬性①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯、方法☧☬☸✡♁✙♆。，、＇：∶；，在Canvas里如何展示ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，保存為HTML時又應該是什么結果⑰⑱⑲⑳⓪⓿❶❷❸❹❺。
Block 可以理解為是一個或多個 Component 組成的“代碼片段”❣❦❧♡۵。
那么與Drupal的整合中①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，我們重點就是通過Drupal來提供Block和Component웃유ღ♋♂，因此整合也有兩種模式
1. 僅創建Block⒜⒝⒞⒟⒠⒡⒢⒣⒤。
由于GrapesJS已經實現了常見的HTML元素的Component㈠㈡㈢㈣㈤㈥㈦，所以一些靜態化的組件可以直接通過Block來構建㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂。例如一個靜態Hero㈠㈡㈢㈣㈤㈥㈦、一個三列的Showcase☈⊙☉℃℉❅，一個廣告牌等☧☬☸✡♁✙♆。，、＇：∶；。這種方式優點明顯✺ϟ☇♤♧♡♢♠♣♥，開發簡單ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，因為組件就是常規的HTML+CSS構成☾☽❄☃，用戶也能方便的編輯其中的內容♀☿☼☀☁☂☄，缺點是僅能實現靜態內容㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，對于動態組件不適用⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。
2. Twig基本的Component♀☿☼☀☁☂☄。
可以實現Twig的解析器與Component①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，讓GrapesJS可以識別到Twig的一些語法ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，實現動態組件的編輯☈⊙☉℃℉❅。通過一定的映射關系①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，用戶可以借助GJS去編輯twig組件的參數❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣，這樣一來ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，開發者在開發組件時只需決定暴露什么參數給使用者ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，使用者也無需關心怎么讓組件有良好的展示㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，專注于內容構建❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣。不過這種形式的缺點也很明顯①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，就是組件的預覽效果和實際頁面通常有著較大差距⒜⒝⒞⒟⒠⒡⒢⒣⒤，譬如預覽的時候可能只是個占位區塊⑰⑱⑲⑳⓪⓿❶❷❸❹❺。
我們已經在Drupal里實現了一套框架來構建方便的構建GJS組件⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。在Drupal的docroot下新增了個widget目錄❻❼❽❾❿⓫⓬⓭⓮⓯⓰，此目錄的工作機制和結構和module一樣, 來看看具體的示例：
完整案例
我們找了一個計時器組件的完整代碼♀☿☼☀☁☂☄，里面包含了每一個步驟的注釋ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，通過整個代碼示例ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，就可以完全理解GrapesJS組件開發的基本流程①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，具體參考如下：
widget |- hero |- hero.info.yml |- hero.lib.yml |- hero.twig |- hero.js |- hero.css
這個是Drupal模塊的目錄結構ⓣⓤⓥⓦⓧⓨⓩ，可以通過plugin的方式動態注冊組件⑰⑱⑲⑳⓪⓿❶❷❸❹❺，重點介紹如下幾個文件：
1. hero.info.yml表明這是個widget♀☿☼☀☁☂☄，當檢測到.info.yml文件時⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，hero就作為這個組件的machine name被使用♦☜☞☝✍☚☛☟✌✽✾✿❁❃。
# hero.info.yml name: Hero description: "Hero block" type: widget category: hero
2. hero.lib.yml則定義了組件使用到的js和css
# hero.lib.yml
css:
hero.css: {}
js:
hero.js: {}
3. hero.twig是這個組件的模板ⓣⓤⓥⓦⓧⓨⓩ。
名稱是固定的 {machine_name}.twig①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯。在解析組件時⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，API會獲取hero.twig里的內容并返回給GrapesJSⓣⓤⓥⓦⓧⓨⓩ，而根據上面提到的✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，內容可以是普通HTML⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯，也可以是Twig語言①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，甚至可以是混合體ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ。GrapesJS會在解析內容時自動轉換為對應的Component
這里我們做了個特殊的Component來增強這些組件的使用⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。我們建立一個Component type叫twig_widget, 所有Drupal提供的widgetⓣⓤⓥⓦⓧⓨⓩ，默認都會被解析成該類型①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯。 twig_widget是個封閉的Component♦☜☞☝✍☚☛☟✌✽✾✿❁❃，用戶無法往里添加或刪除組件㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，所有內容是作為一個整體而存在ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，用戶只能編輯該組件暴露的屬性⑰⑱⑲⑳⓪⓿❶❷❸❹❺。
這種用法可以理解為“組件引用”☈⊙☉℃℉❅，當組件有樣式更新或功能更新時（更新必須是向前兼容的✺ϟ☇♤♧♡♢♠♣♥，如果有Breaking change⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，則必須創建新的組件）⑰⑱⑲⑳⓪⓿❶❷❸❹❺，用戶不需要重新編輯⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，頁面會自動獲得更新✺ϟ☇♤♧♡♢♠♣♥。
以hero組件為例ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，GrapesJS導出的HTML☾☽❄☃，會是如下結果
未來HERO一旦有HTML變化♦☜☞☝✍☚☛☟✌✽✾✿❁❃，或者CSS調整⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，只要其接收的參數不變♀☿☼☀☁☂☄，用戶都不需要重新編輯組件內容⒜⒝⒞⒟⒠⒡⒢⒣⒤。
那如果用戶有需要改動其中的一些內容怎么辦①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯？twig_widget提供了一個方法eject, 一旦用戶點選該方法ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，twig_widget會將內容提取ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，經由GJS解析拆散為小的獨立組件㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉。此操作不可逆☧☬☸✡♁✙♆。，、＇：∶；，一旦執行ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，意味著后續HERO的所有更新都不會對這個頁面的hero生效㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉。
在執行eject后❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣，GJS導出HTML結果如下：
GrapesJS已經將hero解析為一個div容器☧☬☸✡♁✙♆。，、＇：∶；，內有一個img組件㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂、一個h1標題⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯、一個h3標題⑰⑱⑲⑳⓪⓿❶❷❸❹❺，一個twig語法塊⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ。用戶可以刪除h3標題ⓣⓤⓥⓦⓧⓨⓩ，可以往里再添加一張圖片等㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂。
兩種模式想結合☧☬☸✡♁✙♆。，、＇：∶；，靈活運用㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，基本可以覆蓋大部分的場景需求㈠㈡㈢㈣㈤㈥㈦。一般而言♦☜☞☝✍☚☛☟✌✽✾✿❁❃，一個網站的UI都應該保持一致性❻❼❽❾❿⓫⓬⓭⓮⓯⓰，所以使用“引用”的方式即可保證這個效果❣❦❧♡۵，但有時候可能某個特殊的頁面需要對某個組件做出一些改動❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣，則可以使用方式二♦☜☞☝✍☚☛☟✌✽✾✿❁❃，在保留原組件框架的基礎上⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，做出一些定制ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ。
創作不易⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，轉載請注明出處❣❦❧♡۵！
更多GrapesJS開發以及Drupal CMS相關內容❣❦❧♡۵，請參考我們其他相關文章☈⊙☉℃℉❅，
1♦☜☞☝✍☚☛☟✌✽✾✿❁❃、常見開源可視化低代碼頁面構建框架對比
2①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯、開源可視化低代碼頁面構建框架GrapesJS介紹
3✵✶✷✸✹✺✻✼❄❅、開源CMS Drupal整合可視化構建工具GrapesJS（一）
4✺ϟ☇♤♧♡♢♠♣♥、常見的CMS平臺比較
5❣❦❧♡۵、在線展覽和多媒體展示建設方案
6☧☬☸✡♁✙♆。，、＇：∶；、構建英文網站應該用什么框架웃유ღ♋♂？
7☈⊙☉℃℉❅、如何基于開源系統構建資料庫/文檔庫平臺
