Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Drupal 8 版型開發變革

Drupal 8 為了簡化版型開發的語言,吸引更多設計師加入 Drupal 前端開發,改用 Twig 取代使用已久的 PHPTemplate。
將藉此講題來探索當改用 Twig 將會帶來什麼樣的變化?原本習慣的 PHPTemplate 該怎麼轉換使用方式呢?

  • Identifiez-vous pour voir les commentaires

Drupal 8 版型開發變革

  1. 1. DRUPAL 8 版型開發變⾰革 Chris Wu
  2. 2. TIME TO START WITH DRUPAL 8
  3. 3. CODING STANDARD SMACSS & BEM
  4. 4. SMACSS - Scalable and Modular Architecture for CSS Base Layout Module State Theme
  5. 5. BEM .block__element--modifier Block Element Modifier
  6. 6. BLOCK    node      __  ELEMENT    title        __  ELEMENT    content      BLOCK    field          __  ELEMENT  label          __  ELEMENT  items                -­‐-­‐  MODIFIER    active       BEM
  7. 7. NO CLASS In Drupal Core
  8. 8. CLASSY The New Core Theme
  9. 9. THEME LAYER Classy SparkBartik Seven Drupal Core
  10. 10. THEME structure changed
  11. 11. [theme].info.yml [theme].theme THEME - STRUCTURE CHANGED /theme [theme].libraries.yml [theme].breakpoin.yml
  12. 12. name:  Foo   type:  theme   base  theme:  classy   description:  'Foo  bar  theme'   core:  8.x   libraries:      -­‐  foo/global-­‐styling      -­‐  foo/bar   regions:      header:  Header      primary_menu:  'Primary  menu'      secondary_menu:  'Secondary  menu' .INFO.YML
  13. 13. TEMPLATING
  14. 14. Template Suggestion Pattern: node--[type|nodeid].tpl.php 1 node--nodeid.tpl.php 2 node--type.tpl.php 3 node.tpl.php Pattern: node--[type|nodeid].html.twig 1 node--nodeid.html.twig 2 node--type.html.twig 3 node.html.twig 標題⽂文字
  15. 15. TWIG no more theme_() and *.tpl.php
  16. 16. • 版型檔案不允許直接執⾏行  PHP  ,讓版型更為安全。   • 版型開發者不必再學  PHP   • 預設輸出時皆會  escape  ,減少  XSS  的可能性   //  This  really  shouldn't  be  allowed  to  work,  and  it  won't  in  D8.   <?php db_query('DROP TABLE {users}'); ?> FROM PHPTEMPLATE TO TWIG
  17. 17. {{  }}  "say"  something   {%  %}  "do"  something   {#  #}  "write"  something TWIG 101
  18. 18. – Drupal 8 {{  page.sidebar  }}   {{  page['#type']  }}
  19. 19. Here are some example of filters from the Twig engine. {{ 'drupal' | length }} //return: 6 {{ 'drupal' | upper }} //return: DRUPAL {{ 'drupal is awesome' | title }} //return: Drupal Is Awesome! {{ '<a href="#">drupal is awesome!</a>'| striptags | capitalize }} //return: Drupal is awesome! FILTER
  20. 20. Drupal offers some additional filters. Translation filters PHP:   <?php t('Content type'); ?> TWIG:   {{ 'Content type' | t }} //return: 內容類型 <a href="{{url('<front>')}}">{{'Home'|t}}</a> //return: ⾸首⾴頁 FILTER
  21. 21. {% for item in items %} {% if not loop.last %} <li{{ item.attributes }}> {{ item.content }} </li> {% endif %} {% endfor %} DO SOMETHING
  22. 22. {% set classes = [ 'block', 'block-' ~ configuration.provider|clean_class, 'block-' ~ plugin_id|clean_class, ] %} <div{{ attributes.addClass(classes) }}> {{ title_prefix }} {% if label %} <h2{{ title_attributes }}>{{ label }}</h2> {% endif %} {{ title_suffix }} {% block content %} <div{{ content_attributes.addClass('content') }}> {{ content }} </div> {% endblock %} </div> {% BLOCK %} {# block.html.twig #}
  23. 23. {# block--system-powered-by-block.html.twig #} {% extends "block.html.twig" %} {% block content %} <div{{content_attributes.addClass('content')}}> {{ content }} </div> {% endblock %} {% BLOCK %}
  24. 24. #sites/default/settings.php:     $settings['container_yamls'][]  =  DRUPAL_ROOT.'/sites/development.services.yml';   $settings['cache']['bins']['render']  =  'cache.backend.null';   #sites/development.services.yml:   parameters:      twig.config:          debug:  true ENABLE DEBUGGING
  25. 25. PHP:   <?php  var_dump();  ?>   TWIG:   {{  dump()  }} DUMP VARIABLE
  26. 26. PHP  with  Devel  module:   <?php  dpm();  ?>   TWIG  with  Devel  +  Kint:   {{  kint()  }} BETTER DUMP
  27. 27. • Template Naming Convention: https://www.drupal.org/node/2354645 • The Drupal 8 Theming guide: http://d8.sqndr.com/new-theming-layer/README.html • Deep dive anatomy drupal 8 theme: http://x-team.com/2015/04/deep-dive-anatomy-drupal-8-theming/ • D8Theming (with debug tut): http://savaslabs.com/2015/06/10/d8-theming-basics.html REFERENCES
  28. 28. CHRIS WU Cheers! fb.me/amouro @amourow

×