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 Slide

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

    View Slide

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

    View Slide

  4. Hajas Tamás
    thamas.github.io

    View Slide

  5. Smink létrehozása

    View Slide

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

    View Slide

  7. View Slide

  8. Konfig fájlok

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

  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

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

    base theme: false
    base theme: classy
    base theme:

    View Slide

  13. 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 Slide

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



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

    View Slide

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



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

    View Slide

  16. 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 Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide











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

    View Slide

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

    View Slide

  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

    View Slide

  25. View Slide

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

    View Slide

  27. bartik.theme

    View Slide

  28. Sablonrendszer

    View Slide

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

    View Slide

  30. View Slide

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

    View Slide

  32. block.html.twig

    View Slide

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

    View Slide

  34. {% if site_slogan %}

    {{ site_slogan }}

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  49. Twig block
    page.html.twig

    View Slide

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

    View Slide

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

    View Slide

  52. Eszközök

    View Slide

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

    View Slide

  54. Twig debug

    View Slide

  55. Twig debug

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide