کار با Django Templates و Static Files

در آموزش شروع کار با Django به شما نشان دادم چطور یک سایت Django راه‌اندازی کنید. اما Templateهایی که رندر کردیم خیلی ساده بودند.

قطعاً نمی‌خواهید سایتتان این‌قدر ساده به نظر برسد.

چطور ظاهر سایت را بهتر کنیم؟ ساده است — کمی استایل اضافه کنید. در این آموزش نشان می‌دهم چطور CSS و JavaScript را به Django templates اضافه کنید تا ظاهرشان بهتر شود. برای این کار ابتدا باید مفهوم Static Files در Django را بفهمید.

راه‌اندازی پروژه Django

ابتدا یک پوشه به نام projects بسازید:

mkdir projects && cd projects

داخل آن با virtualenv محیط بسازید:

virtualenv env –python python3

اگر virtualenv ندارید:

pip install virtualenv

حالا محیط را فعال کنید:

source env/bin/activate

اگر درست باشد باید (env) در ترمینال ببینید.

حالا Django نصب کنید:

pip install django

سپس پروژه بسازید:

django-admin startproject djangotemplates

و وارد پوشه شوید.

ساختار باید شبیه این باشد:

djangotemplates
├─ djangotemplates
│ ├─ __init__.py
│ ├─ settings.py
│ ├─ urls.py
│ └─ wsgi.py
└─ manage.py

تنظیمات Static Files

Static files شامل CSS، JavaScript و تصاویر هستند.

در settings.py این خط هست:

STATIC_URL = ‘/static/’

یعنی Django هنگام جستجوی فایل‌های استاتیک مسیر /static/ را به URL اضافه می‌کند.

حالا این‌ها را اضافه کنید:

STATICFILES_DIRS = (
os.path.join(BASE_DIR, ‘static’),
)STATIC_ROOT = os.path.join(BASE_DIR, ‘staticfiles’)

  • STATICFILES_DIRS → محل جستجوی فایل‌های استاتیک

  • STATIC_ROOT → محل جمع‌آوری فایل‌ها هنگام اجرای collectstatic

ساخت پوشه static

در ریشه پروژه پوشه static بسازید:

static/
├─ css/
│ └─ main.css
└─ js/
└─ main.js

ساخت Django app

python manage.py startapp example

در settings.py داخل INSTALLED_APPS اضافه کنید:

‘example’,

تعریف URL

در urls اصلی:

url(r’^’, include(‘example.urls’))

در example/urls.py:

urlpatterns = [
url(r’^$’, views.HomePageView.as_view(), name=‘home’),
url(r’^about/$’, views.AboutPageView.as_view(), name=‘about’),
]

ساخت Templateها

در پوشه templates فایل‌ها:

index.html
about.html

ساخته می‌شوند.

در Templateها می‌توان لینک‌ها را با:

{% url ‘home’ %}

ساخت.

این قابلیت URL reverse lookup است.

اتصال Viewها

در views.py:

from django.views.generic import TemplateView

class HomePageView(TemplateView):
template_name = “index.html”

class AboutPageView(TemplateView):
template_name = “about.html”

اجرای پروژه:

python manage.py migrate
python manage.py runserver

Template Inheritance (ارث‌بری قالب)

به جای تکرار کد، یک base.html بسازید:

{% load static %}
<script src=”{% static ‘js/main.js’ %}”></script>
<link rel=”stylesheet” href=”{% static ‘css/main.css’ %}”>

خط

{% load static %}

به موتور Template می‌گوید از فایل‌های static استفاده کند.

در base می‌توان Block تعریف کرد:

{% block title %}{% endblock %}
{% block pagecontent %}{% endblock %}

و در قالب‌ها:

{% extends ‘base.html’ %}

استایل دادن با CSS

در main.css:

.container {
background: #eac656;
border: 3px solid black;
}

ارسال داده از View به Template

در views.py:

context = {
‘data’: [
{‘name’:‘Celeb 1’,‘worth’:‘3567892’},
]
}
return render(request,‘data.html’,context)

در Template:

{% for celebrity in data %}
{{ celebrity.name }}
{% endfor %}

نمایش متغیرها با:

{{ }}

استفاده از snippet (include)

مثلاً navigation جدا بسازید:

templates/partials/nav-bar.html

و داخل template:

{% include ‘partials/nav-bar.html’ %}

Filters در Django

Filterها داده را فرمت می‌کنند.

برای humanize:

در settings:

‘django.contrib.humanize’,

در template:

{% load humanize %}
{{ celebrity.worth|intcomma }}

مثلاً:

1200000 → 1,200,000

جمع‌آوری Static Files

python manage.py collectstatic

این دستور همه فایل‌های استاتیک را در پوشه STATIC_ROOT جمع می‌کند (مهم برای production).

از همراهی شما با پارمین کلود سپاسگزاریم.

Click to rate this post!
[Total: 0 Average: 0]
avatar

نویسنده :

کیانا
مقالات نویسنده

مطالب مرتبط :

نظرات کاربران

دیدگاهی بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حالت تمام صفحه

دسته بندی :

برنامه نویسی،برنامه نویسی،بک اند

نوشته شده در :

۴ اسفند ۱۴۰۴

بروزرسانی شده در :

4 اسفند 1404

بازدید ها :

بازدید

جدید ترین نوشته ها :

شروع کار با Python Requests — درخواست‌های GET

نحوه استفاده از Unary Operators در JavaScript

دریافت پارامترهای Route در Middleware لاراول

آموزش ساخت CRUD ساده در Laravel با Resource Controller

نحوه مدیریت تاریخ و زمان با Carbon در Laravel و PHP

کار با JSON در MySQL