View
139
Download
0
Category
Preview:
Citation preview
Szépségszalon a Vertikális Végtelenhez
Drupal 8 sminkelés
Hajas TamásDrupal tanácsadó Integral Vision Kft
bitangjo.info
Drupal 7sites/all/themes/bitangjo/
bitangjo.info.ymlthemes/bitangjo/
Drupal 8
bitangjo.info
Drupal 7sites/all/themes/bitangjo/
kulcs_neve: érték
kettőspont ':' (nem egyenlőségjel)
# komment:
kettőskereszt '#' (nem pontossvessző)
struktúra:
behúzással jelezve
Change record: https://drupal.org/node/1935708
YAML szintaktika
!
description: Ez egy bitang jó smink! :)
version: 1.0
!
!
!
!
package: custom
screenshot: bitangjo.png
Creating a D8 sub-theme: https://drupal.org/node/2165673
type: theme
name: Bitangjó smink
!
!
core: 8.x
base theme: classy
# engine: twig
bitangjo.info.yml
Forrás: https://github.com/sqndr/d8-theming-guide/blob/master/img/theme-overview.png
Forrás: https://github.com/sqndr/d8-theming-guide/blob/master/img/custom-theme.png
bitangjo.info.yml
stylesheets: all: - css/base.css screen: - css/components.css print: - css/print.css
# Stíluslap felülbírálása
!
!
# Stíluslap „etávolítása”
Change record: https://drupal.org/node/1876600
stylesheets-override:
- normalize.css
!
!
stylesheets-remove:
- jquery.ui.dialog.css
bitangjo.info.yml
SMACSS + BEM
CSS coding standards: https://drupal.org/node/1886770
Drupal 8
• Base • Layout • Module • State • Theme
SMACSS CSS fájl-struktúra
• Base • Layout • Module • State • Theme
SMACSS-szerű CSS fájl-struktúra
• Base • Layout • Component Module • State • Theme
SMACSS-szerű CSS fájl-struktúra
• Base • Layout • Component Module
• State • Theme
SMACSS-szerű CSS fájl-struktúra
base • elements.css • typography.css layout • layout.css • node-add.css • …
components • buttons.css • buttons.theme.css • … theme • install-page.css • appearance-
page.css
SMACSS-szerű CSS fájl-struktúra (smink)
Forrás: seven theme
• module_name.module.css (layout, component, state)
• module_name.theme.css • module_name.admin.css
(layout, component, state) • module_name.admin.theme.css • module_name.base.css
SMACSS-szerű CSS fájl-struktúra (modul)
<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
# Smink régiók
Forrás: seven.info.yml
regions:
content: Content
help: Help
page_top: 'Page top'
page_bottom: 'Page bottom'
sidebar_first: 'First sidebar'
regions_hidden:
- sidebar_first
bitangjo.info.yml
hook_library_info()
Drupal 7
bitangjo.libraries.yml
Drupal 8
hook_library_info()
Drupal 7
Change record: https://drupal.org/node/2201089
base: version: 1.x js: js/bitangjo.js: {} dependencies: - core/drupal - core/jquery - core/jquery.once
Forrás: https://github.com/sqndr/d8-theming-guide
bitangjo.libraries.yml
Forrás: https://github.com/sqndr/d8-theming-guide
bitangjo.libraries.yml
picker: version: 3.1.0 remote: http://formstone.it/components/picker js: lib/picker/js/jquery.fs.picker.js: {} css: theme: lib/picker/css/jquery.fs.picker.css: {} dependencies: - core/jquery
bitangjo.info.yml*
libraries: - bitangjo/base
*Hol a picker? Nemsokára kiderül… ;)
Breakpoints
Drupal 8
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
Breakpoints » Responsive images
• Responsive images modul
• Mapping beállítása
• Breakpoint group
• Breakpoint – Image style
Breakpoints » Responsive images
• Responsive images modul
• Mapping beállítása
• Breakpoint group
• Breakpoint – Image style
• RI image formatter
• Mapping választása
Képstílusok a sminkben
Drupal 8
• Képstílus létrehozása (admin felület)/admin/config/media/image-styles/add
• Képstílus exportja admin felületről/admin/config/development/configuration/single/export
• Exportált YAML a sminkbebitangjo/config/install/image.style.style_name.yml
Képstílusok a sminkben
uuid: 311e7c58-c64a-4c9e-b544-68b12b560e36 langcode: en status: true dependencies: { } name: thumbnail label: 'Thumbnail (100×100)' effects: 1cfec298-8620-4749-b100-ccb6c4500779: uuid: 1cfec298-8620-4749-b100-ccb6c4500779 id: image_scale weight: 0 data: width: 100 height: 100 upscale: false third_party_settings: { }
image.style.thumbnail.yml
*.tpl.php
Drupal 7
*.html.twig
Drupal 8
*.tpl.php
Drupal 7
Biztonságos
Gyors
Érthető
PHPTemplate & Twig comparison: https://drupal.org/node/1918824
*.html.twig
Twig coding standards: https://drupal.org/node/1823416
*.html.twig változó
{{ page.primary_menu }}
Twig coding standards: https://drupal.org/node/1823416
*.html.twig filter
{{ content|without('links') }}
Twig coding standards: https://drupal.org/node/1823416
{{ 'Home'|t }}
*.html.twig filter
Twig coding standards: https://drupal.org/node/1823416
*.html.twig fordítás
{% trans %} Submitted by {{ author_name|passthrough }} on {{ date|passthrough }} {% endtrans %}
Twig coding standards: https://drupal.org/node/1823416
*.html.twig komment
{# Kód komment #}
Twig coding standards: https://drupal.org/node/1823416
*.html.twig if funkció
{% if site_slogan %} <div class="site-slogan"> {{ site_slogan }} </div> {% endif %}
Twig coding standards: https://drupal.org/node/1823416
*.html.twig for loop
<ul> {% for user in users %} <li> {{ user.username }} </li> {% endfor %} </ul>
Twig coding standards: https://drupal.org/node/1823416
*.html.twig Twig változó definiálása
{% set foo="bar" %}
{{ foo }}
…
Twig coding standards: https://drupal.org/node/1823416
*.html.twig Twig változó definiálása
{% set classes = [ 'admin-list', compact ? 'compact', ] %} !
… !<ul{{ attributes.addClass(classes) }}>
Twig debug
parameters: twig.config: debug: true auto_reload: true cache: false
sites/default/services.yml
Twig debug
Twig debug
$ cp example.settings.local.php default/settings.local.php
if (file_exists(__DIR__ . '/settings.local.php')) { include __DIR__ . '/settings.local.php'; }
…és a settings.php-ben:
template.php
Drupal 7
bitangjo.theme
Drupal 8
template.php
Drupal 7
Change record-ok: https://www.drupal.org/node/2352319, https://drupal.org/node/2169605
bitangjo.theme
/** * Implements hook_form_FORM_ID_alter(). */ function bitangjo_form_recipe_alter(&$form, &$form_state) { ! // Use Picker to replace default checkboxes and radios. $form['#attached']['library'][] = 'bitangjo/picker'; }
Headless Drupal
Drupal 8
!⬇
Böngésző Weboldal megjelnítése
Headless Drupal
Adatbázis
⬇ PHP
„adatszolgáltatás”!⬍ JS
adatfeldolgozás, HTML render
• https://drupal.org/theme-guide/8
• Change records (theme): http://j.mp/1qFSKXq
• http://d8.sqndr.com
• https://amsterdam2014.drupal.org/session/twig-and-new-drupal-8-theme-system
• 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
Tamás HajasDrupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas
Recommended