十二月 20, 2018 | 前端與Vue

【Drupal教學】實作整合Vue.js到Drupal網站中

由於Vue.js是現在非常好用且火紅的前端框架,Drupal則是彈性最大的CMS框架。若能夠在Drupal的專案當中,將Vue.js整合進來開發,將會讓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的網站專案當中。

備註

  1. 這篇文章並非在說明Decouple Drupal,因此,若你想要看的是這方面的文章,可以參考本網站其他篇的分享。
  2. 這篇文章以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實例。

  1. 加入Vue的Library
    drupal_add_js('https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js', 'external');
    
  2. 在此網頁最下方加入寫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>
&lt;p&gt;<?php print $myVars;?>&lt;/p&gt;
&lt;/div&gt;

寫Vue實例到myVue.js檔案

簡單的撰寫程式碼到myVue.js當中,就可以看到效果囉

new Vue({
    el: '#app',
    data: {
        Title: 'Vue真有趣'
    },
});

網頁畫面

小記

由於最近在開發客戶的專案時,遇到需要用到大量前端效果,所以就想整合Vue到Drupal的專案之中,讓我們可以藉由Vue的特性,更快且便利的解決所有畫面的特效與問題。這樣的方法,同樣也可以用在Block之中,有興趣的大家不妨也可以試試看。

PS:若想要試試看的,可以從這裡下載檔案安裝在自己的Drupal網站之中唷