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

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

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

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

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

Post by thatsawan » 15/04/2015 12:55 pm

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

Code: Select all

<!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 559 times
ที่นี่เราจะทำการเรียกไฟล์ CSS เเละ JS มาใช้งาน
2015-04-15_12-44-17.png
2015-04-15_12-44-17.png (13.92 KiB) Viewed 559 times

Code: Select all

{% 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 559 times
2015-04-15_12-13-05.png
2015-04-15_12-13-05.png (61.79 KiB) Viewed 559 times
2015-04-15_12-13-48.png
2015-04-15_12-13-48.png (36.63 KiB) Viewed 559 times
2015-04-15_12-27-45.png
2015-04-15_12-27-45.png (57.78 KiB) Viewed 559 times
ข้อสังเกตุ
1.

Code: Select all

{{ 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 559 times
2.

Code: Select all

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

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests