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

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

Bu öğretici serisindeki önceki Adımlar, tek bir sayfa bağımsız HTML içeren minimal bir Flask 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, Flask projenize içerik eklemek ve uygulamanın özelliklerini genişletmek için Visual Studio öğe şablonlarıyla çalışırsınız.

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
Flask kodundan statik dosyalar sunma
Flask uygulamasına daha fazla sayfa ekleme
Şablon devralmayı kullanarak sayfalar arasında başlık ve gezinti oluşturun.

Önkoşullar

1. Adım: Flask projesi oluşturma bölümünde oluşturulan ve 2. Adım: Flask projelerini yeniden düzenleme bölümünde güncelleştirilen bir Visual Studio çözümü ve Flask uygulama projesi.

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

Bir Flask 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 Flask herhangi bir kod yazmanıza gerek kalmadan bunları otomatik olarak teslim edebilir. Örneğin HTML dosyalarında, projede göreli bir yol kullanarak statik dosyalara başvurabilirsiniz. Bu bölümdeki ilk yordam, var olan bir sayfa şablonuyla statik CSS dosyasının nasıl kullanılacağını gösterir.

Api uç noktası uygulaması gibi bir koddan statik dosya teslim etmeniz gerektiğinde Flask kullanışlı bir yöntem sağlar. Proje kökünde static adlı bir klasörün içindeki göreli yolları kullanarak dosyalara başvurabilirsiniz. Bu bölümdeki ikinci yordam, koddan basit bir statik veri dosyasıyla nasıl çalışulduğunu gösterir.

Her iki yordamda da, statik klasör altındaki dosyaları tercihinize göre düzenleyebilirsiniz.

Şablonda statik CSS dosyası kullanma

Şablonda statik dosya kullanmak için şu adımları izleyin:

Çözüm Gezgini'nde projenizde HelloFlask 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ş Flask 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;
}
```
HelloFlask/templates/index.html dosyasının içeriğini aşağıdaki işaretlemeyle değiştirin:
```
<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>
```
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.

Koddan statik dosya sunma

Flask, projenin statik klasöründeki herhangi bir dosyaya başvurmak için koddan çağırabileceğiniz adlı send_static_file bir işlev sağlar. Aşağıdaki işlem, statik veri dosyası döndüren basit bir API uç noktası oluşturur:

statik klasöründe, data.jsonadlı bir statik JSON veri dosyası oluşturun. Dosya için temel olarak Metin dosyası şablonunu kullanabilirsiniz.
JSON dosyasının içeriğini, mekanizmayı göstermek için bazı örnek veriler sağlayan aşağıdaki kodla değiştirin:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
HelloFlask/views.py dosyasına, send_static_file yöntemini kullanarak statik veri dosyasını döndüren bir /api/data uç noktası ekleyen bir işlev ekleyin.
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Proje değişikliklerinizi kaydedin ve projeyi yeniden çalıştırın. /api/data Yol uç noktasına gidin ve uygulamanın statik dosyayı döndürdüğünden emin olmak için:
İşiniz bittiğinde uygulamayı durdurun.

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.

API'lerden URL yollarını ve sorgu parametrelerini kullanma

Flask ile çalışırken API'lerle URL değişkenlerini ve sorgu parametrelerini işleyebilirsiniz. Daha fazla bilgi için bkz. Bu öğretici serisinin 1. Adımında değişken URL yollarını ve sorgu parametrelerini kullanma .

Flask uygulamasına sayfa ekleme

Flask 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
Flask projesinin views.py dosyasındaki URL yollarını güncelleştirme

BasicProject Flask 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 HelloFlask/templates 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 Flask 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>
      <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.

HelloFlask/views.py dosyasında, şablonu kullanan adlı about bir işlev ekleyin:

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

HelloFlask/templates/index.html dosyasının <body> öğesinin içine ilk deyim olarak aşağıdaki işaretlemeyi ekleyin:
```
<div><a href="about">About</a></div>
```
Bu işaretleme Flask 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.

Sayfa işlevinizi adlandırma

Flask, sayfa işlevinizin adına herhangi bir kısıtlama veya gereksinim getirmez. Dekoratör, @app.route Flask'in yanıt oluşturmak için işlevini çağırdığı URL'leri belirler. Geliştiriciler genellikle sayfa işlevi adını rotayla eşleştirebilir, ancak bu tür bir eşleştirme gerekli değildir.

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

Flask'in şablon oluşturma sistemi (varsayılan olarak Jinja), 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 <template_path> değer, uygulamanın templates klasörüne görelikidir (../ veya ./ de 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'ndeHelloFlask/templates 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>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('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.

HelloFlask/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.

HelloFlask/templates/index.html dosyasının içeriğini aşağıdaki işaretlemeyle değiştirin:
```
{% extends "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.
HelloFlask/templates/about.html dosyasının içeriğini aşağıdaki işaretlemeyle değiştirin; böylece about şablon temel şablona da başvurur ve bloğu geçersiz kılarcontent:
```
{% extends "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.

Öğretici incelemesi

Tebrikler, Visual Studio'da Flask öğreticisini tamamladınız.

Bu öğreticide şunların nasıl yapılacağını öğrendiniz:

Birden çok sayfa içeren bir Flask projesi oluşturma
Farklı sayfa görünümleri oluşturmak için şablonları kullanma
Statik dosyalar sunma, sayfa ekleme ve şablon devralmayı kullanma

Jinja Şablon Tasarımcısı Belgeleri (jinja.pocoo.org)
Flask Uygulaması nesnesi dokümantasyonunda (flask.pocoo.org) url_for
GitHub'da öğretici kaynak kodu (Microsoft/python-sample-vs-learning-flask)

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-08-08