Download as PDF, PPTX
![Disable render cache
In settings.local.php:
disable the render cache (this includes the page cache).
$settings['cache']['bins']['render'] = 'cache.backend.null';
disable Dynamic Page Cache.
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';](https://image.slidesharecdn.com/drupalfrontend101-151209161724-lva1-app6892/85/Drupal-8-Corso-frontend-development-83-320.jpg)
Uploaded bysparkfabrik
Drupal 8 - Corso frontend development
This document provides an overview of new features for theming in Drupal 8, including the transition from PHPTemplate to the Twig templating language. Key points include: - Drupal 8 uses Twig instead of PHPTemplate for improved security, syntax, and separation of logic from presentation. - Twig templates, YAML configuration, and fewer hardcoded HTML classes/IDs provide better separation of concerns between backend and frontend. - The theme layer has been updated, removing processing hooks in favor of template preprocessing and theme suggestions to alter output. - Core includes starter themes like Bartik and modules to help with responsive design and development.
More Related Content
![[drupalday2017] - REST in pieces](https://cdn.slidesharecdn.com/ss_thumbnails/paolo-pustorinorestinpieces-170306112824-170315150716-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Drupal 8 - Corso frontend development
Drupal 8 - Corso frontend development
- 2.
- 3. Exausted? Almost done…* *only 2more hours
- 4. Andrea Panisson… Who? Iwork in as frontend developer. I care UI, IA, Drupal Theming and I care about clients.
- 5. What’s new inDrupal 8 for themers D7 PHPTemplate Theme functions + template files Structured markup in core and ‘hardcoded’ classes HTML D8 Twig Template files Minimal markup and classes in core HTML5 in core
- 6. Twig? Twig is amodern PHP-based compiled templating language.
- 7. What's new inDrupal 8 for themers & the Twig template engine.
- 8. PHPtemplate themefunctions markup in core Farewell to
- 9. Welcome to Nomore markup in core All through template files HTML5 Twig
- 10. All through templatefiles
- 11. Twig: what &why What? A template engine for PHP Why? Twig was created by people behind Synfony2 Synfony2 was integrated in Drupal 8 core
- 12. Twig was chosenbecause it was the best choice after comparing various templating languages. "… We don't have Twig because we have Symfony. It's more that, we have Twig because it's AWESOME" - Scott Reeves, @Cottser “Twig…because it's AWESOME”
- 13. But why abandoning PHPtemplate? 1.Syntax 2. Inconsistency 3. Complexity 4. Redundancy 5. Security
- 14. “Twig…because it's AWESOME” Mixed datatypes in template files
- 15. #1. D8 syntax:TWIG All variables are printed the same way
- 16. #2. Inconsistency D7different waysto do the same thing: Template files or Theme functions. Theme functions or render arrays D8 Only template files Only render arrays
- 17. #3. D7: complexity Drupal7 was funny!
- 18. #3. D8: lesscomplexity D8 is boring!
- 19. #4. D7: redundancy There'sa lot of duplicated code in themes, we often have multiple files with the same lines of code.
- 20. #4. D8: lessredundancy No need to repeat code between templates, we can extend templates with Twig.
- 21. #5. Security D7 In aPHPTemplate file you can print all sort of unsanitized data, even delete a table from your DB. D8 In Twig this is not possible, Twig's autoescape feature is enabled by default.
- 22. TWIG: no moreconflict backend - frontend They are now separated!
- 23. TWIG: easy tolearn!
- 24.
- 25. Twig: no morevar drilling Drupal 7 and PHPtemplate Drupal 8 and Twig
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. Twig: includes Template filesare reusable, thanks to Twig includes http://twig.sensiolabs.org/doc/tags/include.html {% include “footer.html.twig" %} Or using namespaces: {% include “@my_theme/partials/footer.html.twig" %}
- 35. Twig coding standard(T.c.s.) Generic Twig coding standards: http://twig.sensiolabs.org/doc/coding_standards.html Twig in Drupal coding standards: http://drupal.org/node/1823416
- 36. T.c.s. - HTMLattributes In Drupal core, we will print only the class attribute specially, all the others will be printed as part of {{ attributes }}. The reason for this is that it needs to be very easy for front end developers to be able to add a class, anywhere
- 37.
- 38. T.c.s. - Comments Singleline: Multiline
- 39.
- 40. And so, Twigadvantages: a clear separation between the logic and the view no more PHP code inside your template files it's not only used in Drupal core, so it's not a Drupaly-thing
- 41. and Twig disadvantages: thingto learn
- 42. YAML Yet Another MarkupLanguage* * YAML Ain't Markup Language "YAML is a human friendly data serialization standard for all programming languages." -yaml.org Pronounced “yamel” (rhymes with camel).
- 43.
- 44. Why YAML? YAMLis both human editable and machine readable. .yml files are not Drupal specific like .info files. And why not XML? XML would require a Drupal specific schema. Or JSON? JSON doesn't allow comments. Non-ASCII characters require escaping in JSON.
- 45. Theme folder structure Thedirectory structure of Drupal 8 has changed! https://www.drupal.org/node/2349803
- 46.
- 47. /themes For themes thatshould be available to all sites. /sites/{site}/themes For themes that should be available on a specific site (on a multisite installation). Location of themes
- 48.
- 49. Most common themefiles *.info.yml *.libraries.yml *.breakpoints.yml *.theme Theme folder structure: https://www.drupal.org/node/2349803
- 50. *.info.yml (ex *.info) A theme must contain an .info.yml file to define the theme. Among other things the .info.yml files defines meta data, style sheets, and block regions. This is the only required file in the theme.
- 51. *.libraries.yml The .libraries.ymlfile is used to define JavaScript and CSS libraries that can be loaded by the theme. A library as a collection of CSS and JS.
- 52. *.libraries.yml Libraries are calledin the info file: and defined in the *.libraries.yml file:
- 53. *.breakpoints.yml Breakpoints definewhere a responsive design needs to change in order to respond to different devices. Breakpoints are defined in a .breakpoints.yml file
- 54. *.theme (ex template.php) The .theme file is a PHP file that contains all the conditional logic and data (pre)processing of the output.
- 55.
- 56. The new themelayer
- 57. Bye bye themingfunctions! ALL GONE: All of the theme() functions have been converted to Twig templates.
- 58. New theme hooks Theme suggestions hook_theme_suggestions() hook_theme_suggestions_HOOK() Theme suggestions alter: hook_theme_suggestions_alter(), hook_theme_suggestions_HOOK_alter() Theme preprocess: THEME_preprocess(&$variables, $hook), THEME_preprocess_HOOK(&$variables) https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/themeable/8
- 59. Removed process hooks The process layer (hook_process and hook_process_HOOK) is gone!
- 60. The preprocess layer The preprocess layer still exists, but it's used for a different purpose. In Drupal 8, the preprocess layer should not be used to add css classes. This should be done in the template files. https://www.drupal.org/node/2325067
- 61. Drupal 8 corethemes
- 62. Drupal 8 corethemes bartik seven stark classy stable Backwards compatibility throughout the Drupal 8 cycle Default admin theme Default theme Drupal core markup test theme
- 63. Drupal 8 corethemes: bartik A flexible, recolorable theme with many regions and a responsive, mobile-first layout. The default theme in Drupal 8.
- 64. Drupal 8 corethemes: seven The default administration theme for Drupal 8. Now fully responsive.
- 65. Drupal 8 corethemes: stark An intentionally plain theme with almost no styling to demonstrate default Drupal’s HTML and CSS. Stark only outputs html and css from modules. Add no CSS Add no templates
- 66. Drupal 8 corethemes: stable The Stable theme will function as a backwards compatibility layer for Drupal 8's core markup, CSS and JS. A theme will always use Stable as the base theme unless you set in your theme .info.yml file.
- 67. Drupal 8 corethemes: classy The classes from core have been moved into the classy base theme. Now all template files in core are “classless”. Is the base theme that Seven and Bartik will extend from.
- 68.
- 69. Drupal 8 coretemplates core/modules/system/templates
- 70. New CSS architecture SMACSS Scalableand Modular Architecture for CSS • Base • Layout • Component • State • Theme BEM Block Element Modifier naming convention .block__element--modifier
- 71.
- 72. Development tools Before startwith theme development (Drupal development) let’s get some tools: Drush: http://www.drush.org Drupal Console: http://drupalconsole.com Devel module (& Kint): http://drupal.org/project/devel
- 73. Installing composer… curl -sShttps://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer https://getcomposer.org/doc/00-intro.md#globally
- 74. Install Drupal console/ drush Edit (global) composer.json and then run composer update
- 75. Install Drupal console/ drush composer global require drush/drush:dev-master composer global require drupal/console:@stable Remember to add the binaries composer directory to your path, i.e. $ echo "PATH=$PATH:~/.composer/vendor/bin" >> ~/.bash_profile
- 76. Most useful drushcommands: Clear cache drush cr Download / enable a module drush en module_name HELP ME! drush help
- 77. Most useful console commands: Generate a theme: console generate:theme More to come... * * Please, RTFM!
- 78. Enable debugging: the manualway Locate services.yml file (sites/default/services.yml) If services.yml does not yet exist copy default.services.yml and rename it to services.yml Edit the services.yml file and enable one or more of the debugging options Rebuild cache
- 79. Enable debugging: the manualway (continue) parameters: twig.config: # Twig debugging: debug: true # Twig auto-reload: auto_reload: true # Twig cache: cache: true
- 80.
- 81. Disable render cache Drupalcaches any rendering it performs for blocks and entities, to speed up subsequent page loads. This means that changes to Twig templates for these will not take effect immediately.
- 82. Disable render cache add the following lines at the bottom of settings.php if (file_exists(__DIR__ . '/settings.local.php')) { include __DIR__ . '/settings.local.php'; } copy sites/example.settings.local.php to sites/default/settings.local.php clear the Drupal caches.
- 83. Disable render cache Insettings.local.php: disable the render cache (this includes the page cache). $settings['cache']['bins']['render'] = 'cache.backend.null'; disable Dynamic Page Cache. $settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
- 84. Devel and Kint drushdl devel Kint, the new Krumo http://raveren.github.io/kint/
- 85. Twig: compiled inPHP template Twig template engine takes the template file and converts it into a 'compiled' PHP template in sites/default/files/php/twig/* (drush cr clean this folder too)
- 86. Resources Twig official:http://twig.sensiolabs.org/ Theming Drupal 8: https://drupal.org/theme-guide/8 The Drupal 8 Theming guide: http://d8.sqndr.com/ More articles Drupal 8 Theming Fundamentals, Part 1 Drupal 8 Theming Fundamentals, Part 2 A Tale of Two Base Themes in Drupal 8 core