Django Static Files
Django projelerinde eklediğimiz her hangi bir static dosya (image, css, js..) erişilebilir değildir. Django projelerinde static dosyaların kullanılabilir olması için gerekli ayarlamaları yapıyor olmalıyız.
Örneğin; Ana dizin içerisindeki templates klasörüne style.css dosyası ekleyelim ve bu dosyaya base.html sayfasından ulaşmak isteyelim.
<!DOCTYPE html>
<html lang="tr">
<head>
...
<title>{% block title %} {%endblock%} | Blogapp</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>
base.html ile style.css dosyası aynı dizinde olmasına rağmen uygulamayı çalıştırdığımızda style.css dosyasının bulunamadığına (404 error) dikkat ediniz.
Peki django ile static dosyaların erişilebilir olmasını nasıl sağlarız?
settings.py dosyasında tanımlanan STATIC_URL global değişkeni her uygulamanın içindeki static klasörünü özel olarak dışarıya açar. Bu django için default bir ayardır. Yani hiç bir şey yapmadan bir django projesindeki her uygulama içerisindeki static klasörü içerisindeki dosyalara ulaşabiliriz. Klasör ismini değiştirebilirsiniz.
STATIC_URL = '/static/'
O halde daha önce base.html ile aynı dizindeki style.css dosyasını blog uygulaması altındaki "static/blog/style.css" konumunu taşıyalım.
Resimde görüldüğü gibi django projesindeki her uygulamaya (blog, account...) static klasörü ekleyebiliriz. Peki blog uygulamasındaki static/blog/css/style.css dosyasına nasıl ulaşacağız?
Uygulamadaki her template dosyasından (base.html, index.html, posts.html) istediğiniz uygulamadaki static klasörüne ulaşabilirsiniz. Örneğin; blog uygulamasındaki static klasörüne base.html dosyasından ulaşalım.
base.html
{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
...
<link rel="stylesheet" href="{% static 'blog/css/style.css' %}">
</head>
<body>
...
</body>
</html>
static klasöre ulaşmak istediğinizde mutlaka dosyanın en başında {% load static %} tanımlamasını yapmanız gerekiyor.
Dosya konumuna ulaşmak için ise {% static 'dosya konumu' %} tanımlasını yapmanız gerekiyor.
Uygulamayı çalıştırdığımızda index.html sayfası çağrılacağından dolayı {% load static %} tanımlamasını ekstra olarak index.html sayfasında da tanımlamamız gerekiyor.
index.html
{% extends "base.html" %}
{% load static %}
{% block title %} Anasayfa {% endblock %}
{% block content %}
<h1>Anasayfa</h1>
{% endblock %}
Bu durumda sayfa kaynağını kontrol ettiğimizde style.css dosyası ulaşılabilir durumdadır. İsterseniz style.css dosyasına basit bir css kodu ekleyerek sayfadaki etkisini de görebiliriz.
h1
{
color: red;
}
** Projeyi çalıştırmadan önce terminalden projeyi durdurup tekrar çalıştırmanız gerekiyor.
Örneğin;
blog uygulamasına özel olan static dosyalar blog uygulamasına,
account uygulamasına özel olan static dosyalar account uygulamasına,
tüm uygulamaların ortak kullanacağı static dosyaları ise ana dizin altındaki static klasörüne eklemeliyiz.
O halde ana dizin altına bir tane static klasörü ekleyelim. Ancak bu klasör uygulama altındaki static klasörleri gibi değil bilinçli olarak ana dizin altındaki klasörü dışarı açıyor olmamız gerekiyor.
settings.py dosyası içerisinde aşağıdaki tanımlamayı yapalım.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static"
]
Bu durumda artık ana dizin altına static klasörü ekleyebiliriz ve bu klasör tüm uygulamaların ulaşacağı bir konumda olmuş olur.
Klasör yapısı aşağıdaki şekildedir;
ana dizin=> /static/css/style.css
blog app => /static/css/blog.css
Dolayısıyla ana dizin altındaki style.css dosyasını base.html de kullanalım ve blog uygulaması altındaki blog.css dosyasını ise index.html de kullanalım.
Ancak içerik sayfalarında eklenecek olan css dosyalarının konumunu base.html de işaretleyim.
base.html
{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
{% block css_files %} {% endblock %}
<title>
{% block title %} {%endblock%} | Blogapp</title>
</head>
<body>
...
</body>
</html>
index.html
{% extends "base.html" %}
{% load static %}
{% block css_files %}
<link rel="stylesheet" href="{% static 'blog/css/blog.css' %}">
{% endblock %}
{% block title %} Anasayfa {% endblock %}
{% block content %}
<h1>Anasayfa</h1>
{% endblock %}
index.html sayfasını çalıştıralım.
Her iki konumdan gelen css dosyası sayfada başarılı bir şekilde yüklendi. Sayfamızın yazı rengini ana dizin altındaki style.css dosyasından yazı zemin rengini ise blog uygulaması altındaki blog.css dosyasından getirmiş olduk.
Artık tüm prrojeyi ilgilendiren statik dosyaları ana dizin altındaki static klasörüne, sadece bir uygulamayı ilgilendiren static dosyaları ise o uygulama altındaki static klasörüne ekleyebilirsiniz.