三月 24, 2019 | 前端與Vue

【D8 教學】如何整合Vue.js與Twig到你的D8網站之中

若你看過我之前寫的文章【Drupal教學】實作整合Vue.js到Drupal網站中，一定會發現在D7使用上面相對來說簡單許多，原因主要是D7在寫Vue語法可以直接寫在tpl裡面，而到了D8，tpl已經變成了twig的情況下，相對來說變得複雜了許多，若還想要用同樣的方式整合Vue到有Twig的D8網站，我們該如何來做呢？這篇文章將會詳細的介紹。

前言

建立客製化區塊

若你目前使用D8，但還不會建立客製化模組，那麼請你一定要參考以下之前我分享的文章

使用Drupal Console建立客製化Block

在這篇文章中，有詳細的介紹，如何使用Drupal Console來建立模組，相較於Drupal 7，個人覺得更為方便且輕鬆。

接下來，將會開始進行建立模組、建立區塊、建立函式庫、建立Twig theme 一系列的步驟囉。

一句指令快速建立d8_custom_module模組

D8在模組開發上面，若要自行用手工打，個人覺得太容易出錯了，若有好用的指令，何不使用呢：），請直接複製貼到你的Terminal，就OK了。

$ drupal generate:module  \
--module="d8 custom module" \
--machine-name="d8_custom_module" \
--module-path="modules/custom" \
--description="My Awesome Module" \
--core="8.x" \
--package="Custom" \
--module-file --composer --test --twigtemplate="yes" --learning --\
uri="http://default" --no-interaction

上述指令成功後，您應該會得到跟我一樣的目錄結構，這樣你就成功囉。

一句指令快速建立區塊

在Drupal Console的指令當中，可以很方便的在指定的模組內建立我們想要的Plugin。因此，現在要在d8_custom_module模組當中建立一個客製化模組，同樣的也是一句指令即可。

$ drupal generate:plugin:block  \
  --module="d8_custom_module"  \
  --class="DefaultBlock"  \
  --label="Custom Vue Block"  \
  --plugin-id="custom_vue_block" \
  --theme-region="content" \
  --no-interaction

上述指令成功以後，你就會多了一個Block的Plugin囉

啟用模組並且放到網站上吧

啟用模組後，在區塊頁面佈局的地方，就可以把“Custom Vue Block”放到網站中了，我這裡為了方便Demo，是直接放到了網站的內容區域，如下圖因此，放置完畢後，就可以在網站中看到他囉

來建立Twig Theme吧

在建立完畢了區塊之後，重點當然就是要設法客製化區塊的內容，並且使用Twig來自定相關的Class與樣式囉。由於我們在使用Drupal Console建立模組的時候，就有加入了要使用twigtemplate的選項。因此，在產生Block的樣式的時候，是可以直接引用此Theme的。

開啟 src/Plugin/Block/DefaultBlock.php 檔案在區塊的Build函數裡面，加入#theme，即可讓此區塊是通過d8-custom-module.html.twig所建立


class DefaultBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $build = [];
    $build['custom_vue_block']['#theme'] = 'd8_custom_module';
    $build['custom_vue_block']['#markup'] = 'Implement DefaultBlock.';
    return $build;
  }

}

修改 d8-custom-module.html.twig 檔案在引用了theme以後，接著開啟twig的檔案，可以照我的範例，略為修改以下，清除快取之後，應該在網頁上，就會有內容出現了，當然，由於現在是使用自建的Twig，所有的變數也都會需要用twig的語法才能印出來，這裡就不多做贅述：）


&lt;div id="app" class="custom-block-wrapper"&gt;
    &lt;h2&gt;自己建立一個Twig區塊&lt;/h2&gt;

&lt;/div&gt;

引用Vuejs進來吧

OK，Vue真的是很好用～在D7中，可以直接使用drupal_add_js的方法來加入Vuejs的函數庫與對應的JS實例。

引用外部library

在D8當中，要加入JS或CSS需要先建立libraries的設定檔案，然後再使用#attach的方式引用其函數庫

建立檔案 d8_custom_module.libraries.yml 檔案在這裏，需要建立兩個library，一個是等等要用來寫Vue語法的js，這裡叫做custom-vue-js，另外一個則是Vue的函數庫。比較需要注意的是js引入的位置。在D7的時候，可以很方便的指派這支JS要放置的位置，而到了D8，預設所有位置都是放置在Footer的地方，因此，在這裏Vue的函數庫需要放在Head的地方才能讓Vue順利執行，只需要加入header:true的條件即可。

custom-vue-js:
  version: 1.x
  js:
    js/custom-vue.js: {}

vue:
  version: 1.x
  header: true
  js:
    https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js: { external: true }

在Block引用Library吧

建立好了library的宣告之後，只需要在你要用到的地方，加入attach引用他們即可

class DefaultBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $build = [];
    $build['custom_vue_block']['#theme'] = 'd8_custom_module';
    $build['custom_vue_block']['#markup'] = 'Implement DefaultBlock.';
    $build['custom_vue_block']['#attached']['library'] = ['d8_custom_module/custom-vue-js','d8_custom_module/vue'];
    return $build;
  }

}

注意Twig與Vue的衝突問題

當然，在引用外部的Vue之後，也許你已經準備好要開始開發Vue了，但是，由於Twig印出函數的方式 {{ }} 與Vue是相同的，因此，若你在twig的檔案裡面要印出變數，將會總是出現空值的情況，這個時候則需要通過delimiters來進行修正

custom-vue.js 因此，修正過後的js變成如下

new Vue({
    el:'#app',
    delimiters: ['${', '}'],
    data(){
        return {
            title: 'Vue 真有趣'
        }
    }
});

d8-custom-module.html.twig


&lt;div id="app" class="custom-block-wrapper"&gt;
    &lt;h2&gt;自己建立一個Twig區塊&lt;/h2&gt;
    &lt;p&gt;Vue的Title：${ title }&lt;/p&gt;
&lt;/div&gt;

最後當然就可以順利執行囉

結論

D8引用的Vue以後，真的讓開發上面更方便且容易。對於擅長前端的工程師來說，處理程式方便也相對來說更為容易，可以不用太了解D8本身，一樣也可以開發出了不起的效果，是個值得學習的技能囉～ Enjoy

參考資料

下載參考程式碼：https://github.com/cobenash/d8_custom_module
Vue Delimiters：https://vuejs.org/v2/api/#delimiters
Create Custom Block : https://www.drupal.org/docs/8/creating-custom-modules/create-a-custom-block

hashtags:

#整合Vue與Drupal

#vue

#D8