Yii 2 จัดการไฟล์ css,js ด้วยคลาส Asset

ใน yii นั้นมีคลาสที่ชื่อ Asset ใช้สำหรับจัดการไฟล์ที่ใช้ในฝั่งบราวเซอร์ โดยการจับเข้าชุด ทำให้ใช้งานได้ง่าย สะดวกมากขึ้น

ในโฟลเดอร์ assets มีไฟล์ AppAsset.php ซึ่งเป็นต้นแบบในการใช้งานในเบื้องต้นอยู่เเล้ว

การตั้งค่าที่สำคัญ

  • basePath − กำหนดที่อยู่เริ่มต้นกของโฟลเดอร์ที่เก็บไฟล์ css,js,image ไว้
  • js − ใช้กำหนดรายชื่อไฟล์ javascript .
  • css − ใช้กำหนดรายชื่อไฟล์ css.
  • depends − กำหนดให้คลาส asset ตัวอื่นที่จะให้โหลดก่อน

ลองสร้าง Asset

สร้างไฟล์ชื่อ ExampleAsset.php ในโฟลเดอร์ assets ด้านในเพิ่มอาเรย์ js ใส่

สร้างไฟล์ชื่อ example.js เก็บไว้ในโฟลเดอร์ js ด้านในเพิ่มโค้ดตามภาพ

เพิ่มลงในไฟล์ main.php ซึ่งเป็นไฟล์เลเอาท์ตามภาพ

ลองเข้าหน้าไหนก็ได้แล้ว เปิด developer tool ดู

กำหนดให้วาง Javascript ไว้บนส่วน head

ปกติแล้วไฟล์ js จะอยู่ท้ายไฟล์

ถ้าจะวางไว้ส่วนหัว

ใช้คำสั่ง jsOptions แล้วกำหนด position เป็น View::POS_HEAD

ไฟล์จะย้ายมาที่ส่วนหัว

การแคชไฟล์ด้วย timestamp

ถ้าต้องการแคชไฟล์สามารถใช้เวลาที่แก้ไขกำกับลงไปในแบบ timestamp ได้

เข้าไปในไฟล์ web.php แล้วเพิ่มแอททริบิวต์ appendTimestamp เป็น true ตามตัวอย่าง

ต่อไปจะมีเวลากำกับในไฟล์มาด้วย

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.