وقتی با Django کار می‌کنید و می‌خواهید به پروژه خودتون استایل‌هایی اضافه کنید، شاید در ابتدا کار رو کمی پیچیده به نظر برسونه ولی واقعاً اینطور نیست. توی این متن قراره بریم سراغ نحوه‌ی اضافه کردن CSS به پروژه Django و توضیح بدیم که چطور می‌شه با این فریم‌ورک محبوب، ظاهری جذاب رو برای سایت‌هامون طراحی کنیم.
همونجوری که می‌دونید، Django یکی از فریم‌ورک‌های محبوبه برای توسعه وب که بر اساس زبان برنامه‌نویسی Python ساخته شده و یکی از قابلیت‌های خیلی خوبش اینه که با استفاده از قالب‌بندی و اضافه کردن فایل‌های استایل و جاوا اسکریپت خارجی، شما می‌تونید سایت‌هایی با ظاهری خیلی زیبا بسازید.
برای اینکار ابتدا لازمه تا دایرکتوری استاتیک خودتون رو ایجاد کنید. مثلاً، با استفاده از یک دایرکتوری به نام ‘static’ می‌تونید فایل‌های CSS و JS رو درونش قرار بدید و بعد از طریق قالب‌های Django به اونها دسترسی پیدا کنید. این باعث می‌شه که بدون نیاز به نوشتن کد استایل‌های طولانی مستقیماً در HTML، سایتتون به راحتی قابل مدیریت باشه.
یه نکته مهم وقتی با استایل‌ها در Django کار می‌کنید اینه که باید حتماً تنظیمات استاتیک فایلهاتون رو توی تنظیمات پروژه درست بشه تا بتونید اون فایل‌ها رو مدیریت و فراخوانی کنید. این کار خیلی ساده است و به روش‌های مختلفی می‌تونید انجامش بدید، اما یک روش مرسوم اینه که خود template tag ها و context processorها رو توی پروژه در نظر بگیرید.
بیاید با هم کد ساده‌ای رو که دقیقاً این نحوه پیاده‌سازی استایل‌ها رو نشون میده بررسی کنیم و بعد ریزبه‌ریز توضیحاتش رو خواهیم دید.
{% load static %}
My Django Project
حالا بیاید خط به خط این کد رو بررسی کنیم:
{% load static %}: این خط، تگ template رو که برای بارگذاری فایل‌های استاتیک لازم هست، بارگیری می‌کنه.<!DOCTYPE html>: این خط دکترین HTML رو مشخص می‌کنه.<html lang="fa">: تگ html که زبان رو فارسی تنظیم می‌کنه.<head>: تگ head برای متادیتا و لینک‌های مختلف مثل CSS استفاده می‌شه.<meta charset="UTF-8">: تنظیم کاراکترهای صفحه رو مشخص می‌کنه به UTF-8 که یونی کد هست.<title>My Django Project</title>: عنوان سایت توی نوار عنوان مرورگر.<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">: لینک‌دهی به فایل CSS که در دایرکتوری استاتیک شما قرار داره.<body>: محل قرارگیری محتوای اصلی صفحه.<h1>به پروژه جنگو خوش‌آمدید!</h1>: عنوان اصلی صفحه رو مشخص می‌کنه.</body>: پایان تگ body و کل ساختار محتوایی صفحه.</html>: پایان سند HTML.