ฉันจะใช้ CSS ใน Django ได้อย่างไร


110

ฉันกำลังสร้างแอปพลิเคชันโดยใช้ Django และฉันสงสัยว่าฉันจะทำให้ Django ใช้ไฟล์ CSS ของฉันได้อย่างไร ต้องตั้งค่าอะไรบ้างเพื่อให้ Django เห็นไฟล์ css

หมายเหตุ: บนเครื่องท้องถิ่น

คำตอบ:


48

หากคุณกำลังใช้เซิร์ฟเวอร์การพัฒนาตามโครงการของ Django วิธีการแนะนำสำหรับการจัดการไฟล์แบบคงที่ในการติดตั้งของ URL ของคุณแล้วคุณอ้างอิงไฟล์มีเดียในแม่แบบ - /site_media/images/foo.gifพูดภาพในโฟลเดอร์ภาพจาก


25
เพียงบันทึกย่อเกี่ยวกับเอกสาร Django เหล่านั้น - ตรวจสอบให้แน่ใจว่าคุณได้เลือกเอกสารสำหรับเวอร์ชันของ Django ที่คุณใช้อยู่ ดูเหมือนว่าสิ่งต่างๆจะเปลี่ยนแปลงไปมากระหว่างเวอร์ชันที่เกี่ยวข้องกับไฟล์คงที่
Sam Starling

3
@ แซมมีจุดที่ดี ฉันไม่สามารถหาไฟล์คงที่ตลอดชีวิตของฉันได้ จากนั้นเปลี่ยนเวอร์ชัน django ที่ติดตั้งและ voila นั่นคือทั้งหมดที่ฉันต้องทำเพราะเห็นได้ชัดว่าฉันกำลังดูเอกสารสำหรับเวอร์ชันที่ไม่ถูกต้อง
Josh Brown

36

โดยทั่วไปแล้วคุณกำลังถามวิธีให้บริการไฟล์แบบคงที่จาก Django หากคุณทำงานภายใต้ Apache คุณควรอ่าน http://docs.djangoproject.com/en/dev/howto/deployment/modpython/

หากคุณใช้เซิร์ฟเวอร์การพัฒนา (เช่นบนแล็ปท็อปของคุณ) โปรดอ่าน http://docs.djangoproject.com/en/dev/howto/static-files/

สังเกตไฟล์ ข้อจำกัดความรับผิดชอบที่ยิ่งใหญ่เกี่ยวกับเซิร์ฟเวอร์การพัฒนา Django:

  • การใช้เซิร์ฟเวอร์นี้ไม่มีประสิทธิภาพและไม่ปลอดภัย
  • อย่าใช้สิ่งนี้ในการตั้งค่าการใช้งานจริง
  • ใช้สิ่งนี้เพื่อการพัฒนาเท่านั้น

"อย่าใช้สิ่งนี้ในฉากการผลิต" คุณต้องการขยายเรื่องนี้หรือไม่?
คริส

@ คริส: คุณพูดถูกคำพูดนั้นค่อนข้างคลุมเครือ ฉันหมายถึงเซิร์ฟเวอร์การพัฒนา Django แม้ว่าฉันจะเรียกใช้มันสองสามครั้งในไซต์การผลิตของเรา แต่ก็เป็นเพียงช่วงเวลาสั้น ๆ ในขณะที่แก้ไขปัญหาที่น่ากลัว
Peter Rowell

ขอบคุณสำหรับคำชี้แจงฉันกำลังดูการปรับใช้ django ที่ทำงานบน apache โดยสงสัยว่าฉันทำอะไรผิด :)
คริส

1
ดี. ฉันชอบ 3 รายการที่พูดเหมือนกันคนละแบบ ขอบคุณสำหรับคำเตือน
KobeJohn

13
ฉันรักคนที่มาตามหลัง 4.5 ปีหลังจากโพสต์คำตอบและลงคะแนน ฉันสงสัยว่าพวกเขารู้หรือไม่ว่า Django คืออะไรในวันที่ 11/08 ... มันไม่ได้เป็นจุดตัวแทนที่ได้รับไปฉันก็รวมกันที่แสดงความไม่รู้และความหยิ่งมีเพียงคำใบ้ของการเป็นwaaayปลายไปงานเลี้ยง ฉันสงสัยว่าพวกเขาจะให้คะแนนโพสต์ของฉันเป็นอย่างไรใน comp.lang.c โอ้สมมติว่า 1987? ดีกว่าไม่ถาม
Peter Rowell

13

สิ่งนี้ทำให้ฉันมีปัญหาเหมือนกัน (404 ไม่พบข้อผิดพลาด) บิตที่ขาดหายไปสำหรับฉันคือการแก้ไขSTATICFILES_DIRSทูเปิลใน settings.py เพื่อให้สิ่งนี้แก่ฉัน:

STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(os.path.dirname(__file__),'media').replace('\\','/'),
)

จากนั้นหยิบไฟล์ CSS ของฉันในโฟลเดอร์ชื่อ 'สื่อ' ซึ่งอยู่ในระดับบนสุดของโครงการ django ของฉัน

ฉันยังมี:

MEDIA_ROOT = ''
MEDIA_URL = ''
STATIC_ROOT = ''
STATIC_URL = '/media/'

(ตรวจสอบให้แน่ใจว่าคุณมีชั้นนำ/ข้างต้นในSTATIC_URL )

แน่นอนดังที่กล่าวไว้ข้างต้นคุณต้องมีไฟล์ CSS ที่รวมอยู่ในไฟล์ html ของคุณอย่างเหมาะสม ฉันมี:

<link href="{{ STATIC_URL }}css/ea_base.css" rel="stylesheet" type="text/css" media="screen" />

ในที่สุดวิธีการแก้ปัญหาที่ชัดเจนเรียบง่ายและสง่างาม ทำงานได้ดีกับ django 1.5
pbarill

# ใช้เครื่องหมายทับเสมอแม้ใน Windows .replace('\\','/')ไม่จำเป็น
หัวหมาก

12

ฉันต้องตั้งค่าอะไรบ้างเพื่อให้ Django เห็นไฟล์ css

ไม่มี.

ตรวจสอบให้แน่ใจว่าเทมเพลตของคุณมีไฟล์ CSS (เช่นเดียวกับ HTML มาตรฐาน) และวางไฟล์ CSS บนเซิร์ฟเวอร์สื่อ

เพื่อชี้แจง: ด้วย Django ขอแนะนำอย่างยิ่งให้คุณให้บริการสื่อทั้งหมดของคุณ (ทุกอย่างที่ไม่ใช่ html แบบไดนามิก) จากอินสแตนซ์เซิร์ฟเวอร์อื่น วิธีการใช้งานนั้นขึ้นอยู่กับคุณ แต่คนส่วนใหญ่สร้างโดเมนย่อย


2
สวัสดี Oli ฉันรู้ว่าโพสต์นี้ใกล้จะ 3 ปีแล้ว แต่นี่ยังเป็นวิธีที่ดีที่สุดในการเชื่อมโยง css กับเทมเพลต django ดูเหมือนว่าจะง่ายที่สุดเพียงแค่เชื่อม css กับ abs URL เช่น static.example.com และเก็บไฟล์คงที่ทั้งหมดไว้ที่ url นั้น
cp3


0

วิธีที่ง่ายที่สุดในการใช้ css กับ django คือการเพิ่มลงในเทมเพลตของคุณเป็นไฟล์คงที่

แต่มันเหมือนกับ ajax ฉันไม่พบสิ่งใดที่บอกวิธีรวมเข้าด้วยวิธีมาตรฐาน

มีโมดูลcss-compressorสำหรับ django หากคุณต้องการปรับขนาดให้เหมาะสม

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.