Twig ใน symfony 2 : Dynamic path includes CSS/JS
โพสต์แล้ว: 15/04/2015 3:39 pm
Dynamic path includes CSS/JS คือ เราเขียนคำสั่งเรียก CSS เเละ JS เพียง path เดียว เเต่สามารถจะไป includes ไฟล์ CSS / JS ทั้งหมดในโฟลเดอร์มาทั้งหมด
จากบทความที่เเล้ว
- Twig ใน symfony 2 : "asset_url" include CSS/image/js
- Twig ใน symfony 2 : "Asset" include CSS/image/js
เราจะสามารเรียกไฟล์ CSS เเละ JS ได้เเต่จะต้องกำหนดถึงชื่อไฟล์ ถ้ามีทั้งหมด 10 ไฟล์ เราต้องเขียน path ถึง 10 บรรทัด ที่นี่มันมีวิธีที่ง่ายกว่านั้น ค่ะ คือ
คำอธิบาย
* : มีความหมายว่า เอาทุกไฟล์ที่อยู่ใน Forder CSS หรือ JS
filter='cssrewrite' : มีความหมายว่า กรองเอาเฉพาะไฟล์ CSS เท่านั้น !
ผลคือ
จากบทความที่เเล้ว
- Twig ใน symfony 2 : "asset_url" include CSS/image/js
- Twig ใน symfony 2 : "Asset" include CSS/image/js
เราจะสามารเรียกไฟล์ CSS เเละ JS ได้เเต่จะต้องกำหนดถึงชื่อไฟล์ ถ้ามีทั้งหมด 10 ไฟล์ เราต้องเขียน path ถึง 10 บรรทัด ที่นี่มันมีวิธีที่ง่ายกว่านั้น ค่ะ คือ
โค้ด: เลือกทั้งหมด
{% stylesheets 'bundles/TestHello/css/*' filter='cssrewrite'%}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
โค้ด: เลือกทั้งหมด
{% javascripts 'bundles/TestHello/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
* : มีความหมายว่า เอาทุกไฟล์ที่อยู่ใน Forder CSS หรือ JS
filter='cssrewrite' : มีความหมายว่า กรองเอาเฉพาะไฟล์ CSS เท่านั้น !
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
{% block stylesheet %}
{% stylesheets 'bundles/TestHello/css/*' filter='cssrewrite'%}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% endblock %}
{% block javascript %}
{% javascripts 'bundles/TestHello/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
<title>{% block title %}{{name}}{% endblock %}</title>
</head>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="content">{% block content %} {% endblock %}</div>
<div id="sidebar">{% block sidebar %} {% endblock %}</div>
<div id="footer">
{% block footer %}
© 2015 mindphp.com
{% endblock %}
</div>
</body>
</html>