Twig ใน symfony 2 : Dynamic path includes CSS/JS

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19471
Joined: 31/03/2014 10:02 am
Contact:

Twig ใน symfony 2 : Dynamic path includes CSS/JS

Post by thatsawan » 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 บรรทัด ที่นี่มันมีวิธีที่ง่ายกว่านั้น ค่ะ คือ

Code: Select all

 {% stylesheets 'bundles/TestHello/css/*' filter='cssrewrite'%}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
   {% endstylesheets %}

Code: Select all

 {% javascripts 'bundles/TestHello/js/*' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
คำอธิบาย
* : มีความหมายว่า เอาทุกไฟล์ที่อยู่ใน Forder CSS หรือ JS
filter='cssrewrite' : มีความหมายว่า กรองเอาเฉพาะไฟล์ CSS เท่านั้น !
2015-04-15_12-51-07.png
2015-04-15_12-51-07.png (13.75 KiB) Viewed 594 times

Code: Select all

<!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 %}
   &copy; 2015 mindphp.com
   {% endblock %}
  </div>
 </body>
</html>
ผลคือ
2015-04-15_15-37-04.png
2015-04-15_15-37-04.png (66.51 KiB) Viewed 594 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 17 guests