วิธีเรียกใช้งาน 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 %}
© 2015 mindphp.com
{% endblock %}
</div>
</body>
</html>
ผลคือ จะได้มาในรูปแบบนี้
- 2015-04-15_12-09-47.png (41.59 KiB) Viewed 1165 times
ที่นี่เราจะทำการเรียกไฟล์ CSS เเละ JS มาใช้งาน
- 2015-04-15_12-44-17.png (13.92 KiB) Viewed 1165 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 (50.48 KiB) Viewed 1165 times
- 2015-04-15_12-13-05.png (61.79 KiB) Viewed 1165 times
- 2015-04-15_12-13-48.png (36.63 KiB) Viewed 1165 times
- 2015-04-15_12-27-45.png (57.78 KiB) Viewed 1165 times
ข้อสังเกตุ
1.
โค้ด: เลือกทั้งหมด
{{ asset('bundles/TestHello/js/script.js') }}
TestHello : ได้มาจาก
- 2015-04-15_12-51-07.png (12.95 KiB) Viewed 1165 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 สามารถดูได้จากตัวอย่าง ต่อไปค่ะ