十二月 20, 2018 | 前端與Vue
【Drupal教學】實作整合Vue.js到Drupal網站中
(圖片來自於:https://blog.heliossolutions.in/drupal-vue-js-playing-together-craft-rich-web-experiences/)
前言
由於Vue.js是現在非常好用且火紅的前端框架,Drupal則是彈性最大的CMS框架。若能夠在Drupal的專案當中,將Vue.js整合進來開發,將會讓Drupal的網站有不可思議的畫面效果。這篇文章將來分享,如何使用有效的整合Vue.js到Drupal的網站專案當中。
備註
- 這篇文章並非在說明Decouple Drupal,因此,若你想要看的是這方面的文章,可以參考本網站其他篇的分享。
- 這篇文章以Drupal 7為主
實作項目
通過建立客製化模組(這裡以:VueExample模組為例)來建立一個頁面,並且搭配引入對應的Vue Library與加入js,來讓網頁能夠順利執行。
建立客製化頁面
在D7當中主要是通過hook_menu來新增頁面,這裡建立一個路徑為vue-example的頁面。
/**
* Implements hook_menu().
*/
function VueExample_menu()
{
$items = array();
$items['vue-example'] = array(
'title' => t('Vue Sample Page'),
'page callback' => 'vue_sample_page',
'access callback' => true,
);
return $items;
}
使用hook_theme來建立tpl
建立了客製化頁面之後,由於為了要方便使用Vue,這裡將會利用hook_theme來建立這個頁面自己的tpl,方便撰寫Vue的語法到html之中。
/**
*
* Implement hook_theme
*
*/
function VueExample_theme(){
$themes = array(
'vue-example-page' => array(
'template' => 'vue-example-page', //tpl檔案名稱:vue-example-page.tpl.php
),
);
return $themes;
}
而在建立此網頁內容時,要通過引入Vue的Library到網頁中,才能使用Vue,並且在js當中建立Vue實例。
- 加入Vue的Library
drupal_add_js('https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js', 'external');
- 在此網頁最下方加入寫Vue的JS檔案myVue.js要特別注意寫Vue的JS檔案要放在網頁的下方,所以在這裡需要加入scope的條件,告訴Drupal要將js檔案放到網頁最下方
drupal_add_js(drupal_get_path('module', 'VueExample').'/myVue.js',array('type'=>'file','scope'=>'footer'));
因此,整理上述的內容,用來建立網頁內容的函數,全部合起來就像下面的程式碼所示,最後將內容通過theme函數來指定要通過上面建立的tpl檔案來顯示。
//用來建立頁面內容的函數
function vue_sample_page(){
//引入Vue Library
drupal_add_js('https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js', 'external');
//加入寫Vue語法的JS檔案在網頁的底部
drupal_add_js(drupal_get_path('module', 'VueExample').'/myVue.js',array('type'=>'file','scope'=>'footer'));
//可以傳入任何想要的變數、物件、到tpl之中
$var = 'Drupal x Vue真有趣';
return theme('vue-example-page',array('myVars' => $var));
}
通過上面的VueExample_theme函數,則可以建立這個Theme專用的tpl,檔名為vue-example-page.tpl.php
vue-example-page.tpl.php檔案內容
在這個tpl當中可以在外層加入對應的id,並且引用Vue的語法到tpl當中,當然,也可以print出對應的變數。
<div id="app">
<h1>{{Title}}</h1>
<p><?php print $myVars;?></p>
</div>
寫Vue實例到myVue.js檔案
簡單的撰寫程式碼到myVue.js當中,就可以看到效果囉
new Vue({
el: '#app',
data: {
Title: 'Vue真有趣'
},
});
網頁畫面
小記
由於最近在開發客戶的專案時,遇到需要用到大量前端效果,所以就想整合Vue到Drupal的專案之中,讓我們可以藉由Vue的特性,更快且便利的解決所有畫面的特效與問題。這樣的方法,同樣也可以用在Block之中,有興趣的大家不妨也可以試試看。
PS:若想要試試看的,可以從這裡下載檔案安裝在自己的Drupal網站之中唷