Twig ใน symfony 2 : "Asset" include CSS/image/js

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

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

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Twig ใน symfony 2 : "Asset" include CSS/image/js

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

วิธีเรียกใช้งาน CSS/Image/JavaScipt
ในตัวอย่างเราจะทำการเรียกใช้งานในไฟล์แม่เเบบของเรา โดยให้ทำการพิมพ์

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
 <head>
  {% block stylesheet %}
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/styles.css') }}" />
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/menu.css') }}" />
  {% endblock %}
  {% block javascript %}
       <script src="{{ asset('bundles/TestHello/js/script.js') }}" type="text/javascript"></script>
     {% 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_12-09-47.png
2015-04-15_12-09-47.png (41.59 KiB) Viewed 1161 times
ที่นี่เราจะทำการเรียกไฟล์ CSS เเละ JS มาใช้งาน
2015-04-15_12-44-17.png
2015-04-15_12-44-17.png (13.92 KiB) Viewed 1161 times

โค้ด: เลือกทั้งหมด

{% block stylesheet %}
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/styles.css') }}" />
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/menu.css') }}" />
  {% endblock %}
  {% block javascript %}
       <script src="{{ asset('bundles/TestHello/js/script.js') }}" type="text/javascript"></script>
     {% endblock %}   
เมื่อเราทำการพิมพ์ Code เหมือนดังด้านบนเเล้ว ที่นี่ให้เราทำตามขึ้นตอนนี้ เพื่อ Set path เข้าไปหา Forder Puplic
2015-04-15_12-12-19.png
2015-04-15_12-12-19.png (50.48 KiB) Viewed 1161 times
2015-04-15_12-13-05.png
2015-04-15_12-13-05.png (61.79 KiB) Viewed 1161 times
2015-04-15_12-13-48.png
2015-04-15_12-13-48.png (36.63 KiB) Viewed 1161 times
2015-04-15_12-27-45.png
2015-04-15_12-27-45.png (57.78 KiB) Viewed 1161 times
ข้อสังเกตุ
1.

โค้ด: เลือกทั้งหมด

{{ asset('bundles/TestHello/js/script.js') }}
TestHello : ได้มาจาก
2015-04-15_12-51-07.png
2015-04-15_12-51-07.png (12.95 KiB) Viewed 1161 times
2.

โค้ด: เลือกทั้งหมด

  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/styles.css') }}" />
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/menu.css') }}" />
ถ้าเขียนในลักษณะนี้ จะเป็นการเรียกที่ละไฟล์ ถ้าหากต้องการ CSS ใน Folder ทั้งหมด เเบบ include dynamic สามารถดูได้จากตัวอย่าง ต่อไปค่ะ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 57