Öğretici: Visual Studio'da statik dosyalar sunma ve Django ile şablon devralmayı kullanma

Bu makalede Visual Studio'da Django web çerçevesiyle çalışma öğretici serisinin 3. Adımı verilmiştir.

Bu öğretici serisinin önceki Adımı, tek bir sayfa bağımsız HTML içeren minimal bir Django uygulaması oluşturur. Modern web uygulamaları genellikle birçok sayfadan oluşur ve tutarlı stil ve davranış sağlamak için CSS ve JavaScript dosyaları gibi paylaşılan kaynakları kullanır. 3. Adımda Visual Studio öğe şablonlarıyla birlikte çalışarak Django projenize içerik ekler ve uygulamanın özelliklerini genişletirsiniz.

Eğitimin 3. Adımında nasıl yapıldığını öğreneceksiniz:

Ortak kodla hızlı bir şekilde yeni dosyalar eklemek için Visual Studio öğe şablonlarını kullanma
Django kodundan statik dosyalar sunma
Django uygulamasına daha fazla sayfa ekleme
Şablon devralmayı kullanarak sayfalar arasında başlık ve gezinti oluşturun.

Önkoşullar

Visual Studio çözümü ve Django uygulama projeleri, 1. Adım: Django projesini oluşturma ve bu öğretici serisinin 2. Adım: Görünümleri ve sayfa şablonlarıyla bir Django uygulaması oluşturma bölümünde güncellenmiştir.
Django şablon sürümleri, Visual Studio projeleri ve Django projeleri ve Mac'te Python geliştirme hakkında ayrıntılı bilgi için bu öğretici serisinin 1. Adımındaki Önkoşullar bölümünü gözden geçirin.

Visual Studio'da öğe şablonlarını keşfetme

Bir Django uygulaması geliştirirken genellikle çok daha fazla Python, HTML, CSS ve JavaScript dosyası eklersiniz. Her dosya türü (ve dağıtım için ihtiyacınız olabilecek web.config gibi diğer dosyalar) için Visual Studio, başlamanıza yardımcı olacak kullanışlı öğe şablonları sağlar. Ortak kodla farklı türlerde yeni dosyaları hızla eklemek için bu şablonları kullanabilirsiniz.

Kullanılabilir şablonları görüntülemek için Visual Studio'da Çözüm Gezgini'ne gidin ve proje yapınızı açın.
Yeni dosya oluşturmak istediğiniz klasöre sağ tıklayın veYeni ÖğeEkle'yi> seçin. Yeni Öğe Ekle iletişim kutusu açılır:
Şablon kullanmak için istediğiniz şablonu seçin, dosya için bir ad girin ve Ekle'yi seçin.

Visual Studio dosyayı geçerli projenize ekler ve kaynak denetimine yönelik değişiklikleri işaretler.

Visual Studio'da öğe şablonlarını nasıl tanımladığınızı anlama

Visual Studio proje dosyası (.pyproj), dosyayı 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ı tanımak ve göstermek için bu tür tanımlayıcısını kullanır. Visual Studio, her seferinde sıralamanızı istemeden birçok proje türü için zengin bir öğe şablonu kümesi sağlamak için bu yaklaşımı izler.

Statik dosyaları uygulamanızdan sunma

Python ile oluşturulan bir web uygulamasında (herhangi bir çerçeve kullanarak), Python dosyalarınız her zaman web ana bilgisayarının sunucusunda çalışır ve hiçbir zaman kullanıcının bilgisayarına iletilmez. CSS ve JavaScript gibi diğer dosyalar yalnızca tarayıcı tarafından kullanıldığından, konak sunucu istendiğinde bunları as-is 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.

Bir Django projesi varsayılan olarak uygulamanın statik klasöründen statik dosyalar sunmak üzere ayarlanır. Bu davranış, Django projesinin settings.py dosyasında aşağıdaki kodla mümkün hale getirilir:

# 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']))

İstediğiniz herhangi bir klasör yapısını kullanarak uygulamanın statik klasöründeki dosyaları düzenleyebilir ve dosyalara başvurmak için statik klasör içindeki göreli yolları kullanabilirsiniz.

HTML şablonunda statik CSS dosyası kullanma

Uygulamaya CSS dosyası eklemek için şu adımları izleyin ve ardından index.html şablonundaki CSS stil sayfasını kullanın:

Çözüm Gezgini'nde projenizde HelloDjangoApp klasörüne sağ tıklayın,Yeni klasörEkle'yi> seçin ve klasörü statik olarak adlandırın.
Statik klasöre sağ tıklayın veYeni Öğe Ekle'yi> seçin.
Yeni Öğe Ekle iletişim kutusunda Stil Sayfası şablonunu seçin, dosyayı site.cs adlandırın ve ekle'yi seçin.

Visual Studio site.css dosyasını projeye ekler ve dosyayı düzenleyicide açar. Güncelleştirilmiş Django proje yapısına bir örnek aşağıda verilmiştir:
site.css dosyasının içeriğini aşağıdaki stillerle değiştirin:
```
.message {
    font-weight: 600;
    color: blue;
}
```
HelloDjangoApp/templates/index.html dosyasının içeriğini aşağıdaki işaretlemeyle değiştirin:
```
<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>
```
Bu kod, öğretici serisinin 2. Adımındaki <strong> HTML öğesini, message stil sınıfını referans alan bir <span> öğeyle değiştirir. Stil sınıfını bu şekilde kullanmak, HTML öğesini şekillendirmede daha fazla esneklik sağlar.
Dosya>Tümünü Kaydet'i seçerek veya Ctrl+Shift+S klavye kısayolunu kullanarak proje değişikliklerinizi kaydedin. (Projenizi geliştirirken Visual Studio dosyalarınızı otomatik olarak kaydettiği için bu adım gerekli değildir.)
Projeyi çalıştırın ve sonuçları gözlemleyin. İşiniz bittiğinde uygulamayı durdurun.
(İsteğe bağlı) Değişikliklerinizi kaynak denetimine kaydedebilir ve uzak deponuzu güncelleştirebilirsiniz. Daha fazla bilgi için, bu öğretici serisinin 2. Adımındaki Kaynak denetiminde değişiklikleri işleme bölümüne bakın.

{% statik %} etiketini yükle

ve {% load static %} gibi <head><body>HTML öğelerindeki statik dosyalara site göreli başvuruları öncesinde deyimininindex.html dosyasında bulunması gerekir. Bu bölümde gösterilen örnekte , "statik dosyalar" özel bir Django şablon etiket kümesine başvurur. Etiket kümesi, statik dosyalara başvurmak için söz dizimini {% static %} kullanmanıza olanak tanır. {% load static %} Etiket olmadan, uygulama çalıştırıldığında bir özel durum görürsünüz.

{% statik %} etiketi olmadan başvuru ekleyin

Etiket kullanmadan {% load static %} HTML işaretlemesindeki statik dosyalara site göreli başvuruları da ayarlayabilirsiniz. Bu durumda, Django proje klasörü hiyerarşisinde statik klasörün konumunu belirtirsiniz:

<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>

Statik dosya ve klasörleri düzenleme

Statik klasörünüzdeki diğer CSS, JavaScript ve HTML dosyalarını proje gereksinimlerinize göre 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, klasörleri referanslardaki {% static %} göreli dosya yoluna eklemeyi unutmayın.

Django uygulamasına sayfa ekleme

Django uygulamasına başka bir sayfa eklemek aşağıdaki görevleri içerir:

Görünümü tanımlayan bir Python işlevi ekleme
Sayfanın HTML işaretlemesi için şablon ekleme
Django projesinin urls.py dosyasındaki URL yollarını güncelleştirme

HelloDjangoApp projesine bir Hakkında (/about) sayfası ve giriş sayfasından bu sayfaya bağlantılar eklemek için şu adımları izleyin:

Çözüm Gezgini'nde projenizdeki templates/HelloDjangoApp klasörüne sağ tıklayın veYeni ÖğeEkle'yi> seçin.

Tavsiye

Ekle menüsünde Yeni Öğe komutunu görmüyorsanız, Visual Studio'nun hata ayıklama modundan gerektiğinde çıkması için Django uygulamanızı durdurduğunuza emin olun.
Yeni Öğe Ekle iletişim kutusunda HTML Sayfası şablonunu seçin, dosyayı about.htmlolarak adlandırın ve ekle'yi seçin.

about.html dosyasının içeriğini aşağıdaki HTML işaretlemesiyle 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>

Sonraki adımda, giriş sayfasına açık bağlantıyı bir gezinti çubuğuyla değiştirirsiniz.

HelloDjangoApp/views.py dosyasında, ş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 BasicProject/urls.py dosyasında, sayfanın yolunu about dizideki urlPatterns son öğe olarak ekleyin:

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
   re_path(r'^$', HelloDjangoApp.views.index, name='index'),
   re_path(r'^home$', HelloDjangoApp.views.index, name='home'),
   re_path(r'^about$', HelloDjangoApp.views.about, name='about')
 ]

templates/HelloDjangoApp/index.html dosyasında, öğesinde ilk deyim olarak aşağıdaki işaretlemeyi <body> ekleyin:
```
<div><a href="about">About</a></div>
```
Bu işaretleme, Django uygulamasının /about sayfasına bir bağlantı ekler. Sonraki bir adımda bu bağlantıyı bir gezinti çubuğuyla değiştirebilirsiniz.
Proje değişikliklerinizi kaydedin ve projeyi yeniden çalıştırın. Sayfaya /about göz atın ve çeşitli uygulama sayfaları arasındaki gezintiyi denetleyin.
İşiniz bittiğinde uygulamayı durdurun.

"Dizin" sayfasına yönlendirme

Çalışan uygulamanızın /index sayfasına göz atmayı denerseniz Sayfa bulunamadı (404) hatasıyla karşılaşırsınız.

HelloDjangoApp/views.py dosyasında adlı indexbir işlev olsa da, Django projesinin BasicProject/urls.py dosyasındaki URL yönlendirme desenleri dizesiyle indexeşleşen normal bir ifade içermez. Uygulama "dizin" sayfasının geçerli ifadesi şeklindedir ^$. Dizeyi index ile eşleştirmek için desen ^index$ için başka bir URL girişi eklemeniz gerekiyor.

Sonraki bölümde, bir desenin adına başvurmak için sayfa şablonundaki etiketi kullanmanın {% url '<pattern_name>' %} nasıl daha iyi olduğu açıklanmaktadır. Bu durumda Django sizin için uygun URL'yi oluşturur. Örneğin, <div><a href="home">Home</a></div> işaretlemesini templates/HelloDjangoApp/about.html dosyasındaki işaretlemeyi <div><a href="{% url 'index' %}">Home</a></div> ile değiştirebilirsiniz. 'index' dizisinin kullanımı artık çalışıyor çünkü urls.py dosyasındaki ilk URL deseni 'index' olarak adlandırılmış durumda. İkinci desene başvurmak için de kullanabilirsiniz 'home' .

Üst bilgi ve navigasyon için şablon devralmayı kullan

Birçok web uygulaması, her sayfada açık gezinti bağlantıları yerine en önemli sayfa bağlantılarını, açılır menüleri vb. sağlayan bir marka üst bilgisine ve gezinti çubuğuna sahiptir. Uygulama içinde tutarlılık sağlamak için üst bilgi ve gezinti çubuğu tüm sayfalarda aynı olmalıdır, ancak her sayfa şablonunda aynı kodu yinelemeniz gerekmez. Tüm sayfalarınızın ortak bölümlerini tek bir dosyada tanımlayabilirsiniz.

Django'nun şablon oluşturma sistemi, belirli öğeleri birden çok şablonda yeniden kullanmanın iki yolunu sağlar:

Ekler , söz dizimi {% include <template_path> %}ile başvuran şablonda belirli bir yere eklediğiniz diğer sayfa şablonlarıdır. Yolu kodda dinamik olarak değiştirmek istiyorsanız bir değişken de kullanabilirsiniz. Eklemeler genellikle sayfanın gövdesinde paylaşılan şablonu sayfada belirli bir konumda çekmek için kullanılır.
Devralma, başvuru yapılan şablonun temel aldığı paylaşılan bir temel şablonu belirtmek için sayfa şablonunun başındaki {% extends <template_path> %} sentaksını kullanır. 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. Bu yaklaşım, başvuruda bulunan şablonların temel şablonun yalnızca bloklar olarak adlandırılan belirli alanlarını eklemesini veya değiştirmesini gerektirir.

Her iki yaklaşım için de değer uygulamanın <template_path>templates klasörüne göredir (../ veya ./ buna izin verilir).

Temel bir şablon, blokları {% block <block_name> %} ve {% endblock %} etiketlerini kullanarak ayırır. Başvuran bir şablon aynı blok adına sahip etiketler kullanıyorsa, başvuran şablondaki blok içeriği temel şablondaki eşleşen bloğu geçersiz kılar.

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

Çözüm Gezgini'ndetemplates/HelloDjangoApp klasörüne sağ tıklayın ve HTML Sayfası şablonundan layout.htmladlı yeni bir dosya oluşturun.

layout.html dosyasının içeriğini aşağıdaki HTML işaretlemesiyle değiştirin:

<!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; 2024</p>
      </footer>
   </div>
</body>
</html>

Bu şablon, başvuran sayfaların değiştirmesi gereken tüm içeriği tanımlayan adlı contentbir blok içerir.

HelloDjangoApp/static/site.css dosyasında dosyanın sonuna aşağıdaki stilleri ekleyin:

.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;
}

Bu stil tanımları bu alıştırma için ilginç bir sonuç oluşturur. Bu kılavuzda responsive tasarım gösterilmiyor.

templates/HelloDjangoApp/index.html dosyasının içeriğini aşağıdaki kodla değiştirin:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Şablon index artık temel şablona başvurur ve bloğu geçersiz kılar content . Devralma kullanarak bu şablonun basitleştirildiğini görebilirsiniz.
Şablonlar/HelloDjangoApp/about.html dosyasının içeriğini aşağıdaki kodla değiştirin; böylece about şablon temel şablona da başvurur ve bloğu geçersiz kılarcontent:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Uygulamayı yeniden çalıştırın ve sonuçları gözlemleyin. Uygulama sayfaları arasında geçiş yapmak için gezinti çubuğu bağlantılarını kullanın.
İşiniz bittiğinde uygulamayı durdurun ve proje değişikliklerinizi kaydedin.
Uygulamada önemli değişiklikler yaptığınız için, değişikliklerinizi bir Git deposunda kaydetmenin zamanı geldi. Daha fazla bilgi için, bu öğretici serisinin 2. Adımındaki Kaynak denetiminde değişiklikleri işleme bölümüne bakın.

Sonraki adım

4. Adım: Django Web Projesi şablonunun tamamını kullanma

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-08-08