drupal8 Adding stylesheets(css)and JavsScript(js)

參考地址：https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
In Drupal8,stylesheets(css)and javasctipt(js)are loaded through the same system for modules(code) and themes,for everying:asset libraries.
在drupal8中加載樣式和javascript，對于module和theme通過相同的系統，使用一切資產庫
Drupal use a high-level principle:assets(css or js)are still only loaded if you tell drupal it should load them.Drupal does not load every assets on every page,because it slows down front-end performance.
drupal使用高層原則：資產（css或js）只有在你告訴drupal的時候才會加載。drupal不會加載所有資源在頁面，這樣會降低前段性能。

Differences from drupal7

Only css,js that is required on a page will be loaded.jquery ,for example is no longer automatically loaded unless explicity specified in .libraries.yml.if your theme requires jquery or other assets you want to load on all pages,add theme in .libraries.yml.
css，js被需要的時候才加載到頁面，例如jquery不在自動加載，除非在。libaries.yml中明確指定。如果您的主題需要jquery或其他資源加載到所有的頁面，將它們添加到.libraries.yml.

The process

1. 保存css或js文件到一個文件中，使用適當的命名約定和文檔結構
2. 定義一個“庫”，它可以同時包含css和js文件
3. “attach”庫到所有的頁面，到特定的Twig模板，到一個渲染的元素通過預處理函數中。

   Defining a library

   Define all of you asset libraries in a*.libraries.yml file in you theme folder.如果我們的主題名稱是fluffiness,則文件名為fluffiness.libraries.yml.在文件中的每個“庫”都是一個詳細的css和js文件條目，like this:

   cuddly-slider:
   version: 1.x
   css:
   theme:
     css/cuddly-slider.css: {}
   js:
   js/cuddly-slider.js: {}

   在這個例子中，cuddly-slider.js文件位于你主題目錄下的js目錄中。
   記住，drupal8不在默認加載jQuery到所有的頁面。因此，如果cuddly-slider需要jQuery,我們必須定義依賴到核心庫（Drupal core provides jQuery ,not a module or theme）.定義依賴庫使用擴展名后面跟斜線/，跟庫名，在這個例子里是core/jquery.如果其他的庫需要cuddly-slider,它應該定義為fulffiness/cuddly-slider.不能將單獨的文件聲明為依賴庫。
   我們更新上面：

   cuddly-slider:
   version: 1.x
   css:
   theme:
     css/cuddly-slider.css: {}
   js:
   js/cuddly-slider.js: {}
   dependencies:
   - core/jquery

   大多數主題將使用一個global-stying資源庫，CSS文件被加載到每個頁面上當主題處于激活狀態。

   global-styling:
   version: 1.x
   css:
   theme:
     css/layout.css: {}
     css/style.css: {}
     css/colors.css: {}
     css/print.css: {media: print}

   我們看到media屬性可以作為值被定義在css資源聲明的結尾。
   

   Asset loading order 加載順序

   正如你期望的那樣，文件列出的順序是它們的加載順序。默認，所有js資源加載在頁腳footer中。
   對于重要的UI元素使用了js的,不能被顯示，除非相應的js被運行，如果需要可以被加載到頁面header中。like this:

   js-header:
   header: true
   js:
   header.js: {}

   設置header屬性為true,表示該庫中javascript資源位于重要路徑中，并且應該從header中加載。

   CSS properties

   以下屬性是可選的

屬性	說明	示例	補充
browses	基于瀏覽器加載	{IE: 'lte IE 9','!IE':false}
group	按組進行資源匯總。默認是SMACS組	很少使用	/
media	媒介類型	{media: print}
minified	資源是否已經壓縮,默認false	{type:external,minified:true}	/
preprocess	資源是否聚合,默認true	{preprocess: false}	/
type	資源來源,默認file	{type:external,minified:true}	/
weight	調整相對其他資源的順序（在相同的S'MASC組內）,默認0；-50到50之間	{weight:1}	/

JS properties

下面屬性是可選的

Overriding and extending libraries 覆蓋和擴展庫

我們必須到.info.yml中來覆蓋.libraries.yml中定義的庫。我們既可以使用libraries-override覆蓋，也可以使用libraries-extend來擴展。我們添加到*。info.yml的覆蓋將被子主題繼承。
libraries-override
需要使用覆蓋時的邏輯：

1. Use the original module(or core) namespace for the library name.
2. Use the path of the most recent override as the key.
3. That path should be the full path to the file.
   Example

   libraries-override:
   contextual/drupal.contextual-links:
   css:
     component:
       /core/themes/stable/css/contextual/contextual.module.css: false

   contexttual/drupal.contextual-links 是核心庫的命名空間，同時/core/themes/stable/css/contextual/contextual.module.css是要覆蓋核心庫的全路徑，這里使用false進行覆蓋
   這里需要注意的是css: 和 component: 反應了被覆蓋庫的結構，最后一行是實際文件系統路徑。
   這里需要注意的是，當被覆蓋的文件結構發生變化，則會破會上面的路徑，這里建議使用stream wrappers.
   下面是使用librares-override的一些方式

   libraries-override:
   #替換整個庫
   core/drupal.collapse: mytheme/collapse
   #替換一個資源
   subtheme/library:
   css:
     theme:
       css/layout.css: css/my-layout.css
   #替換覆蓋stable中的資源
   contextual/drupal.contextual-toolbar:
   css:
     component:
       /core/themes/stable/css/contextual/contextual.toolbar.css: css/contextual/toolbar.css
   #替換一個核心模塊的js資源
   toolbar/toolbar:
   js:
     js/views/BodyVisualView.js: js/views/BodyVisualView.js
   #移除一個資源
   drupal/dialog:
   css:
     theme:
       dialog.theme.css: false
   #移除整個庫
   core/modernizr: false

   libraries-extend
   這對于中主題中對某些組件進行不同的設計是完美的，同時不會應用到全局css中，即自定義組建外觀，而無需在每個頁面上加載css

   #擴展drupal.user庫，從d8dev的baidu-map庫添加資源
   libraries-extend:
   fulffiness/drupal.user:
   - d8dev/baidu-map #主題名|模塊名/庫名

   Attaching libraries to page(s) 添加庫到頁面

   我們加載的某些庫可能并不是所有頁面都需要。為了獲得更快的性能，請不要在沒有使用庫的地方加載它們。以下是如何選擇性加載庫的示例

   Attaching a library via a Twig templage 通過Twig模板加載庫

   attach_library()函數可以在任何*.html.twig使用，如：

   {{attach_library('fulffiness/cuddly-slider')}}
   <div>Some fluffy markup {{message}}</div>

   Attaching a library to all pages:

   要將庫添加到使用主題的所喲頁面，請在主題的*.info.yml文件中的libraries關鍵字生命如下：

   name: Example
   type: theme
   core: 8.x
   libraries:
   - fulffiness/cuddly-slider

   在編輯.info.yml或者.libraries.yml文件后，記得要清除緩存

   Attaching a library to a subset of pages

   在某些情況下，您不需要您的庫對所有頁面有效，只適用于頁面的子集。例如：只顯示某個區塊時，或在顯示某個節點類型時
   主題可以通過在THEMENAME.theme文件(在主題的根目錄下)中實現THEME_preprocess_HOOK()函數來實現，使用主題的機器名替換“THEME”,使用主題鉤子名稱的機器名替換“HOOK”.
   例如，如果你想把JavaScript附件到maintenance page(maintenance-page.html.twig)，那么“HOOK”部分就是“maintenance_page”,函數看起來如下：

   <?php
   function fulffiness_preprocess_maintenance_page(&$variables){
   $variables['#attached']['library'][] = 'fulffiness/cuddly-slider';
   }

   你可以為其他主題鉤子做類似的事情，當然你的函數也可以有邏輯，比如監測在“block”鉤子中預處理那個區塊，“node”鉤子中處理是那個節點類型。
   重要提示！在這種情況下，您需要指定與您的條件相對應的緩存性元數據！最常見的例子，基于當前路徑由附加某個庫的情況：

   <?php
   function fulffiness_preprocess_page(&$variables){
   $variables['page']['#cache']['context'][] = 'route';
   if(\Drupal::routeMatch()->getRouteName() === 'entity.node.preview'){
       $variables['#attached']['library'][] = 'fulffiness/mode-preview';
   }
   }

   Attaching configurable JavaScript 添加可配置的js

   在某些情況下，您可能需要將JavsScript添加到依賴于一些計算PHP信息的頁面上。
   In this case,create a JavaScript file,define and attach a library just like before,but also attach JavaScript setting and have that JavsScript file read those settings, via drupalSettings. However,to make drupalSettings available to our JavaScript file, we have to do the same works as we had to do make jQuery available:we have to declare a dependency on it.
   這樣就變成：

   cuddly-slider:
   version: 1.x
   js:
   js/cuddly-slider.js: {}
   dependencies:
   - core/jquery
   - coer/drupalSettings
   - core/drupal

   和

   <?php
   function fulffiness_page_attachments_alter(&$page){
   $page['#attached']['library'][] = 'fluffiness/cuddly-slider';
   $page['$attached']['drupalSettings']['fluffiness']['cuddlySlider']['foo'] = 'bar';
   }

   這里的‘bar’是一個計算的值（注意清除緩存）
   然后cuddly-slider.js可以訪問drupalSettings.fluffiness.cuddlySlider.foo( and it will === 'bar' ):

   (function($,Drupal,drupalSettings){
   'use strict';
   Drupal.hehaviors.mybehaviror = {
       console.log( drupalSettings.fulffiness.cuddlySlider.foo );
   }
   })(jQuery,Drupal,drupalSettings);

   Adding attribrutes to script elements 為script標簽添加屬性

   Example:

https://maps.googleapis.com/maps/api/js?key=myownapikey&signed_in=true&libraries=drawing&callback=initMap:
  type: external
  attributes:
    defer: true
    async: true
    data-test:map-link

結果為：

<script src="https://maps.googleapis.com/maps/api/js?key=myownapikey&signed_in=true&libraries=drawing&callback=initMap" async defer data-test="map-link"></script>

CDN/externally hosted libraries CDN/外部托管庫

你可能希望使用外部CDN上的JavaScript-如網頁字體庫通常使用URL。這可以通過聲明為外部庫（type:external）來完成。

angular.angularjs:
  remote: https://github.com/angular
  version: 1.4.4
  license:
    name: MIT
    url: https://github.com/angular/angular.js/blob/master/LICENSE
    gpl-compatible: true
  js:
    https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js: { type: external, minified: true }

Inline JavaScript

(不推薦使用內聯樣式，故沒有主要測試)

內聯JavsScript是非常不鼓勵的。建議將內聯js放在一個文件中。這樣可以緩存js,也可以被刪除和檢查。

Inline JavsScript that generates markup

你想把它們放在一個自定義的區塊或一個Twig模板中
Example:

<script type="text/javascript"><!--
ad_client_id = "some identifier"
ad_width = 160;
ad_height = 90;
//--></script>
<script type="text/javascript" src="http://adserver.com/ad.js"></script>

Inline JavaScript that affects the entire page

Using any inline JavsScript is highly discouraged.

Inline JavaScript that is in integration module 內嵌在集成模塊中

Differences with Drupal7

1. hook_library_info()被替換為*.libraries.yml
2. 在drupal8中drupal_add_css()、drupal_add_js()、drupal_add_library()被移除，推薦使用#attached

上面是結合本人自己的理解整理的，如有錯誤請多多指教；其中也有些不甚明了的地方，請給予指正。