十月 15, 2019 | 前端與Vue

【D8教學】Drupal8超新手入門開發系列-特定頁面載入JS

前言 若沒有特別區分JS於何時載入的話,基本上網站的每個頁面都會載入,問題是有些JS只針對特定頁面有功效,若每個頁面都載入不是很奇怪,所以本篇將介紹如何切割JS,限制JS只在特定頁面載入,不會在其他頁面載入。 JS.library Drupal8中正常我們寫完一支JS後會放入your_theme.libraries.yml,範例如下:

前言

若沒有特別區分JS於何時載入的話,基本上網站的每個頁面都會載入,問題是有些JS只針對特定頁面有功效,若每個頁面都載入不是很奇怪,所以本篇將介紹如何切割JS,限制JS只在特定頁面載入,不會在其他頁面載入。

JS.library

Drupal8中正常我們寫完一支JS後會放入your_theme.libraries.yml,範例如下:

global-styling:
  version: VERSION
  js:
    //cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js: { type: external, minified: true }
    //unpkg.com/swiper/js/swiper.min.js: { type: external, minified: true }
    js/ga-event.js: {} 
    js/banner-parallax-scrolling.js: {}
    js/tab-list.js: {}
    js/read-more-toggle.js: {}
    js/fade-in.js: {}

爾後會到yourtheme.info.yml加入此library(global-styling),範例如下:

name: yourTheme
type: theme
description: 'Theme'
version: 1.0
core: 8.x
base theme: bootstrap_sass

libraries:
  - yourtheme/global-styling

這是正常Drupal管理JS的方式,但這樣會在每個頁面都載入這個global-styling的全部JS。 若要讓JS只在特定頁面載入,我們可以回到yourtheme.libraries.yml建立一個新的library,如下:

global-styling:
  version: VERSION
  js:
    //cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js: { type: external, minified: true }
    //unpkg.com/swiper/js/swiper.min.js: { type: external, minified: true }
    js/ga-event.js: {} 
    js/banner-parallax-scrolling.js: {}
    js/tab-list.js: {}
    js/read-more-toggle.js: {}
    js/fade-in.js: {}

report-toggle-library:
  js: 
    js/report-toggle.js: {}
    js/pdf-target.js: {}

建立一個新的library叫report-toggle-library,這個library內放了兩支JS,接著我們需要使用到Drupal針對Page的page_attachments_alter。

page_attachments_alter

建立新的library後,到yourtheme.theme內加入下面程式碼:

function your_theme_page_attachments_alter(&$page)
{
    $path = $current_path = \Drupal::service('path.current')->getPath();
    if ($path == '/annual-reports') {
        $page['#attached']['library'][] = 'your_theme/report-toggle-library';
    }
    
}

這樣預處理完就能針對符合特定路徑才載入我們所需要的library,其他路徑則不會載入,如此一來就能減少資源的浪費,不會每個頁面都載入一堆JS。

結語

在小型專案上開發JS可能效能上不太會在意,因為JS的量不多,倘若專案規模變大,任何一支JS都有可能影響使用者體驗,確保JS只在正確的頁面載入而不影響其他頁面,這是工程師應該有的基本觀念,期許此篇文章能給你建立良好的開發模式。