三月 24, 2019 | 前端與Vue

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

若你看過我之前寫的文章【Drupal教學】實作整合Vue.js到Drupal網站中,一定會發現在D7使用上面相對來說簡單許多,原因主要是D7在寫Vue語法可以直接寫在tpl裡面,而到了D8,tpl已經變成了twig的情況下,相對來說變得複雜了許多,若還想要用同樣的方式整合Vue到有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的語法才能印出來,這裡就不多做贅述 :)

<div id="app" class="custom-block-wrapper">
    <h2>自己建立一個Twig區塊</h2>

</div>

引用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

<div id="app" class="custom-block-wrapper">
    <h2>自己建立一個Twig區塊</h2>
    <p>Vue的Title:${ title }</p>
</div>

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

結論

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

參考資料