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

EC-CUBE3デザイナー向け勉強会 #2

amidaike
February 24, 2016

EC-CUBE3デザイナー向け勉強会 #2

amidaike

February 24, 2016
Tweet

More Decks by amidaike

Other Decks in Programming

Transcript

  1. Twigͱ͸ • Twigͱ͸PHPͷͨΊͷςϯϓϨʔτΤϯδϯͰ͢ɻ • Symfony2Ͱ͸ඪ४ͷςϯϓϨʔτΤϯδϯͰ͋Γɺ EC-CUBE3Ͱ͸SmartyͰ͸ͳ͘TwigΛ࢖͍ͬͯ·͢ɻ • Twigʹ͸ҎԼͷಛ௃͕͋Γ·͢ɻ 1.ߴ଎ :

    PHPίʔυ·ͰίϯύΠϧ͞Ε࣮ͯߦ 2.֦ு͕༰қ : ಠࣗͷΧελϜλά΍ϑΟϧλΛఆٛ 3.ηΩϡΞ : αϯυϘοΫεϞʔυΛඋ͍͑ͯΔ
  2. Twigͷઆ໌ • ࠷খߏ੒ͷςϯϓϨʔτྫ
 <!DOCTYPE html> <html> <head> <title>My Webpage</title> </head>

    <body> <ul id="navigation"> {% for item in navigation %} <li><a href="{{ item.href }}">{{ item.caption }}</a></li> {% endfor %} </ul> <h1>My Webpage</h1> {{ a_variable }} </body> </html>
  3. Twigͷߏ଄ • Twigʹ͸3छྨͷهड़ํ๏͕͋ΓɺͦΕͧΕ
 {{ }}ɺ{% %}ɺ{# #}
 ͕ଘࡏ͠·͢ɻ {{ }}

    : ม਺Λग़ྗ͢Δ࣌ʹ࢖͏ {% %} : ࣜΛѻ͏࣌ʹ࢖͏ {# #} : ίϝϯτ࣌ʹ࢖͏
  4. ੍ޚߏจ • ੍ޚߏจ͸ɺϓϩάϥϜΛ੍ޚ͢Δ৚݅(i.e. if/elseif/ else)ɺforɺblockͷΑ͏ͳ΋ͷؚ͕·Ε·͢ɻ ੍ޚߏ จ͸ɺ{% ... %} ͷதʹ

    هड़͞Ε·͢ɻ <h1>Members</h1> <ul> {% for user in users %} <li>{{ user.username|e }}</li> {% endfor %} </ul>
  5. ίϝϯτ • ίϝϯτΞ΢τ͢Δʹ͸ίϝϯτߏจ {# ... #} Λ࢖͍· ͢ɻίϝϯτͰғ·Ε͍ͯΔ෦෼͸ϒϥ΢βʹ͸ग़ྗ͞ Ε·ͤΜɻ {#

    note: disabled template because we no longer use this {% for user in users %} ... {% endfor %} #}
  6. ςϯϓϨʔτͷܧঝ <!DOCTYPE html> <html> <head> {% block head %} <link

    rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - My Webpage</ title> {% endblock %} </head> <body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} &copy; Copyright 2011 by <a href="http:// domain.invalid/">you</a>. {% endblock %} </div> </body> </html>
  7. ςϯϓϨʔτͷܧঝ {% extends "default_frame.html" %} {% block title %}Index{% endblock

    %} {% block head %} {{ parent() }} <style type="text/css"> .important { color: #336699; } </style> {% endblock %} {% block content %} <h1>Index</h1> <p class="important"> Welcome to my awesome homepage. </p> {% endblock %}
  8. ԋࢉࢠ • TwigͰ͸phpͱಉ࢛͘͡ଇԋࢉࢠ΍ൺֱͳͲͷԋࢉࢠ͕ར༻ ՄೳͰ͢ɻ
 b-and, b-xor, b-or, or, and, ==,

    !=, <, >, >=, <=, in, matches, starts with, ends with, .., +, -, ~, *, /, //, %, is, **, |, [], and .:
 ͕͋Γ·͢ɻ • ҎԼͷԋࢉࢠ͸TwigͰΑ͘ར༻͞Ε·͢ɻ
 | : ϑΟϧλͷద༻
 ~ : ஋Λ͢΂ͯจࣈྻʹม׵ͯ݁͠߹
 .(υοτ) : ΦϒδΣΫτͷϓϩύςΟΛऔಘ