CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย
Moderator: mindphp, ผู้ดูแลกระดาน
-
thatsawan
- PHP VIP Members
- โพสต์: 28508
- ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
-
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย thatsawan »
จากบทความที่เเล้ว เราได้ทำการ Inclues ไฟล์ CSS/ JS มาใช้งาน ผลลัพท์คือ ทำการเรียกมาทีละไฟล์ๆ ดังตัวอย่าง!
โค้ด: เลือกทั้งหมด
{% 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 %}
- 2015-04-15_16-19-16.png (36.21 KiB) Viewed 1066 times
- 2015-04-15_16-17-48.png (176.12 KiB) Viewed 1066 times
ที่นี่เราลองมาใช้งานคำสั่ง "combine" ใน CSS
โค้ด: เลือกทั้งหมด
{% stylesheets 'bundles/TestHello/css/*' filter='cssrewrite' combine=true %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
ผลคือ มันจะเรียกไฟล์ CSS ครั้งเดียวทำให้การโหลดหน้า page ไว้ขึ้น
- 2015-04-15_16-21-34.png (56.4 KiB) Viewed 1066 times
ลงมาใช้กับ JS ดูบ้าง
ตัวอย่างก่อนใช้งาน
โค้ด: เลือกทั้งหมด
{% javascripts 'bundles/TestHello/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
- 2015-04-15_16-22-49.png (48.04 KiB) Viewed 1062 times
ตัวอย่างหลังใช้งานค่ะ
โค้ด: เลือกทั้งหมด
{% javascripts 'bundles/TestHello/js/*' combine=true %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
- 2015-04-15_16-23-35.png (36.3 KiB) Viewed 1062 times
-
-
- 0 ตอบกลับ
- 2231 แสดง
-
โพสต์ล่าสุด โดย thatsawan
15/04/2015 4:05 pm
-
-
- 0 ตอบกลับ
- 2080 แสดง
-
โพสต์ล่าสุด โดย thatsawan
14/04/2015 1:12 pm
-
-
- 0 ตอบกลับ
- 1632 แสดง
-
โพสต์ล่าสุด โดย thatsawan
14/04/2015 2:17 pm
-
-
- 0 ตอบกลับ
- 2066 แสดง
-
โพสต์ล่าสุด โดย thatsawan
14/04/2015 12:45 pm
-
-
- 0 ตอบกลับ
- 1615 แสดง
-
โพสต์ล่าสุด โดย thatsawan
15/04/2015 3:39 pm
-
-
- 4 ตอบกลับ
- 1942 แสดง
-
โพสต์ล่าสุด โดย eange08
15/01/2021 10:22 am
-
-
- 0 ตอบกลับ
- 1964 แสดง
-
โพสต์ล่าสุด โดย thatsawan
14/04/2015 1:39 pm
สมาชิกกำลังดูบอร์ดนี้: Google Adsense [Bot] และบุคลทั่วไป 55