Django Tutorial Part6 (update week12-2)

 Part6 : Static Files

ในพาร์ทนี้เราจะทำการเพิ่ม stylesheet และรูปภาพลงหน้าเว็บของเรา 

นอกเหนือจาก HTML โดยทั่วไป web application จำเป็นต้องมีไฟล์อื่นๆ เช่น รูปภาพ, JavaScript หรือ CSS ซึ่งจำเป็นต่อการแสดงหน้าเว็บที่สมบูรณ์ ใน Django จะเรียกไฟล์เหล่านี้ว่า " static files"

django.contrib.staticfiles มีไว้เพื่อรวบรวม static files จากแต่ละ app ของเรา(และที่อื่นๆ ที่ระบุไว้) ไว้ในตำแหน่งเดียวที่สามารถเรียกใช้ได้ง่าย

Customize your app's look and feel

ขั้นแรกสร้าง directory ชื่อ static ใน poll จากนั้นสร้าง directory ชื่อ polls ใน static ซึ่งภายใน directory จะสร้างไฟล์ที่ชื่อ style.css กล่าวคือ stylesheet ของคุณควรอยู่ที่ polls/static/polls/style.css 

จากนั้นเขียน code นี้ใน stylesheet นั้น (polls/static/polls/style.css ):

จากนั้นแก้ไข้โค้ด polls/templates/polls/index.html 

จากนั้นก็รันเซิร์ฟเวอร์ ด้วยคำสั่ง $ python manage.py runserver หรือรีสตาร์ตหากกำลังรันเซิร์ฟเวอร์อยู่แล้ว

เราจะเห็นว่าลิงก์คำถามเป็นสีเขียว(Django style!) ซึ่งหมายความว่า stylesheet ของเราโหลดอย่างถูกต้อง

Adding a background-image

ต่อไปเราจะทำการสร้าง subdirectory สำหรับรูปภาพ สร้าง directory ชื่อ images ใน polls/static/polls ภายใน images เราได้ทำการเพิ่มรูปภาพที่ต้องการนำมาใช้เป็นพื้นหลังเข้าไป และตั้งชื่อว่า background.png ซึ่งมี path คือ polls/static/polls/images/background.png

จากนั้นเพิ่มการอ้างอิงถึงรูปภาพใน stylesheet ของเรา (polls/static/polls/style.css)

จากนั้นเราจะทำการโหลดหน้าเว็ปเราใหม่ แล้วเราก็จะเห็นพื้นหลังขึ้นมาที่ด้านซ้ายบนของหน้าจอ