Drupal sminkelés előadásom #webkonfhu 2015 változata. http://webconf.hu/2015/program/index.php
Szépségszalon aVertikálisVégtelenhez8
View Slide
Szépségszalon aVertikálisVégtelenhezDrupal 8sminkelés
Hajas TamásWeb Project ManagerFront-end DeveloperIntegral Vision Kft
Hajas Tamásthamas.github.io
Smink létrehozása
Hol?[gyökérkönyvtár]/themes/custom/[sminkneve]
Konfig fájlok
*.info.yml*.libraries.yml*.breakpoints.yml*.themeSmink konfig fájlok
alap infoCSS és JSörökölt CSS és JSfelülbírálásarégiók
A Drupal 8 sminkjeiSevenHTML, CSS,JS változhatBartikHTML, CSS,JS változhatStarkHTML, CSS,JS változhatStableHTML, CSS, JS nem változhatDrupal 8 coreHTML, CSS, JS változhatClassyHTML, CSS, JS nem változhatbase theme: falsebase theme: classybase theme:
Drupal 8 alapsmink használatKlasszSminkemAlakulóSminkemStableHTML, CSS, JS nem változhatDrupal 8 coreHTML, CSS, JS változhatClassyHTML, CSS, JS nem változhatStabilSminkembase theme: falsebase theme: classybase theme:
Drupal 8 alapsmink használatKlasszSminkembase theme: classyklasszsminkem.info.yml…HTML kimenet (Nem fog változni Drupal 8.x-ben)
Drupal 8 alapsmink használatbase theme: falsealakulosminkem.info.yml…HTML kimenet (Megváltozhat! CSS, JS is!)AlakulóSminkem
Drupal 8 alapsmink használatstabilsminkem.info.ymlStabilSminkembase theme nincs megadva…HTML kimenet (Nem fog változni Drupal 8.x-ben)Change record: https://www.drupal.org/node/2580687
# Librarieslibraries:-sminkem/global-assetsglobal-assets:version: 1.xcss:theme:css/style.css: {}css/print.css: { media: print }js:js/script.js: {}dependencies:- core/jquery- core/jquery.oncesminkem.info.ymlsminkem.libraries.ymlhttps://www.drupal.org/theme-guide/8/assets
Change record: https://www.drupal.org/node/2497313libraries override / extendsminkem.info.yml
• Base• Layout• Component Module• State• ThemeSMACSS-szerű CSS fájl-struktúra
John Albin: Managing complex projects with design componentsBEM
bartik.mobile:label: mobilemediaQuery: '(min-width: 0px)'weight: 0multipliers:- 1xbartik.narrow:label: narrowmediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'weight: 1multipliers:- 1xbartik.wide:label: widemediaQuery: 'all and (min-width: 851px)'weight: 2multipliers:- 1xbartik.breakpoints.yml
bartik.theme
Sablonrendszer
htmlpageregionregionregionregionnode blockfieldfieldfieldfieldfieldfield
Twigsablonokhttps://www.drupal.org/theme-guide/8/twig
block.html.twig
Twig coding standards: https://drupal.org/node/1823416*.html.twig{{ változó }}{# kód komment #}{% utasítás %}
{% if site_slogan %}{{ site_slogan }}{% endif %}{# Show slogan if it is set #}*.html.twig
$yo[‘drupal_where’]->is[‘und’][0]–>my_dataDrupal 7:(
*.html.twigváltozón elemének megjelenítése{{ content.links.readmore }}
*.html.twigváltozó megjelenítése kihagyással{{ content|without('image') }}változó (tömb) szűrő változó elemének neve
{{ html }}{{ page }}{{ page.header }}{{ page.aside }}{{ page.footer }}{{ page.content }}{{ content }}{{ submitted }}{{ tags }}{{ text }}{{ image }} fieldfield
{{ html }}{{ page }}{{ page.header }}{{ page.aside }}{{ page.footer }}{{ page.content }}{{ content|without(‘image’) }}{{ submitted }}{{ tags }}{{ text }}{{ content.image }}
{{ html }}{{ page }}{{ page.header }}{{ page.aside }}{{ page.footer }}{{ page.content }}{{ content|without(‘image’,’tags’) }}{{ submitted }}{{ content.tags }}{{ text }}{{ content.image }}
https://www.drupal.org/node/2296163{{ username|raw }}*.html.twigautoescapeKép: http://www.legalleadersblog.com/2012/04/30/ you-gotta-feel-sorry-for-those-angry-difficult-partners/
{% set foo="Bar" %}{{ foo }}…Bar*.html.twigváltozó definiálásautasítás változó értékeváltozó neveeredmény
*.html.twigváltozó definiálásatömbtartalomtípuspl. „article”összefűzés
{block.html.twightmlattribútumok
*.html.twigattribútumok kezelése
attribútumok kezelése*.html.twig
{% trans %}Submitted by{{ author_name|passthrough }}on{{ date|passthrough }}{% endtrans %}{{ ‘webconf’|t }}*.html.twigfordítás
XYZ oldalCopyleft…Tartalom címeTwig block
Twig blockpage.html.twig
Twig blockpage--front.html.twig
Twig blockpage.html.twigXYZ oldalCopyleft…Üdv a címlapon!
Eszközök
parameters:twig.config:debug: trueauto_reload: truecache: falsesites/default/services.ymlTwig debug
Twig debug
Forrás: https://drupalize.me/blog/201405/lets-debug-twig-drupal-8Devel + Devel Kint modulok
• 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/172169további infókNagyban építettem erre!
Hajas TamásWeb Project ManagerFront-end DeveloperIntegral Vision Kftintegralvision.huthamas.github.io
thamas
datarian
mtyk_15
nktamago
sadonosake
igsr5
tkhresk
devops_vtj
nishiharatsubasa
prathamesh
saramune
mhidaka
minorun365
addyosmani
frogandcode
shlominoach
marcduiker
kastner
chrislema
eileencodes
hursman
stephaniewalter
aki_iinuma
zakiyama
jensimmons