23-03-2019, Saat: 23:57
(Son Düzenleme: 23-03-2019, Saat: 23:59, Düzenleyen: kıllıbacak.)
Bu öğreticinin önceki adımlarında müstakil HTML tek bir sayfayla en az bir Django uygulaması oluşturulacağını öğrendiniz. Modern web uygulamaları, ancak genellikle birçok sayfaları oluşan ve olun tutarlı bir stil ve davranışı sağlamak için CSS ve JavaScript dosyaları gibi paylaşılan kaynakları.
Bu adımda, şunların nasıl yapılır:
- Hızlı bir şekilde uygun Demirbaş kod ile farklı türdeki yeni dosyaları eklemek için Visual Studio öğe şablonları kullanın (adım 3 - 1)
- (3-2. adım) statik dosyaları sunmak için Django projesi yapılandırma
- (3-3. adım) uygulamaya ek sayfalar ekleme
- (Adım 3-4) sayfalar arasında kullanılan bir üst bilgi ve gezinti çubuğu oluşturmak için şablon devralma kullanın
Bir Django uygulaması geliştirirken, genellikle çok daha fazla Python, HTML, CSS ve JavaScript dosyaları ekleyin. Her dosya türü için (diğer dosyaları ister web.config dağıtımı için ihtiyacınız olan), Visual Studio'nun sağladığı uygun öğe şablonları başlamanıza yardımcı olmak için.
Kullanılabilir şablonlar görmek için Git Çözüm Gezgini, select öğesi oluşturmak istediğiniz klasörü sağ tıklatın Ekle > yeni öğe:

Bir şablonu kullanmak için istediğiniz şablonu seçin, dosya için bir ad belirtin ve seçin Tamam. Bu şekilde otomatik olarak öğe ekleme dosyası Visual Studio projenize ekler ve kaynak denetimi için değişiklikleri işaretler.
Soru: Nasıl Visual Studio, öğe şablonları sunmaya bilir?
Yanıt: Visual Studio Proje dosyası (.pyproj) bir Python projesi olarak işaretleyen bir proje türü tanımlayıcısı içeriyor. Visual Studio, proje türü için uygun olan öğe şablonları göstermek için bu tür tanımlayıcısı kullanır. Bu şekilde bloblarda her sıralamak için sormadan türleri pek çok proje için Visual Studio öğe şablonları zengin sağlayabilirsiniz.
3-2. adım: Uygulamanızdan statik dosyaları işleme
Python (herhangi bir çerçeveyi kullanarak) ile oluşturulmuş bir web uygulaması, Python dosyalarınızın her zaman web ana bilgisayarın sunucu üzerinde çalışan ve bir kullanıcının bilgisayarına hiçbir zaman iletilmez. Ana sunucu olarak yalnızca sunar diğer dosyaları, Bununla birlikte, CSS ve JavaScript gibi tarayıcı tarafından özel olarak kullanıldığından-bunlar istenen ne zaman açıktır. Bu tür dosyalar "statik" dosyaları olarak adlandırılır ve Django bunları otomatik olarak, kod yazmaya gerek sunabilirsiniz.
Varsayılan olarak uygulama statik dosyaları sunmak için yapılandırılmış bir Django projesi statikDjango projenin bu satırları sayesinde klasöründe settings.py:
PythonKopyala
Kod:
# 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']))
İçinde herhangi bir klasör yapısının kullanarak dosyaları düzenlediğiniz statik ister ve sonra dosyalara başvurmak için bu klasörün içinde göreli yollar kullanın. Bu işlem göstermek için aşağıdaki adımları uygulamaya bir CSS dosyası ekleyin ve ardından bu stil kullanmak index.html şablonu:
- İçinde Çözüm Gezgini, sağ HelloDjangoApp seçin Visual Studio proje klasöründe Ekle > Yeniklasörve klasörünü adlandırın
static
.- Sağ statik klasörü ve select Ekle > yeni öğe. Görüntülenen iletişim kutusunda, seçmek stil sayfası şablonu, dosya adı
site.css
seçip Tamam. Site.css dosya projesinde görünür ve düzenleyicide açılır. Klasör yapınız aşağıdaki görüntüye benzer görünmelidir:
- Öğesinin içeriğini değiştirin site.css aşağıdaki kodla ve dosyayı kaydedin:
[color=var(--text)]cssKopyala[/color]
.message { font-weight: 600; color: blue;}
- Uygulamanın içeriğini değiştirin templates/HelloDjangoApp/index.html değiştirir aşağıdaki kod ile dosya
<strong>
ile 2. adımda kullanılan öğe bir
<span>
başvuran
message
stil sınıf. Bu şekilde bir stil sınıfını kullanarak öğeyi stil çok daha fazla esneklik sağlar. (Henüz taşıdıysanız index.html içinde alt şablonları VS 2017 15.7 kullanırken ve daha önce başvurmak şablon namespacing 2-4. adımda.)
[color=var(--text)]HTMLKopyala[/color]
<html> <head> <title>{{ title }}</title> {% load staticfiles %} <!-- Instruct Django to load static files --> <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" /> </head> <body> <span class="message">{{ message }}</span>{{ content }} </body></html>- Sonuçları görmek için projeyi çalıştırın. İşiniz bittiğinde sunucusunu durdurmak ve isterseniz kaynak denetimi için yaptığınız değişiklikleri kaydedin (açıklandığı şekilde 2. adım).
Açık Gezinti bağlantıları her sayfada sahip olmak yerine modern web uygulamaları genellikle bir marka başlığı ve en önemli sayfa bağlantılarının, açılır menüler ve benzeri sağlayan bir gezinti çubuğunu kullanın. Üst bilgi ve gezinti çubuğunda aynı olan tüm sayfalara emin olmak için ancak her sayfası şablonu aynı kodu yinelemek istediğiniz yok. Bunun yerine, tek bir yerde tüm sayfaları ortak parçalarını tanımlamak istersiniz.
Django'nın şablon oluşturma sistemi belirli öğeleri birden çok şablon tarafından yeniden kullanmak için iki yol sağlar: içerir ve devralma.
- İçerir başvurulan şablonun söz dizimini kullanarak belirli bir yerde eklediğiniz diğer sayfası şablonları
{% include <template_path> %}
. Dinamik olarak kod yolu değiştirmek istiyorsanız, bir değişken de kullanabilirsiniz. İçeren bir sayfa gövdesinde genellikle paylaşılan şablondaki sayfasında belirli bir konumda çekmek için kullanılır.- Devralma kullanan
{% extends <template_path> %}
başına sayfa şablonunun üzerine sonra başvuran şablon oluşturur paylaşılan, temel bir şablonu belirtin. Devralma, gezinti çubuğunda bir paylaşılan düzeni tanımlamak için yaygın olarak kullanılır ve başvuran şablonlar yalnızca eklemek veya adlı temel şablon, belirli alanları değiştirmek için uygulamanın sayfaları, diğer yapıları blokları.