3. Adım: Django uygulamasıyla statik dosyalar sunma, sayfa ekleme ve şablon devralmayı kullanma

Makale
08/25/2023

Önceki adım: Görünümler ve sayfa şablonları içeren bir Django uygulaması oluşturma

Öğreticinin önceki adımlarında, tek bir HTML sayfasıyla minimal bir Django uygulaması oluşturmayı öğrendiniz. Ancak modern web uygulamaları birçok sayfa içerir. Modern web sayfaları tutarlı stil ve davranış sağlamak için CSS ve JavaScript dosyaları gibi paylaşılan kaynakları kullanır.

Bu adımda şunların nasıl yapılacağını öğreneceksiniz:

Visual Studio öğe şablonlarını kullanarak uygun ortak kodla farklı türlerde yeni dosyaları hızla ekleme (3-1. adım)
Django projesini statik dosyalara hizmet vermek için ayarlama (3-2. adım)
Uygulamaya ek sayfalar ekleme (3-3. adım)
Sayfalar arasında kullanılan bir üst bilgi ve gezinti çubuğu oluşturmak için şablon devralmayı kullanma (3-4. adım)

3-1. Adım: Öğe şablonlarını tanıma

Django uygulaması geliştirirken genellikle birçok Python, HTML, CSS ve JavaScript dosyası eklersiniz. Her dosya türü (dağıtım için ihtiyacınız olabilecek web.config gibi dosyalar) için Visual Studio, başlamanıza yardımcı olacak kullanışlı öğe şablonları sağlar.

Kullanılabilir şablonları görüntülemek için Çözüm Gezgini gidin, öğeyi oluşturmak istediğiniz klasöre sağ tıklayın ve ardından Yeni Öğe Ekle'yi>seçin.

Add new item dialog in Visual Studio.

Şablon kullanmak için istediğiniz şablonu seçin, dosya için bir ad belirtin ve ardından Ekle'yi seçin. Bir öğeyi bu şekilde eklemek, dosyayı otomatik olarak Visual Studio projenize ekler ve kaynak denetimine yönelik değişiklikleri işaretler.

Soru: Visual Studio hangi öğe şablonlarının sunulacağı hakkında nasıl bilgi edindi?

Yanıt: Visual Studio proje dosyası (.pyproj), bunu Python projesi olarak işaretleyen bir proje türü tanımlayıcısı içerir. Visual Studio, yalnızca proje türüne uygun öğe şablonlarını göstermek için tür tanımlayıcısını kullanır. Bu şekilde Visual Studio, her seferinde sıralamanızı istemeden birçok proje türü için zengin bir öğe şablonu kümesi sağlayabilir.

3-2. Adım: Uygulamanızdan statik dosyalar sunma

Python ile oluşturulmuş bir web uygulamasında (herhangi bir çerçeve kullanılarak), Python dosyalarınız her zaman web ana bilgisayarının sunucusunda çalışır. Python dosyaları da hiçbir zaman kullanıcının bilgisayarına iletilmez. Ancak CSS ve JavaScript gibi diğer dosyalar yalnızca tarayıcı tarafından kullanılır. Bu nedenle, konak sunucusu istendiği zaman bunları olduğu gibi teslim eder. Bu tür dosyalar "statik" dosyalar olarak adlandırılır ve Django herhangi bir kod yazmanıza gerek kalmadan bunları otomatik olarak teslim edebilir.

Django projesinin settings.py dosyasındaki satırlar sayesinde, bir Django projesi varsayılan olarak uygulamanın statik klasöründeki statik dosyaları sunmak üzere ayarlanır:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

Statik içindeki dosyaları istediğiniz herhangi bir klasör yapısını kullanarak düzenleyebilir ve ardından dosyalara başvurmak için bu klasörün içindeki göreli yolları kullanabilirsiniz. İşlemi göstermek için aşağıdaki adımları izleyerek uygulamaya bir CSS dosyası ekleyin ve ardından index.html şablonunda bu stil sayfasını kullanın:

Çözüm Gezgini Visual Studio projesinde HelloDjangoApp klasörüne sağ tıklayın, Yeni klasör Ekle'yi>seçin ve klasörü staticolarak adlandırın.
Statik klasöre sağ tıklayın ve Yeni öğe ekle'yi>seçin. Görüntülenen iletişim kutusunda Stil Sayfası şablonunu seçin, dosyayı site.cssadlandırın ve Ekle'yi seçin.

site.css dosyası projede görünür ve düzenleyicide açılır. Klasör yapınız aşağıdaki görüntüye benzer şekilde görünmelidir:
site.css dosyasının içeriğini aşağıdaki kodla değiştirin ve dosyayı kaydedin:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Uygulamanın templates/HelloDjangoApp/index.html dosyasının içeriğini aşağıdaki kodla değiştirin. Kod, 2. adımda kullanılan öğesini stil sınıfına message başvuran bir <span> ile değiştirir<strong>. Stil sınıfı kullanmak, öğenin stilini oluşturmada size daha fazla esneklik sağlar. (VS 2017 15.7 ve önceki sürümleri kullanırken index.html dosyasını şablonlarda bir alt klasöre taşımadıysanız, 2-4. adımda şablon adlarına göz atın.)
```
<html>
    <head>
        <title>{{ title }}</title>
        {% load static %} 
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>
```
Sonuçları gözlemlemek için projeyi çalıştırın. İşiniz bittiğinde, sunucuyu durdurun ve isterseniz (2. adımda açıklandığı gibi) değişikliklerinizi kaynak denetimine işleyin.

Soru: {% load static %} etiketinin amacı nedir?

Yanıt: {% load static %} ve <body>gibi <head> öğelerdeki statik dosyalara başvurmadan önce satır gereklidir. Bu bölümde gösterilen örnekte,"statik dosyalar", statik dosyalara başvurmak için söz dizimini {% static %} kullanmanıza olanak tanıyan özel bir Django şablon etiketi kümesine başvurur. olmadan {% load static %}, uygulama çalıştırıldığında bir özel durum görürsünüz.

Soru: Statik dosyaları düzenlemek için herhangi bir kural var mı?

Yanıt: Statik klasörünüzdeki diğer CSS, JavaScript ve HTML dosyalarını istediğiniz gibi ekleyebilirsiniz. Statik dosyaları düzenlemenin tipik bir yolu, yazı tipleri, betikler ve içerik (stil sayfaları ve diğer dosyalar için) adlı alt klasörler oluşturmaktır. Her durumda, bu klasörleri başvurulara göreli dosya yoluna {% static %} eklemeyi unutmayın.

Soru: Aynı görevi {% load static %} etiketini kullanmadan tamamlayabilir miyim?

Cevap: Evet, yapabilirsiniz.

<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="../../static/site.css" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

3-3. Adım: Uygulamaya sayfa ekleme

Uygulamaya başka bir sayfa eklemek şunları yapacaktır:

Görünümü tanımlayan bir Python işlevi ekleyin.
Sayfanın işaretlemesi için bir şablon ekleyin.
Django projesinin urls.py dosyasına gerekli yönlendirmeyi ekleyin.

Aşağıdaki adımlar, "HelloDjangoApp" projesine bir "Hakkında" sayfası ve giriş sayfasından sayfaya bağlantılar ekler:

Çözüm Gezgini'da templates/HelloDjangoApp klasörüne sağ tıklayın. Yeni öğe ekle'yi>seçin ve HTML Sayfası öğesi şablonunu seçin. Dosyayı about.html adlandırın ve Ekle'yi seçin.

İpucu

Ekle menüsünde Yeni Öğe komutu görünmüyorsa, Visual Studio'nun hata ayıklama modundan çıkması için sunucuyu durdurduğunuza emin olun.

about.html dosyasının içeriğini aşağıdaki işaretlemeyle değiştirin (giriş sayfasının açık bağlantısını 3-4. adımda basit bir gezinti çubuğuyla değiştirin):

<html>
    <head>
        <title>{{ title }}</title>
        {% load static %}
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <div><a href="home">Home</a></div>
        {{ content }}
    </body>
</html>

Uygulamanın views.py dosyasını açın ve şablonu kullanan adlı about bir işlev ekleyin:

def about(request):
    return render(
        request,
        "HelloDjangoApp/about.html",
        {
            'title' : "About HelloDjangoApp",
            'content' : "Example app page for Django."
        }
    )

Django projesinin urls.py dosyasını açın ve diziye urlPatterns aşağıdaki satırı ekleyin:
```
re_path(r'^about$', HelloDjangoApp.views.about, name='about'),
```
templates/HelloDjangoApp/index.html dosyasını açın ve Hakkında sayfasına bağlanmak için öğesinin altına <body> aşağıdaki satırı ekleyin (bu bağlantıyı yeniden 3-4. adımda bir gezinti çubuğuyla değiştireceksiniz):
```
<div><a href="about">About</a></div>
```
Tümünü Kaydet>menü komutunu kullanarak tüm dosyaları kaydedin veya yalnızca Ctrl+Shift S tuşlarına+basın. (Teknik olarak, projeyi Visual Studio'da çalıştırmak dosyaları otomatik olarak kaydettiğinden bu adım gerekli değildir. Bununla birlikte, bunu bilmek iyi bir komut.)
Sonuçları gözlemlemek ve sayfalar arasındaki gezintiyi denetlemek için projeyi çalıştırın. İşiniz bittiğinde sunucuyu kapatın.

Soru: Giriş sayfasının bağlantısı için "index" kullanmayı denedim, ancak işe yaramadı. Neden?

Yanıt: views.py dosyasındaki görünüm işlevinin adı indexolsa da, Django projesinin urls.py dosyasındaki URL yönlendirme desenleri "index" dizesiyle eşleşen normal bir ifade içermez. dizesini eşleştirmek için deseni ^index$için başka bir giriş eklemeniz gerekir.

Sonraki bölümde gösterildiği gibi, bir desenin {% url '<pattern_name>' %} adına başvurmak için sayfa şablonundaki etiketi kullanmak daha iyidir. Bu durumda Django sizin için uygun URL'yi oluşturur. Örneğin, about.html içindeki değerini ile <div><a href="{% url 'index' %}">Home</a></div>değiştirin<div><a href="home">Home</a></div>. 'index' kullanımı burada çalışır çünkü urls.py'daki ilk URL deseni aslında 'index' olarak adlandırılır (bağımsız değişkenin name='index' özelliğine göre). İkinci desene başvurmak için 'home' da kullanabilirsiniz.

3-4. Adım: Üst bilgi ve gezinti çubuğu oluşturmak için şablon devralmayı kullanma

Modern web uygulamaları, her sayfada açık gezinti bağlantıları kullanmak yerine bir marka üst bilgisi ve gezinti çubuğu kullanır. Gezinti çubuğu en önemli sayfa bağlantılarını, açılır menüleri vb. sağlar. Üst bilgi ve gezinti çubuğunun tüm sayfalarda aynı olduğundan emin olmak için, her sayfa şablonunda aynı kodu yinelemeyin. Bunun yerine tüm sayfalarınızın ortak bölümlerini tek bir yerde tanımlamak istiyorsunuz.

Django'nun şablon sistemi, birden çok şablonda belirli öğeleri yeniden kullanma için iki araç sağlar: dahil etme ve devralma.

içerir , söz dizimini {% include <template_path> %}kullanarak başvuruda bulunan şablonun belirli bir yerine eklediğiniz diğer sayfa şablonlarıdır. Kodun yolunu dinamik olarak değiştirmek istiyorsanız bir değişken de kullanabilirsiniz. Eklemeler, paylaşılan şablonu sayfada belirli bir konumda çekmek için sayfanın gövdesinde kullanılır.
Devralma , sayfa şablonunun başındaki öğesini kullanarak {% extends <template_path> %} başvuruda bulunan şablonun temel aldığı paylaşılan bir temel şablonu belirtir. Devralma genellikle bir uygulamanın sayfaları için paylaşılan düzen, gezinti çubuğu ve diğer yapıları tanımlamak için kullanılır; örneğin, başvuran şablonlar temel şablonun yalnızca bloklar olarak adlandırılan belirli alanlarını ekleyebilir veya değiştirebilir.

Her iki durumda da, <template_path> uygulamanın şablonlar klasörüne göredir (../ veya ./ bunlara izin verilir).

Temel şablon, ve {% endblock %} etiketlerini kullanarak {% block <block_name> %} blokları gösterir. Başvuruda bulunan bir şablon aynı blok adına sahip etiketler kullanıyorsa, blok içeriği temel şablonun etiketini geçersiz kılar.

Aşağıdaki adımlarda devralma gösterilmektedir:

Uygulamanın templates/HelloDjangoApp klasöründe yeni bir HTML dosyası oluşturun. templates/HelloDjangoApp klasörüne sağ tıklayın, Yeni öğe ekle'yi>ve ardından HTML Sayfası öğesi şablonunu seçin. Dosyayı layout.html adlandırın ve Ekle'yi seçin.

layout.html dosyasının içeriğini aşağıdaki işaretlemeyle değiştirin. Bu şablonun, tüm başvuran sayfaların değiştirmesi gereken "content" adlı bir blok içerdiğini görebilirsiniz:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
</head>

<body>
    <div class="navbar">
       <a href="/" class="navbar-brand">Hello Django</a>
       <a href="{% url 'home' %}" class="navbar-item">Home</a>
       <a href="{% url 'about' %}" class="navbar-item">About</a>
    </div>

    <div class="body-content">
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>
</body>
</html>

Aşağıdaki stilleri uygulamanın static/site.css dosyasına ekleyin (bu kılavuz burada duyarlı tasarım göstermeye çalışmıyor; bu stiller yalnızca ilginç bir sonuç elde etmek için):

.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

temel şablona başvurmak için templates/HelloDjangoApp/index.html dosyasını değiştirin ve sayfada kullanılabilir hale getirin. Aşağıdaki satırı HTML sayfasına (html etiketinin üstüne) 1. satır olarak ekleyin:
```
{% extends "HelloDjangoApp/layout.html" %}
```
Devralma kullanarak bu şablonun içerik bloğunu geçersiz kılmak için gövde etiketi içinde uygulanması basit hale geldiğini görebilirsiniz:
```
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Düzen şablonunu kullanılabilir hale getirmek için templates/HelloDjangoApp/about.html dosyasını aynı şekilde değiştirin. 1. adımdaki aynı satırı HTML sayfasına ekleyin (html etiketinin üstüne):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Ardından devralma kullanarak, içerik bloğunu geçersiz kılmak için gövde etiketinde şablonu uygulayın:
```
{% block content %}
{{ content }}
{% endblock %}
```
Sonuçları gözlemlemek için sunucuyu çalıştırın. İşiniz bittiğinde sunucuyu kapatın.
Uygulamada önemli değişiklikler yaptığınız için, değişikliklerinizi kaynak denetimine işlemenin zamanı geldi.

Sonraki adımlar

Django Web Projesi şablonunun tamamını kullanma

Daha derine git

İlk Django uygulamanızı yazma, bölüm 3 (görünümler) (docs.djangoproject.com)
Denetim akışı gibi Django şablonlarının daha fazla özelliği için bkz . Django şablon dili (docs.djangoproject.com)
Etiketi kullanmayla {% url %} ilgili tüm ayrıntılar için Django şablonları başvurusu (docs.djangoproject.com) için yerleşik şablon etiketleri ve filtreleri içindeki URL'ye bakın
GitHub'da öğretici kaynak kodu: Microsoft/python-sample-vs-learning-django

Aracılığıyla paylaş