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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Hajas Tamás
    thamas.github.io

    View full-size slide

  5. Smink létrehozása

    View full-size slide

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

    View full-size slide

  7. Konfig fájlok

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. alap info
    CSS és JS
    örökölt

    CSS és JS
    felülbírálása
    régiók

    View full-size slide

  11. 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

    Drupal 8 core
    HTML, CSS, JS változhat
    Classy
    HTML, CSS, JS nem változhat

    base theme: false
    base theme: classy
    base theme:

    View full-size slide

  12. Drupal 8 alapsmink használat
    Klassz
    Sminkem
    Alakuló
    Sminkem
    Stable
    HTML, CSS, JS nem változhat

    Drupal 8 core
    HTML, CSS, JS változhat
    Classy
    HTML, CSS, JS nem változhat

    Stabil
    Sminkem
    base theme: false
    base theme: classy
    base theme:

    View full-size slide

  13. Drupal 8 alapsmink használat
    Klassz
    Sminkem
    base theme: classy
    klasszsminkem.info.yml



    HTML kimenet (Nem fog változni Drupal 8.x-ben)

    View full-size slide

  14. Drupal 8 alapsmink használat
    base theme: false
    alakulosminkem.info.yml



    HTML kimenet (Megváltozhat! CSS, JS is!)
    Alakuló
    Sminkem

    View full-size slide

  15. Drupal 8 alapsmink használat
    stabilsminkem.info.yml
    Stabil
    Sminkem
    base theme nincs megadva



    HTML kimenet (Nem fog változni Drupal 8.x-ben)
    Change record: https://www.drupal.org/node/2580687

    View full-size slide

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

    View full-size slide

  17. # 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. • Base
    • Layout
    • Component Module
    • State
    • Theme
    SMACSS-szerű CSS fájl-struktúra

    View full-size slide











  21. John Albin: Managing complex projects with design components
    BEM

    View full-size slide

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

    View full-size slide

  23. 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

    View full-size slide

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

    View full-size slide

  25. bartik.theme

    View full-size slide

  26. Sablonrendszer

    View full-size slide

  27. html
    page
    region
    region
    region
    region
    node block
    field
    field
    field
    field
    field
    field

    View full-size slide

  28. Twig
    sablonok
    https://www.drupal.org/theme-guide/8/twig

    View full-size slide

  29. block.html.twig

    View full-size slide

  30. Twig coding standards: https://drupal.org/node/1823416
    *.html.twig
    {{ változó }}
    {# kód komment #}
    {% utasítás %}

    View full-size slide

  31. {% if site_slogan %}

    {{ site_slogan }}

    {% endif %}
    {# Show slogan if it is set #}
    *.html.twig

    View full-size slide

  32. $yo[‘drupal_where’]->is[‘und’][0]–>my_data
    Drupal 7
    :(

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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/

    View full-size slide

  39. {% set foo="Bar" %}
    {{ foo }}

    Bar
    *.html.twig
    változó definiálása
    utasítás változó értéke
    változó neve
    eredmény

    View full-size slide

  40. *.html.twig
    változó definiálása
    tömb
    tartalomtípus
    pl. „article”
    összefűzés

    View full-size slide

  41. {
    block.html.twig
    html
    attribútumok

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  44. {% trans %}
    Submitted by
    {{ author_name|passthrough }}
    on
    {{ date|passthrough }}
    {% endtrans %}
    {{ ‘webconf’|t }}
    *.html.twig
    fordítás

    View full-size slide

  45. XYZ oldal
    Copyleft…
    T
    artalom címe
    Twig block

    View full-size slide

  46. Twig block
    page.html.twig

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. • 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!

    View full-size slide

  52. Hajas Tamás
    Web Project Manager
    Front-end Developer
    Integral Vision Kft
    integralvision.hu
    thamas.github.io

    View full-size slide