Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés

Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés

Drupal sminkelés előadásom #webkonfhu 2015 változata. http://webconf.hu/2015/program/index.php

Tamás Hajas

November 14, 2015
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

Transcript

  1. Szépségszalon a Vertikális Végtelenhez 8

  2. Szépségszalon a Vertikális Végtelenhez Drupal 8 sminkelés

  3. Hajas Tamás Web Project Manager Front-end Developer Integral Vision Kft

  4. Hajas Tamás thamas.github.io

  5. Smink létrehozása

  6. Hol? [gyökérkönyvtár]/themes/custom/[sminkneve]

  7. None
  8. Konfig fájlok

  9. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok

  10. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok

  11. alap info CSS és JS örökölt
 CSS és JS felülbírálása

    régiók
  12. A Drupal 8 sminkjei Seven HTML, CSS, JS változhat Bartik

    HTML, CSS, JS változhat Stark HTML, CSS, JS változhat Stable HTML, CSS, JS nem változhat <div></div> Drupal 8 core HTML, CSS, JS változhat Classy HTML, CSS, JS nem változhat <div class=“foo”></div> base theme: false base theme: classy base theme:
  13. Drupal 8 alapsmink használat Klassz Sminkem Alakuló Sminkem Stable HTML,

    CSS, JS nem változhat <div></div> Drupal 8 core HTML, CSS, JS változhat Classy HTML, CSS, JS nem változhat <div class=“foo”></div> Stabil Sminkem base theme: false base theme: classy base theme:
  14. Drupal 8 alapsmink használat Klassz Sminkem base theme: classy klasszsminkem.info.yml

    <div class="node node--article"> … </div> HTML kimenet (Nem fog változni Drupal 8.x-ben)
  15. Drupal 8 alapsmink használat base theme: false alakulosminkem.info.yml <div class="node

    node--article"> … </div> HTML kimenet (Megváltozhat! CSS, JS is!) Alakuló Sminkem
  16. Drupal 8 alapsmink használat stabilsminkem.info.yml Stabil Sminkem base theme nincs

    megadva <div> … </div> HTML kimenet (Nem fog változni Drupal 8.x-ben) Change record: https://www.drupal.org/node/2580687
  17. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok

  18. # Libraries libraries: -sminkem/global-assets global-assets: version: 1.x css: theme: css/style.css:

    {} css/print.css: { media: print } js: js/script.js: {} dependencies: - core/jquery - core/jquery.once sminkem.info.yml sminkem.libraries.yml https://www.drupal.org/theme-guide/8/assets
  19. Change record: https://www.drupal.org/node/2497313 libraries override / extend sminkem.info.yml

  20. Change record: https://www.drupal.org/node/2497313 libraries override / extend sminkem.info.yml

  21. • Base • Layout • Component Module • State •

    Theme SMACSS-szerű CSS fájl-struktúra
  22. <div class="flower__bed"> <div class="flower flower--tulip is-pollinating"> <div class="flower__petals"> <div class="flower__face"></div>

    </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components BEM
  23. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok

  24. bartik.mobile: label: mobile mediaQuery: '(min-width: 0px)' weight: 0 multipliers: -

    1x bartik.narrow: label: narrow mediaQuery: 'all and (min-width: 560px) 
 and (max-width: 850px)' weight: 1 multipliers: - 1x bartik.wide: label: wide mediaQuery: 'all and (min-width: 851px)' weight: 2 multipliers: - 1x bartik.breakpoints.yml
  25. None
  26. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok

  27. bartik.theme

  28. Sablonrendszer

  29. html page region region region region node block field field

    field field field field
  30. None
  31. Twig sablonok https://www.drupal.org/theme-guide/8/twig

  32. block.html.twig

  33. Twig coding standards: https://drupal.org/node/1823416 *.html.twig {{ változó }} {# kód

    komment #} {% utasítás %}
  34. {% if site_slogan %} <div class="site-slogan"> {{ site_slogan }} </div>

    {% endif %} {# Show slogan if it is set #} *.html.twig
  35. $yo[‘drupal_where’]->is[‘und’][0]–>my_data Drupal 7 :(

  36. *.html.twig változón elemének megjelenítése {{ content.links.readmore }}

  37. *.html.twig változó megjelenítése kihagyással {{ content|without('image') }} változó (tömb) szűrő

    változó elemének neve
  38. {{ html }} {{ page }} {{ page.header }} {{

    page.aside }} {{ page.footer }} {{ page.content }} {{ content }} {{ submitted }} {{ tags }} {{ text }} {{ image }} field field
  39. {{ html }} {{ page }} {{ page.header }} {{

    page.aside }} {{ page.footer }} {{ page.content }} {{ content|without(‘image’) }} {{ submitted }} {{ tags }} {{ text }} {{ content.image }}
  40. {{ html }} {{ page }} {{ page.header }} {{

    page.aside }} {{ page.footer }} {{ page.content }} {{ content|without(‘image’,’tags’) }} {{ submitted }} {{ content.tags }} {{ text }} {{ content.image }}
  41. https://www.drupal.org/node/2296163 {{ username|raw }} *.html.twig autoescape Kép: http://www.legalleadersblog.com/2012/04/30/
 you-gotta-feel-sorry-for-those-angry-difficult-partners/

  42. {% set foo="Bar" %} {{ foo }} … Bar *.html.twig

    változó definiálása utasítás változó értéke változó neve eredmény
  43. *.html.twig változó definiálása tömb tartalomtípus pl. „article” összefűzés

  44. {<div{{ attributes }}> block.html.twig html attribútumok

  45. <article{{ attributes.addClass(classes) }}> *.html.twig attribútumok kezelése

  46. attribútumok kezelése *.html.twig

  47. {% trans %} Submitted by {{ author_name|passthrough }} on {{

    date|passthrough }} {% endtrans %} {{ ‘webconf’|t }} *.html.twig fordítás
  48. XYZ oldal Copyleft… T artalom címe Twig block

  49. Twig block page.html.twig

  50. Twig block page--front.html.twig

  51. Twig block page.html.twig XYZ oldal Copyleft… Üdv a címlapon!

  52. Eszközök

  53. parameters: twig.config: debug: true auto_reload: true cache: false sites/default/services.yml Twig

    debug
  54. Twig debug

  55. Twig debug

  56. Forrás: https://drupalize.me/blog/201405/lets-debug-twig-drupal-8 Devel + Devel Kint modulok

  57. • https://drupal.org/theme-guide/8 • Change records (theme): http://j.mp/1qFSKXq • https://events.drupal.org/barcelona2015/ sessions/drupal-8-theming-0


    • Twig Coding Standards: https://drupal.org/node/ 1823416 • CSS CS: https://drupal.org/node/1886770 • JS CS: https://drupal.org/node/172169 további infók Nagyban építettem erre!
  58. Hajas Tamás Web Project Manager Front-end Developer Integral Vision Kft

    integralvision.hu thamas.github.io